"use client";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { PlusCircle, Trash2, ChevronDown, ChevronUp, SaveIcon, FileJson, Upload } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { CATEGORY_LABELS, FIELD_TEMPLATES } from "./templates";

type Field = { category: string; key: string; value: string };
type PropFirm = { name: string; fields: Field[] };

export default function PropFirmCreator() {
  const [propFirms, setPropFirms] = useState<PropFirm[]>([{
    name: "شرکت نمونه",
    fields: [
      { category: "پایه", key: "نام", value: "شرکت نمونه" },
      { category: "چالش", key: "نوع_چالش", value: "ارزیابی ۲ مرحله‌ای" }
    ]
  }]);
  const [activeFirmIndex, setActiveFirmIndex] = useState(0);
  const [expandedCategories, setExpandedCategories] = useState<string[]>(["پایه"]);
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedTemplate, setSelectedTemplate] = useState("پایه");
  const [isSaving, setIsSaving] = useState(false);
  const [isLoading, setIsLoading] = useState(true);



  useEffect(() => {
    fetch('/api/firm-document')
      .then(res => res.ok ? res.json() : null)
      .then(firms => {
        if (firms?.length) setPropFirms(firms);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('خطا در بارگیری داده‌ها:', err);
        setIsLoading(false);
      });
  }, []);


  
  const saveToDatabase = async () => {
    try {
      setIsSaving(true);
      const res = await fetch('/api/firm-document', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(propFirms)
      });
      if (!res.ok) throw new Error('خطا در ذخیره داده‌ها');
      const result = await res.json();
      alert(`${result.count} شرکت با موفقیت در دیتابیس ذخیره شد`);
    } catch (err) {
      console.error('خطا در ذخیره داده‌ها:', err);
      alert('خطا در ذخیره داده‌ها در دیتابیس');
    } finally {
      setIsSaving(false);
    }
  };

  const updateFirms = (updater: (firms: PropFirm[]) => PropFirm[]) => {
    setPropFirms(updater([...propFirms]));
  };

  const addPropFirm = () => {
    const newFirm = {
      name: `شرکت ${propFirms.length + 1}`,
      fields: [{ category: "پایه", key: "name", value: `شرکت ${propFirms.length + 1}` }]
    };
    updateFirms(firms => [...firms, newFirm]);
    setActiveFirmIndex(propFirms.length);
  };

  const removePropFirm = (index: number) => {
    if (confirm(`آیا مطمئن هستید که می‌خواهید "${propFirms[index].name}" را حذف کنید؟`)) {
      updateFirms(firms => {
        firms.splice(index, 1);
        if (activeFirmIndex >= firms.length) setActiveFirmIndex(Math.max(0, firms.length - 1));
        return firms;
      });
    }
  };

  const updateFirmName = (index: number, value: string) => {
    updateFirms(firms => {
      firms[index].name = value;
      const nameFieldIndex = firms[index].fields.findIndex(f => f.key === "name");
      if (nameFieldIndex !== -1) firms[index].fields[nameFieldIndex].value = value;
      return firms;
    });
  };

  const addField = (firmIndex: number, category = "basic", key = "", value = "") => {
    updateFirms(firms => {
      firms[firmIndex].fields.push({
        category,
        key: key || `فیلد_${firms[firmIndex].fields.length + 1}`,
        value
      });
      if (!expandedCategories.includes(category)) {
        setExpandedCategories([...expandedCategories, category]);
      }
      return firms;
    });
  };

  const addTemplateFields = (firmIndex: number, templateName: string) => {
    const template = FIELD_TEMPLATES[templateName];
    if (!template) return;

    updateFirms(firms => {
      const existingKeys = new Set(firms[firmIndex].fields.map(f => f.key));
      template.forEach(field => {
        if (!existingKeys.has(field.key)) {
          firms[firmIndex].fields.push({ ...field, value: "" });
        }
      });
      return firms;
    });

    if (!expandedCategories.includes(templateName)) {
      setExpandedCategories([...expandedCategories, templateName]);
    }
  };

  const removeField = (firmIndex: number, fieldIndex: number) => {
    updateFirms(firms => {
      firms[firmIndex].fields.splice(fieldIndex, 1);
      return firms;
    });
  };

  const updateField = (firmIndex: number, fieldIndex: number, property: keyof Field, value: string) => {
    updateFirms(firms => {
      firms[firmIndex].fields[fieldIndex][property] = value;
      if (property === "value" && firms[firmIndex].fields[fieldIndex].key === "name") {
        firms[firmIndex].name = value;
      }
      return firms;
    });
  };

  const exportData = () => {
    const langchainData = propFirms.map(firm => ({
      page_content: firm.fields.map(f => `${f.key}: ${f.value}`).join('|'),
      metadata: {
        name: firm.name,
        type: "فرم",
        categories: Array.from(new Set(firm.fields.map(f => f.category))),
        keywords: firm.fields.map(f => f.key)
      }
    }));

    const blob = new Blob([JSON.stringify(langchainData, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "langchain_data.json";
    a.click();
    URL.revokeObjectURL(url);
  };

  // الگوهای جداکننده داده - در بالای کامپوننت یا خارج از آن
  const FIELD_SEPARATOR = '|'; // جداکننده فیلدها
  const KEY_VALUE_SEPARATOR = /\s*:\s*/; // الگوی جداسازی کلید و مقدار

  const importData = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      try {
        const result = event.target?.result;
        if (typeof result !== 'string') return;
        const imported = JSON.parse(result);

        if (Array.isArray(imported) && imported[0]?.page_content) {
          // Format 1: LangChain format
          const transformedFirms = imported.map((item: any) => ({
            name: item.metadata?.name || "شرکت بدون نام",
            fields: item.page_content.split(FIELD_SEPARATOR)
              .map((line: string) => {
                line = line.trim();
                if (!line) return null;

                const parts = line.split(KEY_VALUE_SEPARATOR);
                if (parts.length < 2) return null;

                const key = parts[0].trim();
                const value = parts[1].trim();

                if (!key || !value) return null;

                // تعیین دسته‌بندی بر اساس کلید
                let category = "پایه";
                for (const [cat, fields] of Object.entries(FIELD_TEMPLATES)) {
                  if (fields.some(field => field.key === key)) {
                    category = cat;
                    break;
                  }
                }

                return { category, key, value };
              })
              .filter(Boolean)
          }));

          setPropFirms(transformedFirms);
          setActiveFirmIndex(0);
        }
      } catch (error) {
        console.error("خطا در خواندن فایل:", error);
        alert("فایل وارد شده قابل پردازش نیست. لطفاً فرمت صحیح را وارد کنید.");
      }
    };
    reader.readAsText(file);
  };


  const getFilteredAndGroupedFields = () => {
    if (!propFirms[activeFirmIndex]) return {};

    const fields = propFirms[activeFirmIndex].fields;
    const filtered = searchTerm
      ? fields.filter(field =>
        field.key.toLowerCase().includes(searchTerm.toLowerCase()) ||
        field.value.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (CATEGORY_LABELS[field.category]?.toLowerCase().includes(searchTerm.toLowerCase()) || false)
      )
      : fields;

    return filtered.reduce((grouped, field) => {
      (grouped[field.category] = grouped[field.category] || []).push(field);
      return grouped;
    }, {} as Record<string, Field[]>);
  };

  const groupedFields = getFilteredAndGroupedFields();
  const toggleCategory = (category: string) =>
    setExpandedCategories(prev =>
      prev.includes(category) ? prev.filter(c => c !== category) : [...prev, category]
    );

  if (isLoading) {
    return (
      <div className="w-full max-w-7xl mx-auto flex flex-col h-dvh items-center justify-center">
        <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>
      </div>
    )
  }

  return (
    <div className="w-full max-w-7xl mx-auto flex flex-col h-dvh items-center justify-center">
      <div className="mx-auto py-4 w-full">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-card p-5 rounded-lg border shadow-md">
          <div className="flex items-center">
            <FileJson className="h-7 w-7 me-3 text-primary" />
            <h1 className="text-2xl sm:text-xl font-bold">شرکت‌های پراپ</h1>
          </div>
          <div className="flex items-center gap-3 flex-wrap">
            <input type="file" id="jsonImport" className="hidden" accept=".json" onChange={importData} />
            <Button variant="secondary" onClick={() => document.getElementById('jsonImport')?.click()} className="flex items-center gap-2">
              <Upload className="h-4 w-4 mr-1" /> ورود اطلاعات
            </Button>
            <Button onClick={exportData} className="flex items-center gap-2">
              <FileJson className="h-4 w-4 mr-1" /> خروجی گرفتن
            </Button>
            <Button onClick={saveToDatabase} disabled={isSaving} className="flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white">
              {isSaving ? (
                <><span className="h-4 w-4 mr-1 animate-spin rounded-full border-2 border-white border-r-transparent" />در حال ذخیره...</>
              ) : (
                <><SaveIcon className="h-4 w-4 mr-1" /> ذخیره</>
              )}
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-[250px_1fr] mt-4 gap-4 flex-1">
          {/* Firms sidebar */}
          <div className="border rounded-md flex flex-col">
            <div className="font-medium bg-black/20 p-2 py-3 flex justify-between items-center">
              <span>شرکت‌های پراپ</span>
              <Badge variant="outline">{propFirms.length}</Badge>
            </div>
            <ScrollArea className="flex-1">
              {propFirms.map((firm, index) => (
                <div
                  key={index}
                  className={`flex items-center justify-between w-full p-2 rounded-md cursor-pointer ${activeFirmIndex === index ? 'bg-muted' : 'hover:bg-muted/50'}`}
                  onClick={() => setActiveFirmIndex(index)}
                >
                  <div className="truncate">{firm.name || `شرکت ${index + 1}`}</div>
                  <Badge variant="outline">{firm.fields.length}</Badge>
                </div>
              ))}
            </ScrollArea>
            <Button onClick={addPropFirm} className="w-full mt-3">
              <PlusCircle className="mr-2 h-4 w-4" />افزودن شرکت
            </Button>
          </div>

          {/* Current firm editor */}
          {propFirms.length > 0 && (
            <Card className="flex h-[90vh] flex-col">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex-1 me-2">
                    <Input
                      value={propFirms[activeFirmIndex].name}
                      onChange={(e) => updateFirmName(activeFirmIndex, e.target.value)}
                      placeholder="نام شرکت"
                      className="text-lg font-medium"
                    />
                  </div>
                  <div className="flex gap-2 items-center">
                    <Select value={selectedTemplate} onValueChange={setSelectedTemplate}>
                      <SelectTrigger className="w-[150px]">
                        <SelectValue placeholder="انتخاب قالب" />
                      </SelectTrigger>
                      <SelectContent>
                        {Object.keys(FIELD_TEMPLATES).map(template => (
                          <SelectItem key={template} value={template}>
                            {CATEGORY_LABELS[template] || template}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Button onClick={() => addTemplateFields(activeFirmIndex, selectedTemplate)}>افزودن قالب</Button>
                    <Button variant="outline" className="text-red-500" onClick={() => removePropFirm(activeFirmIndex)}>
                      <Trash2 className="mr-2 h-4 w-4" />حذف شرکت
                    </Button>
                  </div>
                </div>
                <div className="mt-3">
                  <Input placeholder="جستجوی فیلدها..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
                </div>
                <div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
                  <span>{propFirms[activeFirmIndex].fields.length} فیلد کل</span>
                  {searchTerm && <span>نمایش {Object.values(groupedFields).flat().length} نتیجه برای "{searchTerm}"</span>}
                </div>
              </CardHeader>

              <CardContent className="flex-1 overflow-hidden">
                <ScrollArea className="h-[calc(100vh-280px)]">
                  {Object.keys(groupedFields).length === 0 ? (
                    <div className="text-center p-8 text-muted-foreground">
                      {searchTerm ? "هیچ فیلد مطابقی یافت نشد" : "هنوز فیلدی وجود ندارد. برای شروع چند فیلد اضافه کنید."}
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {Object.keys(groupedFields)
                        .sort((a, b) => a === 'basic' ? -1 : b === 'basic' ? 1 : (CATEGORY_LABELS[a]?.localeCompare(CATEGORY_LABELS[b] || '') || 0))
                        .map(category => (
                          <div key={category} className="border rounded-md overflow-hidden">
                            <div className="flex justify-between items-center p-3 bg-muted cursor-pointer" onClick={() => toggleCategory(category)}>
                              <h3 className="font-medium">{CATEGORY_LABELS[category] || category}</h3>
                              <div className="flex items-center">
                                {expandedCategories.includes(category) ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                                <Badge variant="outline" className="mr-2">{groupedFields[category].length}</Badge>
                              </div>
                            </div>

                            {expandedCategories.includes(category) && (
                              <div className="p-3 space-y-3">
                                {groupedFields[category].map((field, idx) => {
                                  const fieldIndex = propFirms[activeFirmIndex].fields.findIndex(
                                    f => f.category === field.category && f.key === field.key
                                  );
                                  return (
                                    <div key={idx} className="grid grid-cols-[1fr_2fr_auto] gap-2 items-start">
                                      <Input
                                        value={field.key}
                                        onChange={(e) => updateField(activeFirmIndex, fieldIndex, "key", e.target.value)}
                                        placeholder="کلید فیلد"
                                      />
                                      <Input
                                        value={field.value}
                                        onChange={(e) => updateField(activeFirmIndex, fieldIndex, "value", e.target.value)}
                                        placeholder="مقدار"
                                      />
                                      <Button variant="ghost" size="icon" onClick={() => removeField(activeFirmIndex, fieldIndex)}>
                                        <Trash2 className="h-4 w-4 text-red-500" />
                                      </Button>
                                    </div>
                                  );
                                })}
                                <Button variant="outline" size="sm" className="w-full mt-2" onClick={() => addField(activeFirmIndex, category)}>
                                  <PlusCircle className="mr-2 h-4 w-4" />افزودن به {CATEGORY_LABELS[category] || category}
                                </Button>
                              </div>
                            )}
                          </div>
                        ))}
                    </div>
                  )}
                </ScrollArea>
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}