"use client";

import { useState, useEffect, ChangeEvent } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Plus, Search, X, Edit, Trash, FileText, Upload, Save, FileJson, TriangleAlert } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface Record {
  page_content: string;
  metadata: {
    categories: string;
    keywords: string;
    type: "دانشنامه" | "تبلیغات";
  };
}

export default function GeneralDocumentCreator() {
  const [data, setData] = useState<Record[]>([]);
  const [newEntry, setNewEntry] = useState<Record>({
    page_content: "",
    metadata: { categories: "", keywords: "", type: "دانشنامه" }
  });
  const [editIndex, setEditIndex] = useState<number | null>(null);
  const [filters, setFilters] = useState({ search: "", type: "all", category: "" });
  const [filteredData, setFilteredData] = useState<Record[]>([]);
  const [uniqueCategories, setUniqueCategories] = useState<string[]>([]);
  const [isCompactView, setIsCompactView] = useState(true);
  const [activeTab, setActiveTab] = useState<"all" | "دانشنامه" | "تبلیغات">("all");
  const [isSaving, setIsSaving] = useState(false);
  const [isLoading, setIsLoading] = useState(true);


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



  useEffect(() => {
    const categories = new Set<string>();
    data.forEach(item => {
      item.metadata.categories.split(',').forEach(cat => {
        if (cat.trim()) categories.add(cat.trim());
      });
    });
    setUniqueCategories(Array.from(categories));

    // اعمال فیلترها
    let results = [...data];
    const { search, category } = filters;

    if (search) {
      const term = search.toLowerCase();
      results = results.filter(item =>
        item.page_content.toLowerCase().includes(term) ||
        item.metadata.categories.toLowerCase().includes(term) ||
        item.metadata.keywords.toLowerCase().includes(term)
      );
    }

    // فیلتر براساس تب
    if (activeTab !== 'all') {
      results = results.filter(item => item.metadata.type === activeTab);
    }

    if (category && category !== 'all') {
      results = results.filter(item =>
        item.metadata.categories.toLowerCase().includes(category.toLowerCase())
      );
    }

    setFilteredData(results);
  }, [data, filters, activeTab]);

  // مدیریت فایل
  const handleFileImport = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target?.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const importedData = JSON.parse(e.target?.result as string);
        if (Array.isArray(importedData) && importedData.every(item =>
          typeof item.page_content === 'string' &&
          item.metadata &&
          typeof item.metadata.categories === 'string' &&
          typeof item.metadata.keywords === 'string' &&
          ['دانشنامه', 'تبلیغات'].includes(item.metadata.type))) {
          setData(importedData as Record[]);
        } else {
          alert("قالب JSON نامعتبر است");
        }
      } catch (error) {
        alert("خطا در خواندن فایل JSON");
      }
    };
    reader.readAsText(file);
    e.target.value = "";
  };

  const exportData = () => {
    const dataStr = JSON.stringify(data, null, 2);
    const blob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'langchain-documents.json';
    link.click();
  };

  const startEdit = (index: number) => {
    setEditIndex(index);
    setNewEntry({ ...data[index] });
  };

  // عملیات CRUD
  const handleInputChange = (field: string, value: string) => {
    setNewEntry({
      ...newEntry,
      ...(field === "page_content"
        ? { page_content: value }
        : { metadata: { ...newEntry.metadata, [field]: value } })
    });
  };

  const addOrUpdateEntry = () => {
    if (!newEntry.page_content.trim()) return;

    if (editIndex !== null) {
      setData(data.map((item, i) => i === editIndex ? { ...newEntry } : item));
      setEditIndex(null);
    } else {
      setData([...data, { ...newEntry }]);
    }

    setNewEntry({
      page_content: "",
      metadata: { categories: "", keywords: "", type: "دانشنامه" }
    });
  };

  // توابع کمکی
  const formatTags = (tags: string) => tags.split(',').filter(tag => tag.trim());

  const getTypeBadgeClass = (type: string) =>
    type === "دانشنامه" ? 'bg-primary/20 text-primary' :
      type === "تبلیغات" ? 'bg-blue-500/20 text-blue-500' : 'bg-secondary/20';

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


  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="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">
        {/* هدر */}
        <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">
            <FileText className="h-7 w-7 ml-3 text-primary" />
            <h1 className="text-2xl sm:text-xl font-bold">اسناد عمومی</h1>
          </div>
          <div className="flex items-center gap-3 flex-wrap">
            <div className="flex items-center bg-secondary/30 px-3 h-9 rounded-lg">
              <Label className="me-2" htmlFor="compact-view">نمایش فشرده</Label>
              <Switch style={{ direction: 'ltr' }} id="compact-view" checked={isCompactView} onCheckedChange={setIsCompactView} />
            </div>
            <input type="file" id="import-json" accept=".json" onChange={handleFileImport} className="hidden" />
            <Button onClick={() => document.getElementById('import-json')?.click()} variant="secondary">
              <Upload className="h-4 w-4 mr-1" /> ورود اطلاعات
            </Button>
            <Button onClick={exportData}>
              <FileJson className="h-4 w-4 mr-1" /> خروجی گرفتن
            </Button>
            <Button onClick={saveAllData} className="bg-green-600 hover:bg-green-700 text-white" disabled={isSaving}>
              {isSaving ? (
                <><div className="spinner-border mr-2 h-4 w-4 animate-spin"></div>در حال ذخیره...</>
              ) : (
                <><Save className="h-4 w-4 mr-1" /> ذخیره</>
              )}
            </Button>

          </div>
        </div>

        {/* محتوای اصلی */}
        <div className="flex flex-col lg:flex-row gap-6">
          {/* فرم */}
          <Card className="lg:w-1/3 py-0 shadow-md">
            <div className="px-6 py-4 mt-0 bg-secondary/20 border-b">
              <h2 className="font-semibold text-lg">ایجاد سند</h2>
            </div>
            <CardContent className="space-y-4">
              <div>
                <Label className="mb-1" htmlFor="page_content">محتوای سند</Label>
                <Textarea
                  id="page_content"
                  value={newEntry.page_content}
                  onChange={(e) => handleInputChange("page_content", e.target.value)}
                  placeholder="محتوای سند را اینجا وارد کنید..."
                  className="min-h-[120px]"
                />
              </div>

              <div className="grid gap-4">
                {["categories", "keywords"].map(field => (
                  <div key={field}>
                    <Label className="mb-1" htmlFor={field}>{field === "categories" ? "دسته‌بندی‌ها" : "کلمات کلیدی"}</Label>
                    <Input
                      id={field}
                      value={newEntry.metadata[field as keyof typeof newEntry.metadata]}
                      onChange={(e) => handleInputChange(field, e.target.value)}
                      placeholder={field === "categories" ? "دسته1,دسته2" : "کلمه1,کلمه2"}
                    />
                  </div>
                ))}

                <div>
                  <Label className="mb-2" htmlFor="type">نوع سند</Label>
                  <div className="flex gap-2 mt-1">
                    {(["دانشنامه", "تبلیغات"] as const).map(type => (
                      <Button
                        key={type}
                        type="button"
                        onClick={() => handleInputChange("type", type)}
                        className={`flex-1 text-xs ${newEntry.metadata.type === type ?
                          (type === "دانشنامه" ? "bg-primary" : "bg-blue-500") : "bg-secondary text-foreground"}`}
                      >
                        {type === "دانشنامه" ? "دانشنامه" : "تبلیغاتی"}
                      </Button>
                    ))}
                  </div>
                </div>
              </div>

              <Button
                onClick={addOrUpdateEntry}
                disabled={!newEntry.page_content.trim()}
                className="w-full"
              >
                {editIndex !== null ? (
                  "به‌روزرسانی"
                ) : (
                  <><Plus className="h-4 w-4 mr-1" /> افزودن سند</>
                )}
              </Button>
              {editIndex !== null && (
                <Button variant="outline" onClick={() => setEditIndex(null)} className="w-full">لغو</Button>
              )}
            </CardContent>
          </Card>

          {/* لیست اسناد */}
          <div className="flex flex-col lg:w-2/3 gap-4">
            {/* تب‌های نوع */}
            <Tabs value={activeTab} onValueChange={(val) => setActiveTab(val as "all" | "دانشنامه" | "تبلیغات")} className="w-full">
              <TabsList className="w-full">
                <TabsTrigger value="all" className="flex-1">همه ({data.length})</TabsTrigger>
                <TabsTrigger value="دانشنامه" className="flex-1">دانشنامه ({data.filter(d => d.metadata.type === 'دانشنامه').length})</TabsTrigger>
                <TabsTrigger value="تبلیغات" className="flex-1">تبلیغاتی ({data.filter(d => d.metadata.type === 'تبلیغات').length})</TabsTrigger>
              </TabsList>
            </Tabs>

            {/* فیلترها */}
            <div className="bg-card p-4 rounded-lg border shadow-sm">
              <div className="flex flex-col md:flex-row gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="جستجو در اسناد..."
                    className="pl-9"
                    value={filters.search}
                    onChange={(e) => setFilters({ ...filters, search: e.target.value })}
                  />
                  {filters.search && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="absolute right-1 top-1.5 h-7 w-7 rounded-full p-0"
                      onClick={() => setFilters({ ...filters, search: "" })}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  )}
                </div>

                <div className="flex gap-2">
                  <Select
                    value={filters.category}
                    onValueChange={(val) => setFilters({ ...filters, category: val })}
                  >
                    <SelectTrigger className="w-[150px]">
                      <SelectValue placeholder="دسته‌بندی" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">همه دسته‌بندی‌ها</SelectItem>
                      {uniqueCategories.map((category) => (
                        <SelectItem key={category} value={category}>{category}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>

                  {(filters.search || activeTab !== "all" || filters.category !== 'all') && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => {
                        setFilters({ search: "", type: "all", category: "" });
                        setActiveTab("all");
                      }}
                    >
                      پاک کردن فیلترها
                    </Button>
                  )}
                </div>
              </div>
            </div>

            {/* اسناد */}
            <div className="border rounded-lg bg-card shadow-md flex-1">
              {filteredData.length === 0 ? (
                <div className="flex h-[400px] flex-col items-center justify-center py-12 text-muted-foreground">
                  <Search className="h-6 w-6 mb-3" />
                  <div>سندی یافت نشد</div>
                </div>
              ) : (
                <ScrollArea className="h-[calc(100vh-340px)]">
                  <div className="divide-y">
                    {filteredData.map((item, index) => {
                      const dataIndex = data.findIndex(d => d === item);
                      const categories = formatTags(item.metadata.categories);
                      const keywords = formatTags(item.metadata.keywords);

                      return (
                        <div key={index} className={`p-4 hover:bg-secondary/10 ${isCompactView ? 'flex items-center justify-between' : ''} text-right`}>
                          {isCompactView ? (
                            <>
                              <div className="flex items-center gap-3 min-w-0">
                                <Badge className={getTypeBadgeClass(item.metadata.type)}>
                                  {item.metadata.type === "دانشنامه" ? "دانشنامه" : "تبلیغاتی"}
                                </Badge>
                                <div>{item.page_content.length > 80 ? item.page_content.slice(0, 77) + '...' : item.page_content}</div>
                              </div>
                              <div className="flex mr-2">
                                <Button variant="ghost" size="sm" onClick={() => startEdit(dataIndex)}>
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button variant="ghost" size="sm" onClick={() => {
                                  const dataIndex = data.findIndex(d => d === item);
                                  setData(data.filter((_, i) => i !== dataIndex));
                                }}>
                                  <Trash className="h-4 w-4" />
                                </Button>
                              </div>
                            </>
                          ) : (
                            <div className="space-y-3">
                              <div className="flex justify-between">
                                <div className="flex">
                                  <Button variant="ghost" size="sm" onClick={() => startEdit(dataIndex)}>
                                    <Edit className="h-4 w-4" />
                                  </Button>
                                  <Button variant="ghost" size="sm" onClick={() => {
                                    const dataIndex = data.findIndex(d => d === item);
                                    setData(data.filter((_, i) => i !== dataIndex));
                                  }}>
                                    <Trash className="h-4 w-4" />
                                  </Button>
                                </div>
                                <Badge className={getTypeBadgeClass(item.metadata.type)}>
                                  {item.metadata.type === "دانشنامه" ? "دانشنامه" : "تبلیغاتی"}
                                </Badge>
                              </div>
                              <div>{item.page_content}</div>
                              <div dir="rtl" className="flex flex-wrap gap-3 text-xs">
                                {categories.length > 0 && (
                                  <div className="flex items-center gap-1.5">
                                    <span className="text-muted-foreground">دسته‌بندی‌ها:</span>
                                    {categories.map((cat, i) => (
                                      <Badge key={i} variant="outline" className="bg-primary/10">{cat}</Badge>
                                    ))}
                                  </div>
                                )}
                                {keywords.length > 0 && (
                                  <div className="flex items-center gap-1.5">
                                    <span className="text-muted-foreground">کلمات کلیدی:</span>
                                    {keywords.map((kw, i) => (
                                      <Badge key={i} variant="secondary">{kw}</Badge>
                                    ))}
                                  </div>
                                )}
                              </div>
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </ScrollArea>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}