"use client";

import { useEffect, useState, useCallback, useRef } from "react";
import { useAppStore } from "@/store/app-store";
import { getElectronAPI } from "@/lib/electron";
import { Button } from "@/components/ui/button";
import { HotkeyButton } from "@/components/ui/hotkey-button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Save,
  RefreshCw,
  FileText,
  Sparkles,
  Loader2,
  FilePlus2,
  AlertCircle,
  CheckCircle2,
} from "lucide-react";
import { toast } from "sonner";
import { Checkbox } from "@/components/ui/checkbox";
import { XmlSyntaxEditor } from "@/components/ui/xml-syntax-editor";
import type { SpecRegenerationEvent } from "@/types/electron";

// Delay before reloading spec file to ensure it's written to disk
const SPEC_FILE_WRITE_DELAY = 500;

// Interval for polling backend status during generation
const STATUS_CHECK_INTERVAL_MS = 2000;

export function SpecView() {
  const { currentProject, appSpec, setAppSpec } = useAppStore();
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  const [specExists, setSpecExists] = useState(true);

  // Regeneration state
  const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
  const [projectDefinition, setProjectDefinition] = useState("");
  const [isRegenerating, setIsRegenerating] = useState(false);
  const [generateFeaturesOnRegenerate, setGenerateFeaturesOnRegenerate] =
    useState(true);
  const [analyzeProjectOnRegenerate, setAnalyzeProjectOnRegenerate] =
    useState(true);

  // Create spec state
  const [showCreateDialog, setShowCreateDialog] = useState(false);
  const [projectOverview, setProjectOverview] = useState("");
  const [isCreating, setIsCreating] = useState(false);
  const [generateFeatures, setGenerateFeatures] = useState(true);
  const [analyzeProjectOnCreate, setAnalyzeProjectOnCreate] = useState(true);

  // Generate features only state
  const [isGeneratingFeatures, setIsGeneratingFeatures] = useState(false);

  // Logs state (kept for internal tracking, but UI removed)
  const [logs, setLogs] = useState<string>("");
  const logsRef = useRef<string>("");

  // Phase tracking and status
  const [currentPhase, setCurrentPhase] = useState<string>("");
  const [errorMessage, setErrorMessage] = useState<string>("");
  const statusCheckRef = useRef<boolean>(false);
  const stateRestoredRef = useRef<boolean>(false);
  const pendingStatusTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Load spec from file
  const loadSpec = useCallback(async () => {
    if (!currentProject) return;

    setIsLoading(true);
    try {
      const api = getElectronAPI();
      const result = await api.readFile(
        `${currentProject.path}/.automaker/app_spec.txt`
      );

      if (result.success && result.content) {
        setAppSpec(result.content);
        setSpecExists(true);
        setHasChanges(false);
      } else {
        // File doesn't exist
        setAppSpec("");
        setSpecExists(false);
      }
    } catch (error) {
      console.error("Failed to load spec:", error);
      setSpecExists(false);
    } finally {
      setIsLoading(false);
    }
  }, [currentProject, setAppSpec]);

  useEffect(() => {
    loadSpec();
  }, [loadSpec]);

  // Reset all spec regeneration state when project changes
  useEffect(() => {
    // Clear all state when switching projects
    setIsCreating(false);
    setIsRegenerating(false);
    setIsGeneratingFeatures(false);
    setCurrentPhase("");
    setErrorMessage("");
    setLogs("");
    logsRef.current = "";
    stateRestoredRef.current = false;
    statusCheckRef.current = false;

    // Clear any pending timeout
    if (pendingStatusTimeoutRef.current) {
      clearTimeout(pendingStatusTimeoutRef.current);
      pendingStatusTimeoutRef.current = null;
    }
  }, [currentProject?.path]);

  // Check if spec regeneration is running when component mounts or project changes
  useEffect(() => {
    const checkStatus = async () => {
      if (!currentProject || statusCheckRef.current) return;
      statusCheckRef.current = true;

      try {
        const api = getElectronAPI();
        if (!api.specRegeneration) {
          statusCheckRef.current = false;
          return;
        }

        const status = await api.specRegeneration.status();
        console.log(
          "[SpecView] Status check on mount:",
          status,
          "for project:",
          currentProject.path
        );

        if (status.success && status.isRunning) {
          // Something is running globally, but we can't verify it's for this project
          // since the backend doesn't track projectPath in status
          // Tentatively show loader - events will confirm if it's for this project
          console.log(
            "[SpecView] Spec generation is running globally. Tentatively showing loader, waiting for events to confirm project match."
          );

          // Tentatively set state - events will confirm or clear it
          setIsCreating(true);
          setIsRegenerating(true);
          if (status.currentPhase) {
            setCurrentPhase(status.currentPhase);
          } else {
            setCurrentPhase("initialization");
          }

          // Set a timeout to clear state if no events arrive for this project within 3 seconds
          if (pendingStatusTimeoutRef.current) {
            clearTimeout(pendingStatusTimeoutRef.current);
          }
          pendingStatusTimeoutRef.current = setTimeout(() => {
            // If no events confirmed this is for current project, clear state
            console.log(
              "[SpecView] No events received for current project - clearing tentative state"
            );
            setIsCreating(false);
            setIsRegenerating(false);
            setCurrentPhase("");
            pendingStatusTimeoutRef.current = null;
          }, 3000);
        } else if (status.success && !status.isRunning) {
          // Not running - clear all state
          setIsCreating(false);
          setIsRegenerating(false);
          setCurrentPhase("");
          stateRestoredRef.current = false;
        }
      } catch (error) {
        console.error("[SpecView] Failed to check status:", error);
      } finally {
        statusCheckRef.current = false;
      }
    };

    // Reset restoration flag when project changes
    stateRestoredRef.current = false;
    checkStatus();
  }, [currentProject]);

  // Sync state when tab becomes visible (user returns to spec editor)
  useEffect(() => {
    const handleVisibilityChange = async () => {
      if (
        !document.hidden &&
        currentProject &&
        (isCreating || isRegenerating || isGeneratingFeatures)
      ) {
        // Tab became visible and we think we're still generating - verify status from backend
        try {
          const api = getElectronAPI();
          if (!api.specRegeneration) return;

          const status = await api.specRegeneration.status();
          console.log("[SpecView] Visibility change - status check:", status);

          if (!status.isRunning) {
            // Backend says not running - clear state
            console.log(
              "[SpecView] Visibility change: Backend indicates generation complete - clearing state"
            );
            setIsCreating(false);
            setIsRegenerating(false);
            setIsGeneratingFeatures(false);
            setCurrentPhase("");
            stateRestoredRef.current = false;
            loadSpec();
          } else if (status.currentPhase) {
            // Still running - update phase from backend
            setCurrentPhase(status.currentPhase);
          }
        } catch (error) {
          console.error(
            "[SpecView] Failed to check status on visibility change:",
            error
          );
        }
      }
    };

    document.addEventListener("visibilitychange", handleVisibilityChange);
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, [
    currentProject,
    isCreating,
    isRegenerating,
    isGeneratingFeatures,
    loadSpec,
  ]);

  // Periodic status check to ensure state stays in sync (only when we think we're running)
  useEffect(() => {
    if (
      !currentProject ||
      (!isCreating && !isRegenerating && !isGeneratingFeatures)
    )
      return;

    const intervalId = setInterval(async () => {
      try {
        const api = getElectronAPI();
        if (!api.specRegeneration) return;

        const status = await api.specRegeneration.status();

        if (!status.isRunning) {
          // Backend says not running - clear state
          console.log(
            "[SpecView] Periodic check: Backend indicates generation complete - clearing state"
          );
          setIsCreating(false);
          setIsRegenerating(false);
          setIsGeneratingFeatures(false);
          setCurrentPhase("");
          stateRestoredRef.current = false;
          loadSpec();
        } else if (
          status.currentPhase &&
          status.currentPhase !== currentPhase
        ) {
          // Still running but phase changed - update from backend
          console.log("[SpecView] Periodic check: Phase updated from backend", {
            old: currentPhase,
            new: status.currentPhase,
          });
          setCurrentPhase(status.currentPhase);
        }
      } catch (error) {
        console.error("[SpecView] Periodic status check error:", error);
      }
    }, STATUS_CHECK_INTERVAL_MS);

    return () => {
      clearInterval(intervalId);
    };
  }, [
    currentProject,
    isCreating,
    isRegenerating,
    isGeneratingFeatures,
    currentPhase,
    loadSpec,
  ]);

  // Subscribe to spec regeneration events
  useEffect(() => {
    if (!currentProject) return;

    const api = getElectronAPI();
    if (!api.specRegeneration) return;

    const unsubscribe = api.specRegeneration.onEvent(
      (event: SpecRegenerationEvent) => {
        console.log(
          "[SpecView] Regeneration event:",
          event.type,
          "for project:",
          event.projectPath,
          "current project:",
          currentProject?.path
        );

        // Only handle events for the current project
        if (event.projectPath !== currentProject?.path) {
          console.log("[SpecView] Ignoring event - not for current project");
          return;
        }

        // Clear any pending timeout since we received an event for this project
        if (pendingStatusTimeoutRef.current) {
          clearTimeout(pendingStatusTimeoutRef.current);
          pendingStatusTimeoutRef.current = null;
          console.log(
            "[SpecView] Event confirmed this is for current project - clearing timeout"
          );
        }

        if (event.type === "spec_regeneration_progress") {
          // Ensure state is set when we receive events for this project
          setIsCreating(true);
          setIsRegenerating(true);

          // Extract phase from content if present
          const phaseMatch = event.content.match(/\[Phase:\s*([^\]]+)\]/);
          if (phaseMatch) {
            const phase = phaseMatch[1];
            setCurrentPhase(phase);
            console.log(`[SpecView] Phase updated: ${phase}`);

            // If phase is "complete", clear running state immediately
            if (phase === "complete") {
              console.log("[SpecView] Phase is complete - clearing state");
              setIsCreating(false);
              setIsRegenerating(false);
              stateRestoredRef.current = false;
              // Small delay to ensure spec file is written
              setTimeout(() => {
                loadSpec();
              }, SPEC_FILE_WRITE_DELAY);
            }
          }

          // Check for completion indicators in content
          if (
            event.content.includes("All tasks completed") ||
            event.content.includes("✓ All tasks completed")
          ) {
            // This indicates everything is done - clear state immediately
            console.log(
              "[SpecView] Detected completion in progress message - clearing state"
            );
            setIsCreating(false);
            setIsRegenerating(false);
            setCurrentPhase("");
            stateRestoredRef.current = false;
            setTimeout(() => {
              loadSpec();
            }, SPEC_FILE_WRITE_DELAY);
          }

          // Append progress to logs
          const newLog = logsRef.current + event.content;
          logsRef.current = newLog;
          setLogs(newLog);
          console.log("[SpecView] Progress:", event.content.substring(0, 100));

          // Clear error message when we get new progress
          if (errorMessage) {
            setErrorMessage("");
          }
        } else if (event.type === "spec_regeneration_tool") {
          // Check if this is a feature creation tool
          const isFeatureTool =
            event.tool === "mcp__automaker-tools__UpdateFeatureStatus" ||
            event.tool === "UpdateFeatureStatus" ||
            event.tool?.includes("Feature");

          if (isFeatureTool) {
            // Ensure we're in feature generation phase
            if (currentPhase !== "feature_generation") {
              setCurrentPhase("feature_generation");
              setIsCreating(true);
              setIsRegenerating(true);
              console.log(
                "[SpecView] Detected feature creation tool - setting phase to feature_generation"
              );
            }
          }

          // Log tool usage with details
          const toolInput = event.input
            ? ` (${JSON.stringify(event.input).substring(0, 100)}...)`
            : "";
          const toolLog = `\n[Tool] ${event.tool}${toolInput}\n`;
          const newLog = logsRef.current + toolLog;
          logsRef.current = newLog;
          setLogs(newLog);
          console.log("[SpecView] Tool:", event.tool, event.input);
        } else if (event.type === "spec_regeneration_complete") {
          // Add completion message to logs first
          const completionLog =
            logsRef.current + `\n[Complete] ${event.message}\n`;
          logsRef.current = completionLog;
          setLogs(completionLog);

          // --- Completion Detection Logic ---
          // The backend sends explicit signals for completion:
          // 1. "All tasks completed" in the message
          // 2. [Phase: complete] marker in logs
          // 3. "Spec regeneration complete!" for regeneration
          // 4. "Initial spec creation complete!" for creation without features
          const isFinalCompletionMessage =
            event.message?.includes("All tasks completed") ||
            event.message === "All tasks completed!" ||
            event.message === "All tasks completed" ||
            event.message === "Spec regeneration complete!" ||
            event.message === "Initial spec creation complete!";

          const hasCompletePhase =
            logsRef.current.includes("[Phase: complete]");

          // Intermediate completion means features are being generated after spec creation
          const isIntermediateCompletion =
            event.message?.includes("Features are being generated") ||
            event.message?.includes("features are being generated");

          // Rely solely on explicit backend signals
          const shouldComplete =
            (isFinalCompletionMessage || hasCompletePhase) &&
            !isIntermediateCompletion;

          if (shouldComplete) {
            // Fully complete - clear all states immediately
            console.log(
              "[SpecView] Final completion detected - clearing state",
              {
                isFinalCompletionMessage,
                hasCompletePhase,
                message: event.message,
              }
            );
            setIsRegenerating(false);
            setIsCreating(false);
            setIsGeneratingFeatures(false);
            setCurrentPhase("");
            setShowRegenerateDialog(false);
            setShowCreateDialog(false);
            setProjectDefinition("");
            setProjectOverview("");
            setErrorMessage("");
            stateRestoredRef.current = false;

            // Reload the spec with delay to ensure file is written to disk
            setTimeout(() => {
              loadSpec();
            }, SPEC_FILE_WRITE_DELAY);

            // Show success toast notification
            const isRegeneration = event.message?.includes("regeneration");
            const isFeatureGeneration =
              event.message?.includes("Feature generation");
            toast.success(
              isFeatureGeneration
                ? "Feature Generation Complete"
                : isRegeneration
                ? "Spec Regeneration Complete"
                : "Spec Creation Complete",
              {
                description: isFeatureGeneration
                  ? "Features have been created from the app specification."
                  : "Your app specification has been saved.",
                icon: <CheckCircle2 className="w-4 h-4" />,
              }
            );
          } else if (isIntermediateCompletion) {
            // Intermediate completion - keep state active for feature generation
            setIsCreating(true);
            setIsRegenerating(true);
            setCurrentPhase("feature_generation");
            console.log(
              "[SpecView] Intermediate completion, continuing with feature generation"
            );
          }

          console.log("[SpecView] Spec generation event:", event.message);
        } else if (event.type === "spec_regeneration_error") {
          setIsRegenerating(false);
          setIsCreating(false);
          setIsGeneratingFeatures(false);
          setCurrentPhase("error");
          setErrorMessage(event.error);
          stateRestoredRef.current = false; // Reset restoration flag
          // Add error to logs
          const errorLog = logsRef.current + `\n\n[ERROR] ${event.error}\n`;
          logsRef.current = errorLog;
          setLogs(errorLog);
          console.error("[SpecView] Regeneration error:", event.error);
        }
      }
    );

    return () => {
      unsubscribe();
    };
  }, [currentProject?.path, loadSpec, errorMessage, currentPhase]);

  // Save spec to file
  const saveSpec = async () => {
    if (!currentProject) return;

    setIsSaving(true);
    try {
      const api = getElectronAPI();
      await api.writeFile(
        `${currentProject.path}/.automaker/app_spec.txt`,
        appSpec
      );
      setHasChanges(false);
    } catch (error) {
      console.error("Failed to save spec:", error);
    } finally {
      setIsSaving(false);
    }
  };

  const handleChange = (value: string) => {
    setAppSpec(value);
    setHasChanges(true);
  };

  const handleRegenerate = async () => {
    if (!currentProject || !projectDefinition.trim()) return;

    setIsRegenerating(true);
    setShowRegenerateDialog(false);
    setCurrentPhase("initialization");
    setErrorMessage("");
    // Reset logs when starting new regeneration
    logsRef.current = "";
    setLogs("");
    console.log(
      "[SpecView] Starting spec regeneration, generateFeatures:",
      generateFeaturesOnRegenerate
    );
    try {
      const api = getElectronAPI();
      if (!api.specRegeneration) {
        console.error("[SpecView] Spec regeneration not available");
        setIsRegenerating(false);
        return;
      }
      const result = await api.specRegeneration.generate(
        currentProject.path,
        projectDefinition.trim(),
        generateFeaturesOnRegenerate,
        analyzeProjectOnRegenerate
      );

      if (!result.success) {
        const errorMsg = result.error || "Unknown error";
        console.error("[SpecView] Failed to start regeneration:", errorMsg);
        setIsRegenerating(false);
        setCurrentPhase("error");
        setErrorMessage(errorMsg);
        const errorLog = `[Error] Failed to start regeneration: ${errorMsg}\n`;
        logsRef.current = errorLog;
        setLogs(errorLog);
      }
      // If successful, we'll wait for the events to update the state
    } catch (error) {
      const errorMsg = error instanceof Error ? error.message : String(error);
      console.error("[SpecView] Failed to regenerate spec:", errorMsg);
      setIsRegenerating(false);
      setCurrentPhase("error");
      setErrorMessage(errorMsg);
      const errorLog = `[Error] Failed to regenerate spec: ${errorMsg}\n`;
      logsRef.current = errorLog;
      setLogs(errorLog);
    }
  };

  const handleCreateSpec = async () => {
    if (!currentProject || !projectOverview.trim()) return;

    setIsCreating(true);
    setShowCreateDialog(false);
    setCurrentPhase("initialization");
    setErrorMessage("");
    // Reset logs when starting new generation
    logsRef.current = "";
    setLogs("");
    console.log(
      "[SpecView] Starting spec creation, generateFeatures:",
      generateFeatures
    );
    try {
      const api = getElectronAPI();
      if (!api.specRegeneration) {
        console.error("[SpecView] Spec regeneration not available");
        setIsCreating(false);
        return;
      }
      const result = await api.specRegeneration.create(
        currentProject.path,
        projectOverview.trim(),
        generateFeatures,
        analyzeProjectOnCreate
      );

      if (!result.success) {
        const errorMsg = result.error || "Unknown error";
        console.error("[SpecView] Failed to start spec creation:", errorMsg);
        setIsCreating(false);
        setCurrentPhase("error");
        setErrorMessage(errorMsg);
        const errorLog = `[Error] Failed to start spec creation: ${errorMsg}\n`;
        logsRef.current = errorLog;
        setLogs(errorLog);
      }
      // If successful, we'll wait for the events to update the state
    } catch (error) {
      const errorMsg = error instanceof Error ? error.message : String(error);
      console.error("[SpecView] Failed to create spec:", errorMsg);
      setIsCreating(false);
      setCurrentPhase("error");
      setErrorMessage(errorMsg);
      const errorLog = `[Error] Failed to create spec: ${errorMsg}\n`;
      logsRef.current = errorLog;
      setLogs(errorLog);
    }
  };

  const handleGenerateFeatures = async () => {
    if (!currentProject) return;

    setIsGeneratingFeatures(true);
    setShowRegenerateDialog(false);
    setCurrentPhase("initialization");
    setErrorMessage("");
    // Reset logs when starting feature generation
    logsRef.current = "";
    setLogs("");
    console.log("[SpecView] Starting feature generation from existing spec");
    try {
      const api = getElectronAPI();
      if (!api.specRegeneration) {
        console.error("[SpecView] Spec regeneration not available");
        setIsGeneratingFeatures(false);
        return;
      }
      const result = await api.specRegeneration.generateFeatures(
        currentProject.path
      );

      if (!result.success) {
        const errorMsg = result.error || "Unknown error";
        console.error(
          "[SpecView] Failed to start feature generation:",
          errorMsg
        );
        setIsGeneratingFeatures(false);
        setCurrentPhase("error");
        setErrorMessage(errorMsg);
        const errorLog = `[Error] Failed to start feature generation: ${errorMsg}\n`;
        logsRef.current = errorLog;
        setLogs(errorLog);
      }
      // If successful, we'll wait for the events to update the state
    } catch (error) {
      const errorMsg = error instanceof Error ? error.message : String(error);
      console.error("[SpecView] Failed to generate features:", errorMsg);
      setIsGeneratingFeatures(false);
      setCurrentPhase("error");
      setErrorMessage(errorMsg);
      const errorLog = `[Error] Failed to generate features: ${errorMsg}\n`;
      logsRef.current = errorLog;
      setLogs(errorLog);
    }
  };

  if (!currentProject) {
    return (
      <div
        className="flex-1 flex items-center justify-center"
        data-testid="spec-view-no-project"
      >
        <p className="text-muted-foreground">No project selected</p>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div
        className="flex-1 flex items-center justify-center"
        data-testid="spec-view-loading"
      >
        <RefreshCw className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  // Show empty state when no spec exists (isCreating is handled by bottom-right indicator in sidebar)
  if (!specExists) {
    return (
      <div
        className="flex-1 flex flex-col overflow-hidden content-bg"
        data-testid="spec-view-empty"
      >
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
          <div className="flex items-center gap-3">
            <FileText className="w-5 h-5 text-muted-foreground" />
            <div>
              <h1 className="text-xl font-bold">App Specification</h1>
              <p className="text-sm text-muted-foreground">
                {currentProject.path}/.automaker/app_spec.txt
              </p>
            </div>
          </div>
          {(isCreating || isRegenerating) && (
            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
              <div className="relative">
                <Loader2 className="w-5 h-5 animate-spin text-primary flex-shrink-0" />
                <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
              </div>
              <div className="flex flex-col gap-1 min-w-0">
                <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
                  {isCreating
                    ? "Generating Specification"
                    : "Regenerating Specification"}
                </span>
                {currentPhase && (
                  <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
                    {currentPhase === "initialization" && "Initializing..."}
                    {currentPhase === "setup" && "Setting up tools..."}
                    {currentPhase === "analysis" &&
                      "Analyzing project structure..."}
                    {currentPhase === "spec_complete" &&
                      "Spec created! Generating features..."}
                    {currentPhase === "feature_generation" &&
                      "Creating features from roadmap..."}
                    {currentPhase === "complete" && "Complete!"}
                    {currentPhase === "error" && "Error occurred"}
                    {![
                      "initialization",
                      "setup",
                      "analysis",
                      "spec_complete",
                      "feature_generation",
                      "complete",
                      "error",
                    ].includes(currentPhase) && currentPhase}
                  </span>
                )}
              </div>
            </div>
          )}
          {errorMessage && (
            <div className="flex items-center gap-2 text-destructive">
              <span className="text-sm font-medium">Error: {errorMessage}</span>
            </div>
          )}
        </div>

        {/* Empty State */}
        <div className="flex-1 flex items-center justify-center p-8">
          <div className="text-center max-w-md">
            <div className="mb-6 flex justify-center">
              <div className="p-4 rounded-full bg-primary/10">
                {isCreating ? (
                  <Loader2 className="w-12 h-12 text-primary animate-spin" />
                ) : (
                  <FilePlus2 className="w-12 h-12 text-primary" />
                )}
              </div>
            </div>
            <h2 className="text-2xl font-semibold mb-4">
              {isCreating ? (
                <>
                  <div className="mb-4">
                    <span>Generating App Specification</span>
                  </div>
                  {currentPhase && (
                    <div className="px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md inline-flex items-center justify-center">
                      <span className="text-sm font-semibold text-primary text-center tracking-tight">
                        {currentPhase === "initialization" && "Initializing..."}
                        {currentPhase === "setup" && "Setting up tools..."}
                        {currentPhase === "analysis" &&
                          "Analyzing project structure..."}
                        {currentPhase === "spec_complete" &&
                          "Spec created! Generating features..."}
                        {currentPhase === "feature_generation" &&
                          "Creating features from roadmap..."}
                        {currentPhase === "complete" && "Complete!"}
                        {currentPhase === "error" && "Error occurred"}
                        {![
                          "initialization",
                          "setup",
                          "analysis",
                          "spec_complete",
                          "feature_generation",
                          "complete",
                          "error",
                        ].includes(currentPhase) && currentPhase}
                      </span>
                    </div>
                  )}
                </>
              ) : (
                "No App Specification Found"
              )}
            </h2>
            <p className="text-muted-foreground mb-6">
              {isCreating
                ? currentPhase === "feature_generation"
                  ? "The app specification has been created! Now generating features from the implementation roadmap..."
                  : "We're analyzing your project and generating a comprehensive specification. This may take a few moments..."
                : "Create an app specification to help our system understand your project. We'll analyze your codebase and generate a comprehensive spec based on your description."}
            </p>
            {errorMessage && (
              <div className="mb-4 p-3 rounded-md bg-destructive/10 border border-destructive/20">
                <p className="text-sm text-destructive font-medium">Error:</p>
                <p className="text-sm text-destructive">{errorMessage}</p>
              </div>
            )}
            {!isCreating && (
              <div className="flex gap-2 justify-center">
                <Button size="lg" onClick={() => setShowCreateDialog(true)}>
                  <FilePlus2 className="w-5 h-5 mr-2" />
                  Create app_spec
                </Button>
              </div>
            )}
          </div>
        </div>

        {/* Create Dialog */}
        <Dialog
          open={showCreateDialog}
          onOpenChange={(open) => {
            if (!open && !isCreating) {
              setShowCreateDialog(false);
            }
          }}
        >
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>Create App Specification</DialogTitle>
              <DialogDescription className="text-muted-foreground">
                We didn&apos;t find an app_spec.txt file. Let us help you
                generate your app_spec.txt to help describe your project for our
                system. We&apos;ll analyze your project&apos;s tech stack and
                create a comprehensive specification.
              </DialogDescription>
            </DialogHeader>

            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <label className="text-sm font-medium">Project Overview</label>
                <p className="text-xs text-muted-foreground">
                  Describe what your project does and what features you want to
                  build. Be as detailed as you want - this will help us create a
                  better specification.
                </p>
                <textarea
                  className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
                  value={projectOverview}
                  onChange={(e) => setProjectOverview(e.target.value)}
                  placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
                  autoFocus
                  disabled={isCreating}
                />
              </div>

              <div className="flex items-start space-x-3 pt-2">
                <Checkbox
                  id="analyze-project-create"
                  checked={analyzeProjectOnCreate}
                  onCheckedChange={(checked) =>
                    setAnalyzeProjectOnCreate(checked === true)
                  }
                  disabled={isCreating}
                />
                <div className="space-y-1">
                  <label
                    htmlFor="analyze-project-create"
                    className={`text-sm font-medium ${
                      isCreating ? "" : "cursor-pointer"
                    }`}
                  >
                    Analyze current project for additional context
                  </label>
                  <p className="text-xs text-muted-foreground">
                    If checked, the agent will research your existing codebase
                    to understand the tech stack. If unchecked, defaults to
                    TanStack Start, Drizzle ORM, PostgreSQL, shadcn/ui, Tailwind
                    CSS, and React.
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3 pt-2">
                <Checkbox
                  id="generate-features"
                  checked={generateFeatures}
                  onCheckedChange={(checked) =>
                    setGenerateFeatures(checked === true)
                  }
                  disabled={isCreating}
                />
                <div className="space-y-1">
                  <label
                    htmlFor="generate-features"
                    className={`text-sm font-medium ${
                      isCreating ? "" : "cursor-pointer"
                    }`}
                  >
                    Generate feature list
                  </label>
                  <p className="text-xs text-muted-foreground">
                    Automatically create features in the features folder from
                    the implementation roadmap after the spec is generated.
                  </p>
                </div>
              </div>
            </div>

            <DialogFooter>
              <Button
                variant="ghost"
                onClick={() => setShowCreateDialog(false)}
                disabled={isCreating}
              >
                Cancel
              </Button>
              <HotkeyButton
                onClick={handleCreateSpec}
                disabled={!projectOverview.trim() || isCreating}
                hotkey={{ key: "Enter", cmdCtrl: true }}
                hotkeyActive={showCreateDialog && !isCreating}
              >
                {isCreating ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Generating...
                  </>
                ) : (
                  <>
                    <Sparkles className="w-4 h-4 mr-2" />
                    Generate Spec
                  </>
                )}
              </HotkeyButton>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    );
  }

  return (
    <div
      className="flex-1 flex flex-col overflow-hidden content-bg"
      data-testid="spec-view"
    >
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
        <div className="flex items-center gap-3">
          <FileText className="w-5 h-5 text-muted-foreground" />
          <div>
            <h1 className="text-xl font-bold">App Specification</h1>
            <p className="text-sm text-muted-foreground">
              {currentProject.path}/.automaker/app_spec.txt
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3">
          {(isRegenerating || isCreating || isGeneratingFeatures) && (
            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
              <div className="relative">
                <Loader2 className="w-5 h-5 animate-spin text-primary flex-shrink-0" />
                <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
              </div>
              <div className="flex flex-col gap-1 min-w-0">
                <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
                  {isGeneratingFeatures
                    ? "Generating Features"
                    : isCreating
                    ? "Generating Specification"
                    : "Regenerating Specification"}
                </span>
                {currentPhase && (
                  <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
                    {currentPhase === "initialization" && "Initializing..."}
                    {currentPhase === "setup" && "Setting up tools..."}
                    {currentPhase === "analysis" &&
                      "Analyzing project structure..."}
                    {currentPhase === "spec_complete" &&
                      "Spec created! Generating features..."}
                    {currentPhase === "feature_generation" &&
                      "Creating features from roadmap..."}
                    {currentPhase === "complete" && "Complete!"}
                    {currentPhase === "error" && "Error occurred"}
                    {![
                      "initialization",
                      "setup",
                      "analysis",
                      "spec_complete",
                      "feature_generation",
                      "complete",
                      "error",
                    ].includes(currentPhase) && currentPhase}
                  </span>
                )}
              </div>
            </div>
          )}
          {errorMessage && (
            <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-gradient-to-r from-destructive/15 to-destructive/5 border border-destructive/30 shadow-lg backdrop-blur-md">
              <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0" />
              <div className="flex flex-col gap-1 min-w-0">
                <span className="text-sm font-semibold text-destructive leading-tight tracking-tight">
                  Error
                </span>
                <span className="text-xs text-destructive/90 leading-tight font-medium">
                  {errorMessage}
                </span>
              </div>
            </div>
          )}
          <div className="flex gap-2">
            <Button
              size="sm"
              variant="outline"
              onClick={() => setShowRegenerateDialog(true)}
              disabled={isRegenerating || isCreating || isGeneratingFeatures}
              data-testid="regenerate-spec"
            >
              {isRegenerating ? (
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              ) : (
                <Sparkles className="w-4 h-4 mr-2" />
              )}
              {isRegenerating ? "Regenerating..." : "Regenerate"}
            </Button>
            <Button
              size="sm"
              onClick={saveSpec}
              disabled={
                !hasChanges ||
                isSaving ||
                isCreating ||
                isRegenerating ||
                isGeneratingFeatures
              }
              data-testid="save-spec"
            >
              <Save className="w-4 h-4 mr-2" />
              {isSaving ? "Saving..." : hasChanges ? "Save Changes" : "Saved"}
            </Button>
          </div>
        </div>
      </div>

      {/* Editor */}
      <div className="flex-1 p-4 overflow-hidden">
        <Card className="h-full">
          <XmlSyntaxEditor
            value={appSpec}
            onChange={handleChange}
            placeholder="Write your app specification here..."
            data-testid="spec-editor"
          />
        </Card>
      </div>

      {/* Regenerate Dialog */}
      <Dialog
        open={showRegenerateDialog}
        onOpenChange={(open) => {
          if (!open && !isRegenerating) {
            setShowRegenerateDialog(false);
          }
        }}
      >
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Regenerate App Specification</DialogTitle>
            <DialogDescription className="text-muted-foreground">
              We will regenerate your app spec based on a short project
              definition and the current tech stack found in your project. The
              agent will analyze your codebase to understand your existing
              technologies and create a comprehensive specification.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">
                Describe your project
              </label>
              <p className="text-xs text-muted-foreground">
                Provide a clear description of what your app should do. Be as
                detailed as you want - the more context you provide, the more
                comprehensive the spec will be.
              </p>
              <textarea
                className="w-full h-40 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
                value={projectDefinition}
                onChange={(e) => setProjectDefinition(e.target.value)}
                placeholder="e.g., A task management app where users can create projects, add tasks with due dates, assign tasks to team members, track progress with a kanban board, and receive notifications for upcoming deadlines..."
                disabled={isRegenerating}
              />
            </div>

            <div className="flex items-start space-x-3 pt-2">
              <Checkbox
                id="analyze-project-regenerate"
                checked={analyzeProjectOnRegenerate}
                onCheckedChange={(checked) =>
                  setAnalyzeProjectOnRegenerate(checked === true)
                }
                disabled={isRegenerating}
              />
              <div className="space-y-1">
                <label
                  htmlFor="analyze-project-regenerate"
                  className={`text-sm font-medium ${
                    isRegenerating ? "" : "cursor-pointer"
                  }`}
                >
                  Analyze current project for additional context
                </label>
                <p className="text-xs text-muted-foreground">
                  If checked, the agent will research your existing codebase to
                  understand the tech stack. If unchecked, defaults to TanStack
                  Start, Drizzle ORM, PostgreSQL, shadcn/ui, Tailwind CSS, and
                  React.
                </p>
              </div>
            </div>

            <div className="flex items-start space-x-3 pt-2">
              <Checkbox
                id="generate-features-regenerate"
                checked={generateFeaturesOnRegenerate}
                onCheckedChange={(checked) =>
                  setGenerateFeaturesOnRegenerate(checked === true)
                }
                disabled={isRegenerating}
              />
              <div className="space-y-1">
                <label
                  htmlFor="generate-features-regenerate"
                  className={`text-sm font-medium ${
                    isRegenerating ? "" : "cursor-pointer"
                  }`}
                >
                  Generate feature list
                </label>
                <p className="text-xs text-muted-foreground">
                  Automatically create features in the features folder from the
                  implementation roadmap after the spec is regenerated.
                </p>
              </div>
            </div>
          </div>

          <DialogFooter>
            <div className="flex gap-2">
              <Button
                variant="ghost"
                onClick={() => setShowRegenerateDialog(false)}
                disabled={isRegenerating || isGeneratingFeatures}
              >
                Cancel
              </Button>
              <HotkeyButton
                onClick={handleRegenerate}
                disabled={
                  !projectDefinition.trim() ||
                  isRegenerating ||
                  isGeneratingFeatures
                }
                hotkey={{ key: "Enter", cmdCtrl: true }}
                hotkeyActive={
                  showRegenerateDialog &&
                  !isRegenerating &&
                  !isGeneratingFeatures
                }
              >
                {isRegenerating ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Regenerating...
                  </>
                ) : (
                  <>
                    <Sparkles className="w-4 h-4 mr-2" />
                    Regenerate Spec
                  </>
                )}
              </HotkeyButton>
            </div>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}