/**
 * Document Upload Modal
 * Allows users to upload documents to their knowledge base
 */

"use client";

import { useState, useCallback } from "react";
import type { Lang } from "@/lib/config";
import { getCSRFTokenAsync } from "@/lib/csrf-client";
import { Upload, CheckCircle, AlertCircle } from "lucide-react";
import {
  DOCUMENT_CATEGORIES,
  ALLOWED_FILE_TYPES,
  MAX_FILE_SIZE,
  FILE_TYPE_LABELS,
} from "@/lib/types/knowledge-base.types";
import { BaseModal, ModalFooter, ModalButton } from "@/components/ui/BaseModal";

interface DocumentUploadModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  lang: Lang;
}

export default function DocumentUploadModal({
  isOpen,
  onClose,
  onSuccess,
  lang,
}: DocumentUploadModalProps) {
  const isAr = lang === "ar";

  const [file, setFile] = useState<File | null>(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [category, setCategory] = useState("general");
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [dragActive, setDragActive] = useState(false);

  // Reset form
  const resetForm = () => {
    setFile(null);
    setTitle("");
    setDescription("");
    setCategory("general");
    setError(null);
  };

  // Handle file drop/select
  const handleFile = useCallback(
    (selectedFile: File) => {
      setError(null);

      // Validate file type
      if (
        !ALLOWED_FILE_TYPES.includes(
          selectedFile.type as (typeof ALLOWED_FILE_TYPES)[number],
        )
      ) {
        setError(
          isAr
            ? "نوع الملف غير مدعوم. يرجى رفع ملف PDF أو Word أو نص"
            : "Unsupported file type. Please upload PDF, Word, or text files",
        );
        return;
      }

      // Validate file size
      if (selectedFile.size > MAX_FILE_SIZE) {
        setError(
          isAr
            ? "حجم الملف يتجاوز الحد الأقصى 10 ميغابايت"
            : "File size exceeds maximum of 10MB",
        );
        return;
      }

      setFile(selectedFile);
      // Auto-fill title from filename if empty
      if (!title) {
        const nameWithoutExt = selectedFile.name.replace(/\.[^/.]+$/, "");
        setTitle(nameWithoutExt);
      }
    },
    [isAr, title],
  );

  // Handle drag events
  const handleDrag = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true);
    } else if (e.type === "dragleave") {
      setDragActive(false);
    }
  }, []);

  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      setDragActive(false);

      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
        handleFile(e.dataTransfer.files[0]);
      }
    },
    [handleFile],
  );

  // Handle file input change
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      handleFile(e.target.files[0]);
    }
  };

  // Handle upload
  const handleUpload = async () => {
    if (!file) return;

    setUploading(true);
    setError(null);

    try {
      // Get CSRF token (use getCSRFTokenAsync for FormData uploads - can't use fetchWithCSRF
      // because FormData requires browser to set Content-Type with boundary automatically)
      const csrfToken = await getCSRFTokenAsync();
      if (!csrfToken) {
        throw new Error(
          isAr
            ? "خطأ في الجلسة. يرجى تحديث الصفحة."
            : "Session error. Please refresh the page.",
        );
      }

      const formData = new FormData();
      formData.append("file", file);
      if (title) formData.append("title", title);
      if (description) formData.append("description", description);
      formData.append("category", category);

      const response = await fetch("/api/dashboard/knowledge-base/documents", {
        method: "POST",
        headers: {
          "x-csrf-token": csrfToken,
        },
        body: formData,
        credentials: "include",
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Upload failed");
      }

      resetForm();
      onSuccess();
    } catch (err: unknown) {
      const message =
        err instanceof Error
          ? err.message
          : isAr
            ? "فشل رفع الملف"
            : "Failed to upload file";
      setError(message);
    } finally {
      setUploading(false);
    }
  };

  const handleClose = () => {
    if (!uploading) {
      resetForm();
      onClose();
    }
  };

  const footer = (
    <ModalFooter align="end">
      <ModalButton onClick={handleClose} disabled={uploading}>
        {isAr ? "إلغاء" : "Cancel"}
      </ModalButton>
      <ModalButton
        variant="primary"
        onClick={handleUpload}
        disabled={!file || uploading}
        loading={uploading}
        icon={!uploading ? <Upload className="h-4 w-4" /> : undefined}
      >
        {uploading
          ? isAr
            ? "جاري الرفع..."
            : "Uploading..."
          : isAr
            ? "رفع"
            : "Upload"}
      </ModalButton>
    </ModalFooter>
  );

  return (
    <BaseModal
      isOpen={isOpen}
      onClose={handleClose}
      title={isAr ? "رفع مستند" : "Upload Document"}
      size="md"
      dir={isAr ? "rtl" : "ltr"}
      footer={footer}
      loading={uploading}
    >
      <div className="space-y-4">
        {/* Drop zone */}
        <div
          onDragEnter={handleDrag}
          onDragLeave={handleDrag}
          onDragOver={handleDrag}
          onDrop={handleDrop}
          className={`relative rounded-xl border-2 border-dashed p-8 text-center transition-all ${
            dragActive
              ? "border-brand-green bg-brand-green/5"
              : file
                ? "border-emerald-300 bg-emerald-50"
                : "border-slate-200 hover:border-slate-300"
          }`}
        >
          <input
            type="file"
            accept={ALLOWED_FILE_TYPES.join(",")}
            onChange={handleInputChange}
            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
            disabled={uploading}
          />

          {file ? (
            <div className="flex flex-col items-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 mb-3">
                <CheckCircle className="h-6 w-6" />
              </div>
              <p className="font-medium text-slate-900">{file.name}</p>
              <p className="text-sm text-slate-500 mt-1">
                {FILE_TYPE_LABELS[file.type] || file.type} -{" "}
                {(file.size / 1024).toFixed(1)} KB
              </p>
              <button
                type="button"
                onClick={(e) => {
                  e.stopPropagation();
                  setFile(null);
                }}
                className="mt-2 text-sm text-red-600 hover:text-red-700"
              >
                {isAr ? "إزالة" : "Remove"}
              </button>
            </div>
          ) : (
            <div className="flex flex-col items-center">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400 mb-3">
                <Upload className="h-6 w-6" />
              </div>
              <p className="font-medium text-slate-700">
                {isAr ? "اسحب وأفلت الملف هنا" : "Drag and drop file here"}
              </p>
              <p className="text-sm text-slate-500 mt-1">
                {isAr ? "أو انقر لاختيار ملف" : "or click to select file"}
              </p>
              <p className="text-xs text-slate-400 mt-2">
                PDF, Word, Text, Markdown, CSV (Max 10MB)
              </p>
            </div>
          )}
        </div>

        {/* Title */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            {isAr ? "العنوان (اختياري)" : "Title (optional)"}
          </label>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder={isAr ? "اسم المستند" : "Document name"}
            className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm placeholder-slate-400 focus:border-brand-green focus:ring-2 focus:ring-brand-green/20 focus:outline-none"
            disabled={uploading}
          />
        </div>

        {/* Description */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            {isAr ? "الوصف (اختياري)" : "Description (optional)"}
          </label>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder={
              isAr ? "وصف موجز للمستند" : "Brief description of the document"
            }
            rows={2}
            className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm placeholder-slate-400 focus:border-brand-green focus:ring-2 focus:ring-brand-green/20 focus:outline-none resize-none"
            disabled={uploading}
          />
        </div>

        {/* Category */}
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            {isAr ? "الفئة" : "Category"}
          </label>
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand-green focus:ring-2 focus:ring-brand-green/20 focus:outline-none"
            disabled={uploading}
          >
            {DOCUMENT_CATEGORIES.map((cat) => (
              <option key={cat.value} value={cat.value}>
                {isAr ? cat.labelAr : cat.labelEn}
              </option>
            ))}
          </select>
        </div>

        {/* Error */}
        {error && (
          <div className="flex items-center gap-2 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-600">
            <AlertCircle className="h-4 w-4 flex-shrink-0" />
            <span>{error}</span>
          </div>
        )}
      </div>
    </BaseModal>
  );
}