"use client";
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "motion/react";
import { Upload, CheckCircle2, X, Send, Stethoscope, Plus, Dog, Cat, Phone, FileText } from "lucide-react";
import { toast } from "sonner";
import { useUserStore } from "../lib/store/userStore";
import { usePetStore } from "../lib/store/usePetStore";

interface PrescriptionUploadModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export default function PrescriptionUploadModal({ isOpen, onClose }: PrescriptionUploadModalProps) {
  const { isLoggedIn, profile } = useUserStore();
  const { pets, activePetId, addPet } = usePetStore();

  const [file, setFile] = useState<File | null>(null);
  const [phone, setPhone] = useState("");
  const [notes, setNotes] = useState("");
  const [selectedPetOption, setSelectedPetOption] = useState<string>("active"); // petId or 'new'
  const [newPetName, setNewPetName] = useState("");
  const [newPetType, setNewPetType] = useState<"سگ" | "گربه">("سگ");
  const [newPetBreed, setNewPetBreed] = useState("");
  const [newPetAge, setNewPetAge] = useState<string>("");
  const [newPetWeight, setNewPetWeight] = useState<string>("");

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  useEffect(() => {
    if (isOpen) {
      if (isLoggedIn && profile?.mobile) {
        setPhone(profile.mobile);
      }
      if (pets.length > 0) {
        setSelectedPetOption(activePetId || pets[0].id);
      } else {
        setSelectedPetOption("new");
      }
    }
  }, [isOpen, isLoggedIn, profile?.mobile, pets, activePetId]);

  if (!isOpen) return null;

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

  const resetForm = () => {
    setFile(null);
    setNotes("");
    setNewPetName("");
    setNewPetBreed("");
    setNewPetAge("");
    setNewPetWeight("");
    setIsSubmitting(false);
    setIsSuccess(false);
  };

  const handleClose = () => {
    resetForm();
    onClose();
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) {
      toast.error("لطفاً تصویر یا فایل نسخه پزشکی را انتخاب کنید.");
      return;
    }

    const cleanPhone = phone.trim();
    if (!/^09\d{9}$/.test(cleanPhone)) {
      toast.error("شماره همراه معتبر نیست. (مثال: ۰۹۱۲۳۴۵۶۷۸۹)");
      return;
    }

    let finalPetId: string | undefined = undefined;
    let finalPetName: string | undefined = undefined;

    if (selectedPetOption !== "new") {
      finalPetId = selectedPetOption;
      const found = pets.find(p => p.id === selectedPetOption);
      if (found) finalPetName = found.name;
    } else {
      if (!newPetName.trim()) {
        toast.error("لطفاً نام همدم (پت) را وارد کنید.");
        return;
      }
      finalPetName = newPetName.trim();
    }

    setIsSubmitting(true);
    try {
      const api = (await import("../lib/services/api")).default;
      const formData = new FormData();
      formData.append("file", file);
      const uploadRes = await api.post("/admin/media/upload", formData, {
        headers: { "Content-Type": "multipart/form-data" }
      });
      const fileUrl = uploadRes.data?.data?.url || uploadRes.data?.url || uploadRes.data?.filename || file.name;
      
      const payload: Record<string, any> = {
        fileUrl,
        phone: cleanPhone,
        notes: notes.trim() || undefined,
      };

      if (finalPetId) {
        payload.petId = finalPetId;
        payload.petName = finalPetName;
      } else {
        payload.petName = finalPetName;
        payload.petType = newPetType;
        payload.petBreed = newPetBreed.trim() || undefined;
        payload.petAge = newPetAge ? parseFloat(newPetAge) : 0;
        payload.petWeight = newPetWeight ? parseFloat(newPetWeight) : 0;
      }

      await api.post("/prescriptions", payload);

      if (selectedPetOption === "new" && finalPetName) {
        addPet({
          name: finalPetName,
          type: newPetType,
          breed: newPetBreed.trim() || "نامشخص",
          age: newPetAge ? parseFloat(newPetAge) : 0,
          weight: newPetWeight ? parseFloat(newPetWeight) : 0,
          activityLevel: "متوسط",
          medicalConditions: [],
          reminders: [],
          logs: [],
          consumptions: []
        });
      }

      setIsSubmitting(false);
      setIsSuccess(true);
      toast.success("نسخه پزشکی شما با موفقیت ثبت شد.");
    } catch (error) {
      console.error("[PrescriptionUpload] Submission error:", error);
      setIsSubmitting(false);
      toast.error("خطا در ارسال نسخه پزشکی. لطفاً مجدداً تلاش کنید.");
    }
  };

  return (
    <AnimatePresence>
      <div 
        className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm font-vazir" 
        dir="rtl"
        onClick={(e) => {
          if (e.target === e.currentTarget) {
            handleClose();
          }
        }}
      >
        <motion.div
          initial={{ opacity: 0, scale: 0.95, y: 15 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.95, y: 15 }}
          className="bg-white rounded-3xl max-w-lg w-full max-h-[90vh] overflow-y-auto shadow-2xl border border-medical-gray-200 flex flex-col z-10 my-auto"
        >
          {/* Header */}
          <div className="bg-canina-blue text-white p-6 relative shrink-0">
            <button
              type="button"
              onClick={handleClose}
              className="absolute left-5 top-5 text-white/90 hover:text-white bg-white/20 hover:bg-white/30 p-2 rounded-full transition-all cursor-pointer z-20"
              aria-label="بستن پنجره"
            >
              <X className="w-5 h-5" />
            </button>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-2xl bg-white/20 flex items-center justify-center">
                <Stethoscope className="w-6 h-6 text-white" />
              </div>
              <div>
                <h3 className="text-lg font-black font-vazir">بررسی تخصصی نسخه دامپزشک</h3>
                <p className="text-xs text-blue-100 mt-0.5">آپلود نسخه جهت تامین فوری دارو و مکمل‌های اورجینال آلمان</p>
              </div>
            </div>
          </div>

          {/* Body */}
          <div className="p-6 flex-1">
            {isSuccess ? (
              <div className="text-center py-8 space-y-4">
                <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto">
                  <CheckCircle2 className="w-10 h-10" />
                </div>
                <h4 className="text-lg font-black text-medical-gray-900">نسخه با موفقیت ثبت شد</h4>
                <p className="text-xs text-medical-gray-500 max-w-sm mx-auto leading-relaxed">
                  تیم پزشکی و کارشناسان کنینا نسخه شما را بررسی کرده و اقلام تجویزی را به پرونده شما اضافه می‌کنند. به محض آماده‌سازی، پیامک اطلاع‌رسانی برای شما ارسال خواهد شد.
                </p>
                <button
                  onClick={handleClose}
                  className="px-8 py-3 bg-canina-blue text-white rounded-xl text-xs font-black hover:bg-canina-dark transition-all cursor-pointer shadow-md shadow-canina-blue/20"
                >
                  متوجه شدم
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4">
                {/* Upload Zone */}
                <div>
                  <label className="block text-xs font-black text-medical-gray-700 mb-2">تصویر یا فایل نسخه دامپزشک *</label>
                  <div className="border-2 border-dashed border-medical-gray-300 hover:border-canina-blue rounded-2xl p-4 text-center cursor-pointer transition-colors relative bg-medical-gray-50/50">
                    <input
                      type="file"
                      accept="image/*,.pdf"
                      onChange={handleFileChange}
                      className="absolute inset-0 opacity-0 cursor-pointer z-10"
                    />
                    <div className="flex flex-col items-center gap-2">
                      {file ? (
                        <div className="flex flex-col items-center gap-2">
                          {file.type.startsWith('image/') ? (
                            <img
                              src={URL.createObjectURL(file)}
                              alt="پیش‌نمایش نسخه"
                              className="w-24 h-24 object-cover rounded-xl border border-medical-gray-200 shadow-sm"
                            />
                          ) : (
                            <div className="w-16 h-16 rounded-2xl bg-canina-blue/10 flex items-center justify-center text-canina-blue">
                              <FileText className="w-8 h-8" />
                            </div>
                          )}
                          <div className="text-xs font-black text-canina-blue truncate max-w-xs">{file.name}</div>
                          <span className="text-[10px] text-medical-gray-400 font-bold">برای تغییر فایل دوباره کلیک کنید</span>
                        </div>
                      ) : (
                        <>
                          <div className="w-10 h-10 rounded-full bg-canina-blue/10 flex items-center justify-center text-canina-blue">
                            <Upload className="w-5 h-5" />
                          </div>
                          <p className="text-xs font-bold text-medical-gray-700">برای انتخاب فایل یا عکس نسخه کلیک کنید</p>
                          <span className="text-[10px] text-medical-gray-400">فرمت‌های مجاز: JPG, PNG, PDF (حداکثر ۱۰ مگابایت)</span>
                        </>
                      )}
                    </div>
                  </div>
                </div>

                {/* Pet Selection or Inline Creation */}
                <div className="space-y-2">
                  <label className="block text-xs font-black text-medical-gray-700">این نسخه برای کدام همدم است؟ *</label>
                  {pets.length > 0 && (
                    <div className="grid grid-cols-2 gap-2 mb-2">
                      {pets.map((p) => (
                        <button
                          key={p.id}
                          type="button"
                          onClick={() => setSelectedPetOption(p.id)}
                          className={`p-2.5 rounded-xl border text-xs font-bold flex items-center gap-2 transition-all cursor-pointer ${
                            selectedPetOption === p.id
                              ? "border-canina-blue bg-canina-blue/10 text-canina-blue shadow-xs font-black"
                              : "border-medical-gray-200 text-medical-gray-600 hover:bg-medical-gray-50"
                          }`}
                        >
                          {p.type === "سگ" ? <Dog className="w-4 h-4 shrink-0" /> : <Cat className="w-4 h-4 shrink-0 text-amber-500" />}
                          <span className="truncate">{p.name} ({p.breed || p.type})</span>
                        </button>
                      ))}
                      <button
                        type="button"
                        onClick={() => setSelectedPetOption("new")}
                        className={`p-2.5 rounded-xl border text-xs font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer ${
                          selectedPetOption === "new"
                            ? "border-canina-blue bg-canina-blue/10 text-canina-blue font-black"
                            : "border-dashed border-medical-gray-300 text-medical-gray-500 hover:bg-medical-gray-50"
                        }`}
                      >
                        <Plus className="w-4 h-4" />
                        <span>همدم جدید</span>
                      </button>
                    </div>
                  )}

                  {/* Inline Pet Info Form if "new" or no pets */}
                  {(selectedPetOption === "new" || pets.length === 0) && (
                    <div className="p-3.5 bg-medical-gray-50/80 rounded-2xl border border-medical-gray-200 space-y-3 animate-in fade-in duration-200">
                      <div className="flex items-center justify-between">
                        <span className="text-[11px] font-black text-medical-gray-800">مشخصات همدم جدید:</span>
                        <div className="flex gap-1.5">
                          <button
                            type="button"
                            onClick={() => setNewPetType("سگ")}
                            className={`px-3 py-1 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                              newPetType === "سگ" ? "bg-canina-blue text-white shadow-xs" : "bg-white text-medical-gray-600 border border-medical-gray-200"
                            }`}
                          >
                            سگ
                          </button>
                          <button
                            type="button"
                            onClick={() => setNewPetType("گربه")}
                            className={`px-3 py-1 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                              newPetType === "گربه" ? "bg-canina-blue text-white shadow-xs" : "bg-white text-medical-gray-600 border border-medical-gray-200"
                            }`}
                          >
                            گربه
                          </button>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <input
                          type="text"
                          placeholder="نام حیوان خانگی *"
                          value={newPetName}
                          onChange={(e) => setNewPetName(e.target.value)}
                          className="w-full bg-white border border-medical-gray-200 rounded-xl px-3 py-2 text-xs font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
                        />
                        <input
                          type="text"
                          placeholder="نژاد (مثلاً ژرمن، پرشین)"
                          value={newPetBreed}
                          onChange={(e) => setNewPetBreed(e.target.value)}
                          className="w-full bg-white border border-medical-gray-200 rounded-xl px-3 py-2 text-xs font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-2">
                        <input
                          type="number"
                          placeholder="سن (سال)"
                          value={newPetAge}
                          onChange={(e) => setNewPetAge(e.target.value)}
                          className="w-full bg-white border border-medical-gray-200 rounded-xl px-3 py-2 text-xs font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
                        />
                        <input
                          type="number"
                          step="0.1"
                          placeholder="وزن (کیلوگرم)"
                          value={newPetWeight}
                          onChange={(e) => setNewPetWeight(e.target.value)}
                          className="w-full bg-white border border-medical-gray-200 rounded-xl px-3 py-2 text-xs font-bold focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
                        />
                      </div>
                    </div>
                  )}
                </div>

                {/* Phone Number */}
                <div>
                  <label className="block text-xs font-black text-medical-gray-700 mb-1">
                    شماره همراه جهت هماهنگی و پیامک تایید *
                  </label>
                  <div className="relative">
                    <input
                      type="tel"
                      dir="ltr"
                      required
                      placeholder="۰۹۱۲۳۴۵۶۷۸۹"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                      className="w-full bg-white border border-medical-gray-200 rounded-xl py-2.5 pr-3 pl-11 text-xs font-mono font-bold text-medical-gray-900 focus:outline-none focus:ring-2 focus:ring-canina-blue/20"
                    />
                    <Phone className="w-4 h-4 text-medical-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
                  </div>
                </div>

                {/* Additional Notes */}
                <div>
                  <label className="block text-xs font-black text-medical-gray-700 mb-1">توضیحات و علائم خاص (اختیاری)</label>
                  <textarea
                    rows={2}
                    placeholder="نکات پزشک، حساسیت دارویی یا شرایط خاص..."
                    value={notes}
                    onChange={(e) => setNotes(e.target.value)}
                    className="w-full bg-white border border-medical-gray-200 rounded-xl p-3 text-xs font-medium text-medical-gray-900 focus:outline-none focus:ring-2 focus:ring-canina-blue/20 resize-none"
                  />
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="w-full py-3.5 bg-canina-blue text-white rounded-xl font-black text-xs hover:bg-canina-dark transition-all flex items-center justify-center gap-2 shadow-lg shadow-canina-blue/20 disabled:opacity-50 cursor-pointer"
                >
                  {isSubmitting ? (
                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  ) : (
                    <>
                      <Send className="w-4 h-4" />
                      <span>ارسال نسخه و ثبت درخواست تامین</span>
                    </>
                  )}
                </button>
              </form>
            )}
          </div>
        </motion.div>
      </div>
    </AnimatePresence>
  );
}