"use client";

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Loader2, AlertTriangle } from "lucide-react";
import Link from "next/link";

interface DocumentMetadata {
  id?: string;
  name?: string; // Added name for potentially better titles
  categories?: string | string[];
  type?: string;
  fields?: Record<string, any>;
  keywords?: string;
}

interface Document {
  page_content: string;
  metadata: DocumentMetadata;
}

// Helper function to get categories string
const getCategoriesString = (categories: DocumentMetadata['categories']) => {
  if (!categories) return "بدون دسته‌بندی";
  return Array.isArray(categories) ? categories.join(", ") : categories;
};

// Extracted DocumentCard component
interface DocumentCardProps {
  doc: Document;
}

const DocumentCard = ({ doc }: DocumentCardProps) => (
  <Card className="overflow-hidden flex flex-col">
    <CardHeader>
      <CardTitle>{doc.metadata.name || doc.metadata.type || "سند بدون عنوان"}</CardTitle>
      <CardDescription>
        کلیدواژه‌ها: {doc.metadata.keywords || "ندارد"}
      </CardDescription>
    </CardHeader>
    <CardContent className="flex-grow min-h-[10rem] overflow-y-auto"> {/* min-h instead of fixed h for flexibility */}
      <p dir="rtl" className="text-sm">
        {doc.page_content || "بدون محتوا"}
      </p>
    </CardContent>
    <CardFooter className="bg-gray-50 dark:bg-gray-800 mt-auto">
      <p className="text-xs text-gray-500 dark:text-gray-400" dir="rtl">
        دسته‌بندی: {getCategoriesString(doc.metadata.categories)}
      </p>
    </CardFooter>
  </Card>
);

// Main Sync Component
export default function Sync() {
  const [documents, setDocuments] = useState<Document[]>([]);
  const [isLoadingDocuments, setIsLoadingDocuments] = useState(true);
  const [isSyncing, setIsSyncing] = useState(false);
  const [showSyncDialog, setShowSyncDialog] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchDocuments = useCallback(async () => {
    setIsLoadingDocuments(true);
    setError(null);
    try {
      const response = await fetch("/api/rag/document");
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || "خطا در دریافت اطلاعات اسناد");
      }
      const data = await response.json();
      setDocuments(data.documents || []);
    } catch (err: any) {
      setError(err.message || "خطا در بارگیری اسناد.");
      console.error("Fetch documents error:", err);
    } finally {
      setIsLoadingDocuments(false);
    }
  }, []);

  useEffect(() => {
    fetchDocuments();
  }, [fetchDocuments]);

  const handleSync = async () => {
    setIsSyncing(true);
    setError(null);
    try {
      const response = await fetch("/api/pinecone");
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || "خطا در عملیات همگام‌سازی");
      }
      await fetchDocuments(); // Reload documents after successful sync
      setShowSyncDialog(false);
      // Optionally, show a success toast/message here
    } catch (err: any) {
      setError(err.message || "خطا در همگام‌سازی داده‌ها با هوش مصنوعی.");
      console.error("Sync error:", err);
    } finally {
      setIsSyncing(false);
    }
  };

  const renderContent = () => {
    if (isLoadingDocuments) {
      return (
        <div className="flex justify-center items-center h-64">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="mr-2">در حال بارگیری اسناد...</span>
        </div>
      );
    }

    if (documents.length === 0) {
      return (
        <div className="col-span-full text-center py-12">
          <Card className="max-w-md mx-auto shadow-lg">
            <CardHeader>
              <CardTitle className="text-xl">سندی یافت نشد</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">
                در حال حاضر سندی برای نمایش وجود ندارد. برای افزودن اسناد جدید،
                داده‌ها را با هوش مصنوعی همگام‌سازی کنید.
              </p>
            </CardContent>
            <CardFooter>
              <Button className="w-full">
                <Link href="/dashboard/databank/general">
                  افزودن سند جدید
                </Link>
              </Button>
            </CardFooter>
          </Card>
        </div>
      );
    }

    return (
      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {documents.map((doc, index) => (
          // Using doc.metadata.id or a combination for a more stable key if available
          <DocumentCard key={doc.metadata.id || `doc-${index}`} doc={doc} />
        ))}
      </div>
    );
  };

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="flex flex-col sm:flex-row justify-between items-center mb-8 pb-4 border-b">
        <h1 className="text-3xl font-bold mb-4 sm:mb-0">همگام‌سازی دیتابانک</h1>
        <Button onClick={() => setShowSyncDialog(true)} disabled={isLoadingDocuments || documents.length === 0 || isSyncing}>
          همگام‌سازی با هوش مصنوعی
        </Button>
      </div>

      {error && (
        <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-md shadow" role="alert">
          <p className="font-bold">خطا!</p>
          <p>{error}</p>
        </div>
      )}

      {renderContent()}

      <Dialog open={showSyncDialog} onOpenChange={setShowSyncDialog}>
        <DialogContent className="sm:max-w-[480px]">
          <DialogHeader>
            <DialogTitle className="text-xl">همگام‌سازی با هوش مصنوعی</DialogTitle>
            <DialogDescription>
              پیش از شروع عملیات همگام‌سازی، لطفاً به نکات زیر توجه فرمایید:
            </DialogDescription>
          </DialogHeader>

          <div className="my-4 space-y-3" dir="rtl">
            {[
              "تمام داده‌های قبلی در سیستم هوش مصنوعی حذف خواهند شد.",
              "داده‌های جدید از دیتابانک فعلی جایگزین آن‌ها می‌شوند.",
              "توصیه می‌شود بین هر بار اجرای این عملیات، حداقل ۵ دقیقه فاصله زمانی در نظر بگیرید.",
              "این عملیات ممکن است بسته به حجم داده‌ها زمان‌بر باشد."
            ].map((item, index) => (
              <div key={index} className="flex items-start text-sm">
                <AlertTriangle className="h-4 w-4 text-yellow-500 ml-2 flex-shrink-0 mt-0.5" />
                <span>{item}</span>
              </div>
            ))}
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button variant="outline" onClick={() => setShowSyncDialog(false)} disabled={isSyncing}>
              انصراف
            </Button>
            <Button onClick={handleSync} disabled={isSyncing} className="min-w-[150px]">
              {isSyncing ? (
                <>
                  <Loader2 className="ml-2 h-4 w-4 animate-spin" />
                  در حال همگام‌سازی...
                </>
              ) : (
                "تایید و شروع همگام‌سازی"
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}