"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import useStore from "@/lib/store";
import modelAdapter from "@/lib/services/adapter-instance";
import { FileText, Copy, Loader2, CheckCircle2, ChevronDown, ChevronUp, Settings } from "lucide-react";
import { cn } from "@/lib/utils";
import { translations } from "@/lib/i18n/translations";

export default function PRDGenerator() {
  const {
    currentPrompt,
    prd,
    selectedProvider,
    selectedModels,
    availableModels,
    apiKeys,
    isProcessing,
    error,
    language,
    setCurrentPrompt,
    setSelectedProvider,
    setPRD,
    setProcessing,
    setError,
    setAvailableModels,
    setSelectedModel,
  } = useStore();

  const t = translations[language].prdGenerator;
  const common = translations[language].common;

  const [copied, setCopied] = useState(false);
  const [expandedSections, setExpandedSections] = useState<string[]>([]);

  const selectedModel = selectedModels[selectedProvider];
  const models = availableModels[selectedProvider] || modelAdapter.getAvailableModels(selectedProvider);

  const toggleSection = (section: string) => {
    setExpandedSections((prev) =>
      prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section]
    );
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      loadAvailableModels();
      const saved = localStorage.getItem("promptarch-api-keys");
      if (saved) {
        try {
          const keys = JSON.parse(saved);
          if (keys.qwen) modelAdapter.updateQwenApiKey(keys.qwen);
          if (keys.ollama) modelAdapter.updateOllamaApiKey(keys.ollama);
          if (keys.zai) modelAdapter.updateZaiApiKey(keys.zai);
        } catch (e) {
          console.error("Failed to load API keys:", e);
        }
      }
    }
  }, [selectedProvider]);

  const loadAvailableModels = async () => {
    const fallbackModels = modelAdapter.getAvailableModels(selectedProvider);
    setAvailableModels(selectedProvider, fallbackModels);

    try {
      const result = await modelAdapter.listModels(selectedProvider);
      if (result.success && result.data) {
        setAvailableModels(selectedProvider, result.data[selectedProvider] || fallbackModels);
      }
    } catch (error) {
      console.error("Failed to load models:", error);
    }
  };

  const handleGenerate = async () => {
    if (!currentPrompt.trim()) {
      setError("Please enter an idea to generate PRD");
      return;
    }

    const apiKey = apiKeys[selectedProvider];
    const isQwenOAuth = selectedProvider === "qwen" && modelAdapter.hasQwenAuth();

    if (!isQwenOAuth && (!apiKey || !apiKey.trim())) {
      setError(`Please configure your ${selectedProvider.toUpperCase()} API key in Settings`);
      return;
    }

    setProcessing(true);
    setError(null);

    console.log("[PRDGenerator] Starting PRD generation...", { selectedProvider, selectedModel, hasQwenAuth: modelAdapter.hasQwenAuth() });

    try {
      const result = await modelAdapter.generatePRD(currentPrompt, selectedProvider, selectedModel);

      console.log("[PRDGenerator] Generation result:", result);

      if (result.success && result.data) {
        const newPRD = {
          id: Math.random().toString(36).substr(2, 9),
          title: currentPrompt.slice(0, 50) + "...",
          overview: result.data,
          objectives: [],
          userPersonas: [],
          functionalRequirements: [],
          nonFunctionalRequirements: [],
          technicalArchitecture: "",
          successMetrics: [],
          createdAt: new Date(),
          updatedAt: new Date(),
        };
        setPRD(newPRD);
      } else {
        console.error("[PRDGenerator] Generation failed:", result.error);
        setError(result.error || "Failed to generate PRD");
      }
    } catch (err) {
      console.error("[PRDGenerator] Generation error:", err);
      setError(err instanceof Error ? err.message : "An error occurred");
    } finally {
      setProcessing(false);
    }
  };

  const handleCopy = async () => {
    if (prd?.overview) {
      await navigator.clipboard.writeText(prd.overview);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  const sections = [
    { id: "overview", title: language === "ru" ? "Обзор продукта" : language === "he" ? "סקירת מוצר" : "Product Overview" },
    { id: "personas", title: language === "ru" ? "Персоны пользователей" : language === "he" ? "פרסונות משתמשים" : "User Personas & Use Cases" },
    { id: "functional", title: language === "ru" ? "Функциональные требования" : language === "he" ? "דרישות פונקציונליות" : "Functional Requirements" },
    { id: "nonfunctional", title: language === "ru" ? "Нефункциональные требования" : language === "he" ? "דרישות לא פונקציונליות" : "Non-functional Requirements" },
    { id: "architecture", title: language === "ru" ? "Техническая архитектура" : language === "he" ? "ארכיטקטורה טכנית" : "Technical Architecture" },
    { id: "metrics", title: language === "ru" ? "Успешность метрик" : language === "he" ? "מדדי הצלחה" : "Success Metrics" },
  ];

  return (
    <div className="mx-auto grid max-w-7xl gap-4 lg:gap-6 grid-cols-1 lg:grid-cols-2 text-start">
      <Card className="h-fit">
        <CardHeader className="p-4 lg:p-6 text-start">
          <CardTitle className="flex items-center gap-2 text-base lg:text-lg">
            <FileText className="h-4 w-4 lg:h-5 lg:w-5" />
            {t.title}
          </CardTitle>
          <CardDescription className="text-xs lg:text-sm">
            {t.description}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3 lg:space-y-4 p-4 lg:p-6 pt-0 lg:pt-0">
          <div className="space-y-2 text-start">
            <label className="text-xs lg:text-sm font-medium">{common.aiProvider}</label>
            <div className="flex flex-wrap gap-1.5 lg:gap-2">
              {(["qwen", "ollama", "zai"] as const).map((provider) => (
                <Button
                  key={provider}
                  variant={selectedProvider === provider ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedProvider(provider)}
                  className="capitalize text-xs lg:text-sm h-8 lg:h-9 px-2.5 lg:px-3"
                >
                  {provider === "qwen" ? "Qwen" : provider === "ollama" ? "Ollama" : "Z.AI"}
                </Button>
              ))}
            </div>
          </div>

          <div className="space-y-2 text-start">
            <label className="text-xs lg:text-sm font-medium">{common.model}</label>
            <select
              value={selectedModel}
              onChange={(e) => setSelectedModel(selectedProvider, e.target.value)}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs lg:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {models.map((model) => (
                <option key={model} value={model}>
                  {model}
                </option>
              ))}
            </select>
          </div>

          <div className="space-y-2">
            <Textarea
              placeholder={t.placeholder}
              value={currentPrompt}
              onChange={(e) => setCurrentPrompt(e.target.value)}
              className="min-h-[150px] lg:min-h-[200px] resize-y text-sm lg:text-base p-3 lg:p-4"
            />
          </div>

          {error && (
            <div className="rounded-md bg-destructive/10 p-2.5 lg:p-3 text-xs lg:text-sm text-destructive">
              {error}
              {!apiKeys[selectedProvider] && (
                <div className="mt-1.5 lg:mt-2 flex items-center gap-2">
                  <Settings className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
                  <span className="text-[10px] lg:text-xs">{common.configApiKey}</span>
                </div>
              )}
            </div>
          )}

          <Button onClick={handleGenerate} disabled={isProcessing || !currentPrompt.trim()} className="w-full h-9 lg:h-10 text-xs lg:text-sm">
            {isProcessing ? (
              <>
                <Loader2 className="mr-1.5 lg:mr-2 h-3.5 w-3.5 lg:h-4 lg:w-4 animate-spin" />
                {common.generating}
              </>
            ) : (
              <>
                <FileText className="mr-1.5 lg:mr-2 h-3.5 w-3.5 lg:h-4 lg:w-4" />
                {common.generate}
              </>
            )}
          </Button>
        </CardContent>
      </Card>

      <Card className={cn(!prd && "opacity-50")}>
        <CardHeader className="p-4 lg:p-6 text-start">
          <CardTitle className="flex items-center justify-between text-base lg:text-lg">
            <span className="flex items-center gap-2">
              <CheckCircle2 className="h-4 w-4 lg:h-5 lg:w-5 text-green-500" />
              {t.generatedTitle}
            </span>
            {prd && (
              <Button variant="ghost" size="icon" onClick={handleCopy} className="h-8 w-8 lg:h-9 lg:w-9">
                {copied ? (
                  <CheckCircle2 className="h-3.5 w-3.5 lg:h-4 lg:w-4 text-green-500" />
                ) : (
                  <Copy className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
                )}
              </Button>
            )}
          </CardTitle>
          <CardDescription className="text-xs lg:text-sm">
            {language === "ru" ? "Структурированный документ требований готов к разработке" : language === "he" ? "מסמך דרישות מובנה מוכן לפיתוח" : "Structured requirements document ready for development"}
          </CardDescription>
        </CardHeader>
        <CardContent className="p-4 lg:p-6 pt-0 lg:pt-0">
          {prd ? (
            <div className="space-y-2 lg:space-y-3">
              {sections.map((section) => (
                <div key={section.id} className="rounded-md border bg-muted/30">
                  <button
                    onClick={() => toggleSection(section.id)}
                    className="flex w-full items-center justify-between px-3 lg:px-4 py-2.5 lg:py-3 text-left font-medium transition-colors hover:bg-muted/50 text-xs lg:text-sm"
                  >
                    <span>{section.title}</span>
                    {expandedSections.includes(section.id) ? (
                      <ChevronUp className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
                    ) : (
                      <ChevronDown className="h-3.5 w-3.5 lg:h-4 lg:w-4" />
                    )}
                  </button>
                  {expandedSections.includes(section.id) && (
                    <div className="border-t bg-background px-3 lg:px-4 py-2.5 lg:py-3">
                      <pre className="whitespace-pre-wrap text-xs lg:text-sm">{prd.overview}</pre>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className="flex h-[200px] lg:h-[300px] items-center justify-center text-center text-xs lg:text-sm text-muted-foreground">
              {language === "ru" ? "Здесь появится созданный PRD" : language === "he" ? "PRD שחולל יופיע כאן" : "Generated PRD will appear here"}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
