"use client"
import { useEffect, useState } from "react"
import { FileText, Sparkles, HeartPulse, Users, Command, MessageSquare, SaveIcon, RefreshCw, Eye } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { DefaultValues } from "./data/defaults"
import { PANEL_SETTING } from "@/config/panelSetting"
import PromptSection from "./components/PromptSection"
import CommandsSection from "./components/CommandsSection"
import CompanyWidget from "./components/CompanyWidget"
import { usePromptManager } from './hooks/usePromptManager'
import { Company, CommandType, PopularityCategory } from './types'
import { fetchLiterals } from './utils/api'
import { CompanyDialog } from './components/CompanyDialog'
import { CommandDialog } from './components/CommandDialog'
import { ExportDialog } from './components/ExportDialog'
import { Header } from "./components/Header"

const popularityCategories: PopularityCategory[] = ["محبوب ترین", "محبوب", "معمولی", "کم محبوب"];
const popularityColors: Record<PopularityCategory, string> = {
  "محبوب ترین": "bg-green-500",
  "محبوب": "bg-blue-500",
  "معمولی": "bg-yellow-500",
  "کم محبوب": "bg-red-500"
};

export default function BasePrompts() {
  const {
    isSaving,
    isLoading,
    setIsLoading,
    exportedPrompt,
    setExportedPrompt,
    generateExportedPrompt,
    saveLiterals
  } = usePromptManager();

  // Initialize with empty values instead of DefaultValues
  const [companies, setCompanies] = useState<Company[]>([]);
  const [commands, setCommands] = useState<CommandType[]>([]);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
  const [isCommandDialogOpen, setIsCommandDialogOpen] = useState(false);
  const [currentCompany, setCurrentCompany] = useState<Company>({ id: null, name: "", description: "", popularity: "معمولی" });
  const [currentCommand, setCurrentCommand] = useState<CommandType>({ id: 0, command: "", value: "", prompt: "" });
  const [prompts, setPrompts] = useState({
    skill: "",
    enthusiasm: "",
    customer: "",
    companyRanking: ""
  });
  const [welcomeText, setWelcomeText] = useState("");
  const [introText, setIntroText] = useState("");
  const [strategiesText, setStrategiesText] = useState("");
  const [rulesText, setRulesText] = useState("");
  const [templateText, setTemplateText] = useState("");
  const [activeTab, setActiveTab] = useState<'intro' | 'strategies' | 'rules' | 'template'>('intro');
  const [aiModel, setAiModel] = useState("");

  const isDante = process.env.NEXT_PUBLIC_MODE === "dante";
  const loadDefaultValues = () => {
    setCompanies(DefaultValues.companies as Company[]);
    setCommands(DefaultValues.commands);
    setPrompts(DefaultValues.initialPromptTexts);
    setWelcomeText(DefaultValues.welcomeText);
    setIntroText(DefaultValues.introText);
    setStrategiesText(DefaultValues.strategiesText);
    setRulesText(DefaultValues.rulesText);
    setTemplateText(DefaultValues.templateText);
  };

  const resetPrompt = (key: keyof typeof DefaultValues.initialPromptTexts) =>
    setPrompts({ ...prompts, [key]: DefaultValues.initialPromptTexts[key] });

  const handleCompanySubmit = () => {
    if (!currentCompany.name.trim()) return;

    if (currentCompany.id !== null) {
      setCompanies(companies.map(c => c.id === currentCompany.id ? currentCompany : c));
    } else {
      setCompanies([...companies, { ...currentCompany, id: Date.now() }]);
    }

    setIsDialogOpen(false);
    setCurrentCompany({ id: null, name: "", description: "", popularity: "معمولی" });
  };

  const handleCommandSubmit = () => {
    if (currentCommand.command && currentCommand.value) {
      if (currentCommand.id) {
        setCommands(commands.map(cmd =>
          cmd.id === currentCommand.id ? { ...currentCommand } : cmd
        ));
      } else {
        // Add new command
        setCommands([...commands, { ...currentCommand, id: Date.now() }]);
      }
      setIsCommandDialogOpen(false);
      setCurrentCommand({ id: 0, command: "", value: "", prompt: "" });
    }
  };

  const deleteCommand = (id: number) => {
    setCommands(commands.filter(cmd => cmd.id !== id));
  };

  const editCommand = (command: CommandType) => {
    setCurrentCommand({ ...command });
    setIsCommandDialogOpen(true);
  };

  useEffect(() => {
    const loadData = async () => {
      try {
        setIsLoading(true);
        const data = await fetchLiterals();
        if (data.success && data.literal) {
          // Set all states from the fetched data
          if (data.literal.finalPrompt) {
            setExportedPrompt(data.literal.finalPrompt);
          }

          if (data.literal.commands) {
            setCommands(data.literal.commands);
          }

          if (data.literal.companies) {
            setCompanies(data.literal.companies);
          }

          // Set all individual text fields
          if (data.literal.introText) setIntroText(data.literal.introText);
          if (data.literal.strategiesText) setStrategiesText(data.literal.strategiesText);
          if (data.literal.rulesText) setRulesText(data.literal.rulesText);
          if (data.literal.templateText) setTemplateText(data.literal.templateText);
          if (data.literal.welcomeText) setWelcomeText(data.literal.welcomeText);
          if (data.literal.aiModel) setAiModel(data.literal.aiModel);

          // Set prompt fields
          const updatedPrompts = { ...prompts };
          if (data.literal.skillPrompt) updatedPrompts.skill = data.literal.skillPrompt;
          if (data.literal.enthusiasmPrompt) updatedPrompts.enthusiasm = data.literal.enthusiasmPrompt;
          if (data.literal.customerPrompt) updatedPrompts.customer = data.literal.customerPrompt;
          if (data.literal.companyRankingPrompt) updatedPrompts.companyRanking = data.literal.companyRankingPrompt;
          setPrompts(updatedPrompts);
        } else {
          // If no data is returned, keep fields empty instead of loading defaults
          console.log('No data found in database');
        }
      } catch (error) {
        console.error('Error fetching literals:', error);
      } finally {
        setIsLoading(false);
      }
    };
    loadData();
  }, []);

  const tabs = [
    { id: 'intro', label: 'مقدمه' },
    { id: 'strategies', label: 'استراتژی‌ها' },
    { id: 'rules', label: 'قوانین' },
    { id: 'template', label: 'قالب پاسخ' }
  ];

  const tabContent = {
    intro: {
      label: 'مقدمه دستیار',
      value: introText,
      onChange: setIntroText,
      rows: 3
    },
    strategies: {
      label: 'استراتژی گفتگو',
      value: strategiesText,
      onChange: setStrategiesText,
      rows: 8
    },
    rules: {
      label: 'قوانین گفتگو',
      value: rulesText,
      onChange: setRulesText,
      rows: 10
    },
    template: {
      label: 'قالب پاسخ',
      value: templateText,
      onChange: setTemplateText,
      rows: 8
    }
  };

  return (
    <div className="min-h-screen w-full bg-background px-4 py-6 mx-auto">
      <div className="w-full max-w-7xl mx-auto space-y-4">
        <Header
          onLoadDefaults={loadDefaultValues}
          onSave={() => saveLiterals({
            companies,
            commands,
            prompts,
            welcomeText,
            introText,
            strategiesText,
            rulesText,
            templateText,
            aiModel,
            finalPrompt: exportedPrompt
          })}
          onPreview={() => {
            generateExportedPrompt({
              companies,
              commands,
              prompts,
              welcomeText,
              introText,
              strategiesText,
              rulesText,
              templateText,
              aiModel
            });
            setIsExportDialogOpen(true);
          }}
          isSaving={isSaving}
          isDante={process.env.NEXT_PUBLIC_MODE === "dante"}
        />

        {isLoading ? (
          <div className="flex items-center justify-center p-10">
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
          </div>
        ) : (
          <>
            <section className="grid grid-cols-2 gap-4">

              {/* Company Widget */}
              {PANEL_SETTING.template === "prop_firms" && (
                <CompanyWidget
                  companies={companies}
                  setCompanies={setCompanies}
                  setCurrentCompany={setCurrentCompany}
                  setIsDialogOpen={setIsDialogOpen}
                  prompts={prompts}
                  setPrompts={setPrompts}
                  resetPrompt={resetPrompt}
                  popularityCategories={popularityCategories}
                  popularityColors={popularityColors}
                />
              )}
              {/* روانشناسی کاربر Widget */}
              {PANEL_SETTING.template === "prop_firms" && (
                <Card className="shadow-md">
                  <CardHeader>
                    <CardTitle>روانشناسی کاربر</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <PromptSection
                      icon={<Sparkles size={18} className="text-blue-500" />}
                      title="مهارت"
                      type="skill"
                      description="رفتار ایجنت بر مبنای سطح مهارت کاربر"
                      variable="مهارت"
                      prompts={prompts}
                      setPrompts={setPrompts}
                      resetPrompt={resetPrompt}
                    />
                    <PromptSection
                      icon={<HeartPulse size={18} className="text-red-500" />}
                      title="اشتیاق به خرید"
                      type="enthusiasm"
                      description="رفتار ایجنت بر مبنای اشتیاق کاربر به خرید"
                      variable="اشتیاق"
                      prompts={prompts}
                      setPrompts={setPrompts}
                      resetPrompt={resetPrompt}
                    />
                    <PromptSection
                      icon={<Users size={18} className="text-green-500" />}
                      title="وضعیت خرید"
                      type="customer"
                      description="رفتار ایجنت بر مبنای وضعیت خرید کاربر"
                      variable="وضعیت_خرید"
                      prompts={prompts}
                      setPrompts={setPrompts}
                      resetPrompt={resetPrompt}
                    />
                  </CardContent>
                </Card>
              )}
              <Card className="shadow-md">
                <CardHeader>
                  <CardTitle>دستیار فروش هوشمند</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="mb-4">
                    <div className="flex items-center gap-2 mb-2">
                      <HeartPulse size={18} className="text-pink-500" />
                      <h3 className="font-medium">پرامپت دستیار فروش</h3>
                    </div>

                    <div className="flex gap-2 mb-4">
                      {tabs.map(tab => (
                        <Button
                          key={tab.id}
                          variant={activeTab === tab.id ? "default" : "outline"}
                          onClick={() => setActiveTab(tab.id as any)}
                          size="sm"
                        >
                          {tab.label}
                        </Button>
                      ))}
                    </div>

                    <div>
                      <label className="block text-sm mb-2">{tabContent[activeTab].label}</label>
                      <Textarea
                        className="w-full"
                        value={tabContent[activeTab].value}
                        onChange={(e) => tabContent[activeTab].onChange(e.target.value)}
                        rows={tabContent[activeTab].rows}
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </section>

            <section className="mt-8 border-t pt-8">
              <div className="text-xl font-semibold mb-4">ثابت‌ها</div>
              <div className="grid grid-cols-2 gap-4">
                <CommandsSection
                  commands={commands}
                  editCommand={editCommand}
                  deleteCommand={deleteCommand}
                  setCurrentCommand={setCurrentCommand}
                  setIsCommandDialogOpen={setIsCommandDialogOpen}
                />
                <Card className="shadow-md">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <MessageSquare className="h-5 w-5 ml-2 text-primary" />
                      متن خوشامدگویی
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground mb-2">
                      متن نمایش داده شده به کاربر هنگام شروع تعامل با ربات
                    </p>
                    <Textarea
                      className="w-full min-h-[200px]"
                      value={welcomeText}
                      onChange={(e) => setWelcomeText(e.target.value)}
                      placeholder="متن خوشامدگویی را وارد کنید..."
                    />
                  </CardContent>
                </Card>
                <Card className="shadow-md">
                  <CardHeader>
                    <CardTitle className="flex items-center">
                      <Command className="h-5 w-5 ml-2 text-primary" />
                      مدل هوش مصنوعی
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground ">
                      تنظیم مدل هوش مصنوعی مورد استفاده از OpenRouter
                    </p>
                    <div className="mb-3">
                      <a
                        href="https://openrouter.ai/models"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-xs text-blue-500 hover:underline flex items-center mt-1"
                      >
                        مشاهده لیست مدل‌ها در OpenRouter

                      </a>
                    </div>
                    <Input
                      className="w-full"
                      value={aiModel}
                      onChange={(e) => setAiModel(e.target.value)}
                      placeholder="مثال: openai/gpt-4.1-nano"
                    />
                  </CardContent>
                </Card>
              </div>
            </section>
          </>
        )}

        <CompanyDialog
          isOpen={isDialogOpen}
          onOpenChange={setIsDialogOpen}
          currentCompany={currentCompany}
          setCurrentCompany={setCurrentCompany}
          onSubmit={handleCompanySubmit}
          popularityCategories={popularityCategories}
        />

        <CommandDialog
          isOpen={isCommandDialogOpen}
          onOpenChange={setIsCommandDialogOpen}
          currentCommand={currentCommand}
          setCurrentCommand={setCurrentCommand}
          onSubmit={handleCommandSubmit}
        />

        <ExportDialog
          isOpen={isExportDialogOpen}
          onOpenChange={setIsExportDialogOpen}
          exportedPrompt={exportedPrompt}
        />
      </div>
    </div >
  )
}