"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { useSetupStore } from "@/store/setup-store";
import { useAppStore } from "@/store/app-store";
import { getElectronAPI } from "@/lib/electron";
import {
  CheckCircle2,
  Loader2,
  Terminal,
  Key,
  ArrowRight,
  ArrowLeft,
  ExternalLink,
  Copy,
  AlertCircle,
  RefreshCw,
  Download,
} from "lucide-react";
import { toast } from "sonner";
import { StatusBadge, TerminalOutput } from "../components";
import {
  useCliStatus,
  useCliInstallation,
  useTokenSave,
} from "../hooks";

interface CodexSetupStepProps {
  onNext: () => void;
  onBack: () => void;
  onSkip: () => void;
}

export function CodexSetupStep({
  onNext,
  onBack,
  onSkip,
}: CodexSetupStepProps) {
  const {
    codexCliStatus,
    codexAuthStatus,
    setCodexCliStatus,
    setCodexAuthStatus,
    setCodexInstallProgress,
  } = useSetupStore();
  const { setApiKeys, apiKeys } = useAppStore();

  const [showApiKeyInput, setShowApiKeyInput] = useState(false);
  const [apiKey, setApiKey] = useState("");

  // Use custom hooks
  const { isChecking, checkStatus } = useCliStatus({
    cliType: "codex",
    statusApi: () =>
      getElectronAPI().setup?.getCodexStatus() || Promise.reject(),
    setCliStatus: setCodexCliStatus,
    setAuthStatus: setCodexAuthStatus,
  });

  const { isInstalling, installProgress, install } = useCliInstallation({
    cliType: "codex",
    installApi: () =>
      getElectronAPI().setup?.installCodex() || Promise.reject(),
    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
    onSuccess: checkStatus,
  });

  const { isSaving: isSavingKey, saveToken: saveApiKeyToken } = useTokenSave({
    provider: "openai",
    onSuccess: () => {
      setCodexAuthStatus({
        authenticated: true,
        method: "api_key",
        apiKeyValid: true,
      });
      setApiKeys({ ...apiKeys, openai: apiKey });
      setShowApiKeyInput(false);
      checkStatus();
    },
  });

  // Sync install progress to store
  useEffect(() => {
    setCodexInstallProgress({
      isInstalling,
      output: installProgress.output,
    });
  }, [isInstalling, installProgress, setCodexInstallProgress]);

  // Check status on mount
  useEffect(() => {
    checkStatus();
  }, [checkStatus]);

  const copyCommand = (command: string) => {
    navigator.clipboard.writeText(command);
    toast.success("Command copied to clipboard");
  };

  const isAuthenticated = codexAuthStatus?.authenticated || apiKeys.openai;

  const getAuthMethodLabel = () => {
    if (!isAuthenticated) return null;
    if (apiKeys.openai) return "API Key (Manual)";
    if (codexAuthStatus?.method === "api_key") return "API Key (Auth File)";
    if (codexAuthStatus?.method === "env") return "API Key (Environment)";
    if (codexAuthStatus?.method === "cli_verified")
      return "CLI Login (ChatGPT)";
    return "Authenticated";
  };

  return (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <div className="w-16 h-16 rounded-xl bg-green-500/10 flex items-center justify-center mx-auto mb-4">
          <Terminal className="w-8 h-8 text-green-500" />
        </div>
        <h2 className="text-2xl font-bold text-foreground mb-2">
          Codex CLI Setup
        </h2>
        <p className="text-muted-foreground">
          OpenAI&apos;s GPT-5.1 Codex for advanced code generation
        </p>
      </div>

      {/* Status Card */}
      <Card className="bg-card border-border">
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg">Installation Status</CardTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={checkStatus}
              disabled={isChecking}
            >
              <RefreshCw
                className={`w-4 h-4 ${isChecking ? "animate-spin" : ""}`}
              />
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-sm text-foreground">CLI Installation</span>
            {isChecking ? (
              <StatusBadge status="checking" label="Checking..." />
            ) : codexCliStatus?.installed ? (
              <StatusBadge status="installed" label="Installed" />
            ) : (
              <StatusBadge status="not_installed" label="Not Installed" />
            )}
          </div>

          {codexCliStatus?.version && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">Version</span>
              <span className="text-sm font-mono text-foreground">
                {codexCliStatus.version}
              </span>
            </div>
          )}

          <div className="flex items-center justify-between">
            <span className="text-sm text-foreground">Authentication</span>
            {isAuthenticated ? (
              <div className="flex items-center gap-2">
                <StatusBadge status="authenticated" label="Authenticated" />
                {getAuthMethodLabel() && (
                  <span className="text-xs text-muted-foreground">
                    ({getAuthMethodLabel()})
                  </span>
                )}
              </div>
            ) : (
              <StatusBadge
                status="not_authenticated"
                label="Not Authenticated"
              />
            )}
          </div>
        </CardContent>
      </Card>

      {/* Installation Section */}
      {!codexCliStatus?.installed && (
        <Card className="bg-card border-border">
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <Download className="w-5 h-5" />
              Install Codex CLI
            </CardTitle>
            <CardDescription>
              Install via npm (Node.js required)
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label className="text-sm text-muted-foreground">
                npm (Global installation)
              </Label>
              <div className="flex items-center gap-2">
                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
                  npm install -g @openai/codex
                </code>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => copyCommand("npm install -g @openai/codex")}
                >
                  <Copy className="w-4 h-4" />
                </Button>
              </div>
            </div>

            {isInstalling && (
              <TerminalOutput lines={installProgress.output} />
            )}

            <div className="flex gap-2">
              <Button
                onClick={install}
                disabled={isInstalling}
                className="flex-1 bg-green-500 hover:bg-green-600 text-white"
                data-testid="install-codex-button"
              >
                {isInstalling ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Installing...
                  </>
                ) : (
                  <>
                    <Download className="w-4 h-4 mr-2" />
                    Auto Install
                  </>
                )}
              </Button>
            </div>

            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
              <div className="flex items-start gap-2">
                <AlertCircle className="w-4 h-4 text-yellow-500 mt-0.5" />
                <p className="text-xs text-yellow-600 dark:text-yellow-400">
                  Requires Node.js to be installed. If the auto-install fails,
                  try running the command manually in your terminal.
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Authentication Section */}
      {!isAuthenticated && (
        <Card className="bg-card border-border">
          <CardHeader>
            <CardTitle className="text-lg flex items-center gap-2">
              <Key className="w-5 h-5" />
              Authentication
            </CardTitle>
            <CardDescription>Codex requires an OpenAI API key</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {codexCliStatus?.installed && (
              <div className="p-4 rounded-lg bg-muted/50 border border-border">
                <div className="flex items-start gap-3">
                  <Terminal className="w-5 h-5 text-green-500 mt-0.5" />
                  <div>
                    <p className="font-medium text-foreground">
                      Authenticate via CLI
                    </p>
                    <p className="text-sm text-muted-foreground mb-2">
                      Run this command in your terminal:
                    </p>
                    <div className="flex items-center gap-2">
                      <code className="bg-muted px-3 py-1 rounded text-sm font-mono text-foreground">
                        codex auth login
                      </code>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={() => copyCommand("codex auth login")}
                      >
                        <Copy className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            )}

            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <span className="w-full border-t border-border" />
              </div>
              <div className="relative flex justify-center text-xs uppercase">
                <span className="bg-card px-2 text-muted-foreground">
                  or enter API key
                </span>
              </div>
            </div>

            {showApiKeyInput ? (
              <div className="space-y-3">
                <div className="space-y-2">
                  <Label htmlFor="openai-key" className="text-foreground">
                    OpenAI API Key
                  </Label>
                  <Input
                    id="openai-key"
                    type="password"
                    placeholder="sk-..."
                    value={apiKey}
                    onChange={(e) => setApiKey(e.target.value)}
                    className="bg-input border-border text-foreground"
                    data-testid="openai-api-key-input"
                  />
                  <p className="text-xs text-muted-foreground">
                    Get your API key from{" "}
                    <a
                      href="https://platform.openai.com/api-keys"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-green-500 hover:underline"
                    >
                      platform.openai.com
                      <ExternalLink className="w-3 h-3 inline ml-1" />
                    </a>
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    onClick={() => setShowApiKeyInput(false)}
                    className="border-border"
                  >
                    Cancel
                  </Button>
                  <Button
                    onClick={() => saveApiKeyToken(apiKey)}
                    disabled={isSavingKey || !apiKey.trim()}
                    className="flex-1 bg-green-500 hover:bg-green-600 text-white"
                    data-testid="save-openai-key-button"
                  >
                    {isSavingKey ? (
                      <Loader2 className="w-4 h-4 animate-spin" />
                    ) : (
                      "Save API Key"
                    )}
                  </Button>
                </div>
              </div>
            ) : (
              <Button
                variant="outline"
                onClick={() => setShowApiKeyInput(true)}
                className="w-full border-border"
                data-testid="use-openai-key-button"
              >
                <Key className="w-4 h-4 mr-2" />
                Enter OpenAI API Key
              </Button>
            )}
          </CardContent>
        </Card>
      )}

      {/* Success State */}
      {isAuthenticated && (
        <Card className="bg-green-500/5 border-green-500/20">
          <CardContent className="py-6">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-green-500/10 flex items-center justify-center">
                <CheckCircle2 className="w-6 h-6 text-green-500" />
              </div>
              <div>
                <p className="font-medium text-foreground">
                  Codex is ready to use!
                </p>
                <p className="text-sm text-muted-foreground">
                  {getAuthMethodLabel() &&
                    `Authenticated via ${getAuthMethodLabel()}. `}
                  You can proceed to complete setup
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Navigation */}
      <div className="flex justify-between pt-4">
        <Button
          variant="ghost"
          onClick={onBack}
          className="text-muted-foreground"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          Back
        </Button>
        <div className="flex gap-2">
          <Button
            variant="ghost"
            onClick={onSkip}
            className="text-muted-foreground"
          >
            Skip for now
          </Button>
          <Button
            onClick={onNext}
            className="bg-green-500 hover:bg-green-600 text-white"
            data-testid="codex-next-button"
          >
            Continue
            <ArrowRight className="w-4 h-4 ml-2" />
          </Button>
        </div>
      </div>
    </div>
  );
}