import React, { useState } from "react";
import { Upload, FileText, CheckCircle2, Trash2, BookOpen } from "lucide-react";
import { SermonReference } from "../types";

interface SermonUploadProps {
  activeSermon: SermonReference | null;
  onUploadSuccess: (sermon: SermonReference) => void;
  onClear: () => void;
}

export default function SermonUpload({
  activeSermon,
  onUploadSuccess,
  onClear,
}: SermonUploadProps) {
  const [isDragging, setIsDragging] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [pastedText, setPastedText] = useState("");
  const [pastedTitle, setPastedTitle] = useState("");
  const [uploadError, setUploadError] = useState<string | null>(null);
  const [showPaster, setShowPaster] = useState(false);

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = () => {
    setIsDragging(false);
  };

  const processFile = async (file: File) => {
    setIsUploading(true);
    setUploadError(null);

    const formData = new FormData();
    formData.append("file", file);

    try {
      const response = await fetch("/api/sermon/upload", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        let errMsg = "Failed to upload file";
        try {
          const errorData = await response.json();
          errMsg = errorData.error || errMsg;
        } catch (_) {
          const textError = await response.text();
          errMsg = textError.substring(0, 100) || errMsg;
        }
        throw new Error(errMsg);
      }

      const data = await response.json();
      onUploadSuccess(data.activeSermon);
    } catch (err: any) {
      setUploadError(err.message || "عذراً، حدث خطأ أثناء معالجة الملف.");
    } finally {
      setIsUploading(false);
      setIsDragging(false);
    }
  };

  const handleDrop = async (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      await processFile(e.dataTransfer.files[0]);
    }
  };

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      await processFile(e.target.files[0]);
    }
  };

  const handlePasteSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!pastedText.trim()) return;

    setIsUploading(true);
    setUploadError(null);

    try {
      const response = await fetch("/api/sermon/text", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: pastedTitle.trim() || "نص خطبة مكتوب",
          text: pastedText,
        }),
      });

      if (!response.ok) {
        let errMsg = "Failed to save text";
        try {
          const errorData = await response.json();
          errMsg = errorData.error || errMsg;
        } catch (_) {
          const textError = await response.text();
          errMsg = textError.substring(0, 100) || errMsg;
        }
        throw new Error(errMsg);
      }

      const data = await response.json();
      onUploadSuccess(data.activeSermon);
      setPastedText("");
      setPastedTitle("");
      setShowPaster(false);
    } catch (err: any) {
      setUploadError(err.message || "عذراً، حدث خطأ أثناء حفظ النص.");
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <BookOpen className="w-5 h-5 text-emerald-600" />
          <h2 className="text-sm font-bold tracking-tight text-slate-800 font-sans uppercase">
            مرجع الخطبة المكتوبة
          </h2>
        </div>
        {activeSermon && (
          <button
            onClick={onClear}
            className="flex items-center gap-1.5 text-xs text-rose-600 hover:text-rose-700 bg-rose-50 hover:bg-rose-100 px-3 py-1.5 rounded-lg transition-colors font-sans font-medium"
          >
            <Trash2 className="w-3.5 h-3.5" />
            حذف المرجع
          </button>
        )}
      </div>

      {activeSermon ? (
        <div className="p-4 rounded-xl border border-dashed border-slate-300 bg-slate-50 flex items-start gap-3">
          <FileText className="w-8 h-8 text-rose-500 shrink-0 mt-0.5" />
          <div className="flex-1 min-w-0">
            <p className="text-xs font-bold text-slate-800 truncate font-sans">
              {activeSermon.title}
            </p>
            <div className="flex items-center gap-3 mt-1 text-[10px] text-slate-500 font-sans">
              <span>{activeSermon.wordCount} كلمة</span>
              <span>•</span>
              <span>
                {new Date(activeSermon.uploadedAt).toLocaleTimeString("ar-EG", {
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </span>
            </div>
            <p className="text-[10px] font-medium text-emerald-700 mt-2 font-sans bg-emerald-50 px-2 py-1 rounded inline-block">
              ✓ متصل بمحرك الذكاء الاصطناعي
            </p>
          </div>
          <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0" />
        </div>
      ) : (
        <div className="space-y-4">
          {!showPaster ? (
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              className={`border-2 border-dashed rounded-xl p-6 text-center transition-all ${
                isDragging
                  ? "border-emerald-500 bg-emerald-50/30"
                  : "border-slate-200 hover:border-emerald-400 hover:bg-slate-50/30"
              }`}
            >
              <input
                type="file"
                id="sermonFile"
                accept=".pdf,.txt"
                onChange={handleFileChange}
                className="hidden"
                disabled={isUploading}
              />
              <label
                htmlFor="sermonFile"
                className="cursor-pointer flex flex-col items-center justify-center"
              >
                <div className="w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center mb-3">
                  <Upload className="w-6 h-6 text-emerald-600" />
                </div>
                <p className="text-xs font-bold text-slate-700 font-sans">
                  اسحب ملف الخطبة بصيغة PDF أو TXT هنا
                </p>
                <p className="text-[10px] text-slate-400 mt-1 font-sans">
                  أو انقر لتصفح الملفات من جهازك
                </p>
              </label>

              <div className="mt-4 pt-4 border-t border-slate-100">
                <button
                  onClick={() => setShowPaster(true)}
                  className="text-xs text-emerald-600 hover:text-emerald-700 font-semibold hover:underline font-sans"
                >
                  أو قم بكتابة / لصق نص الخطبة يدوياً
                </button>
              </div>
            </div>
          ) : (
            <form onSubmit={handlePasteSubmit} className="space-y-3">
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1 font-sans">
                  عنوان الخطبة (اختياري)
                </label>
                <input
                  type="text"
                  placeholder="مثال: خطبة الصلاة وأثرها في الفرد"
                  value={pastedTitle}
                  onChange={(e) => setPastedTitle(e.target.value)}
                  className="w-full text-xs px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500 font-sans"
                />
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-600 mb-1 font-sans">
                  نص الخطبة كاملاً
                </label>
                <textarea
                  rows={4}
                  placeholder="الصق نص الخطبة كاملاً هنا ليكون مرجعاً للبرنامج..."
                  value={pastedText}
                  onChange={(e) => setPastedText(e.target.value)}
                  className="w-full text-xs px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:border-emerald-500 font-sans resize-y"
                  required
                />
              </div>
              <div className="flex gap-2 justify-end">
                <button
                  type="button"
                  onClick={() => setShowPaster(false)}
                  className="text-xs text-slate-500 hover:bg-slate-100 px-3 py-2 rounded-lg font-sans"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  disabled={isUploading}
                  className="bg-emerald-600 hover:bg-emerald-700 text-white text-xs px-4 py-2 rounded-lg font-semibold font-sans flex items-center gap-1"
                >
                  {isUploading ? "جاري الحفظ..." : "حفظ المرجع النصي"}
                </button>
              </div>
            </form>
          )}

          {uploadError && (
            <p className="text-xs text-rose-600 bg-rose-50 p-2.5 rounded-lg border border-rose-100 font-sans">
              {uploadError}
            </p>
          )}
        </div>
      )}
    </div>
  );
}