import { useState, useEffect } from "react";
import { motion } from "motion/react";
import { Phone, Send } from "lucide-react";
import { sendSupervisorCode } from "../../../../services/feedService";

interface SupervisorRequestSectionProps {
  onSupervisorDataChange: (phone: string, code: string) => void;
  initialMobile?: string;
  initialCode?: string;
}

export function SupervisorRequestSection({
  onSupervisorDataChange,
  initialMobile = "",
  initialCode = "",
}: SupervisorRequestSectionProps) {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [codeSent, setCodeSent] = useState(false);
  const [isSending, setIsSending] = useState(false);

  // تنظیم حالت اولیه بر اساس مقادیر دریافتی از API
  useEffect(() => {
    if (initialMobile && initialCode) {
      // اگر هر دو مقدار موجود بودند، کادر را در حالت ورود کد تایید نمایش بده
      setPhone(initialMobile);
      setCode(""); // کد را خالی می‌گذاریم تا کاربر وارد کند
      setCodeSent(true);
    } else if (initialMobile && !initialCode) {
      // اگر فقط mobile موجود بود، آن را پر کن اما در حالت ورود شماره بمان
      setPhone(initialMobile);
    }
    // اگر هر دو خالی بودند، حالت پیش‌فرض (ورود شماره تلفن) باقی می‌ماند
  }, [initialMobile, initialCode]);

  // Auto-notify parent when phone or code changes
  useEffect(() => {
    // اگر شماره 10 رقمی است، صفر به اولش اضافه کن
    const normalizedPhone = phone.length === 10 ? `0${phone}` : phone;
    onSupervisorDataChange(normalizedPhone, code);
  }, [phone, code, onSupervisorDataChange]);

  const handleSendCode = async () => {
    if (!phone || phone.length < 10) {
      alert("لطفاً شماره تلفن معتبر وارد کنید");
      return;
    }

    // خواندن workflow_ID از localStorage
    const workflowID = localStorage.getItem('current_workflow_ID');

    if (!workflowID) {
      alert("خطا: شناسه ماموریت یافت نشد. لطفاً دوباره تلاش کنید.");
      return;
    }

    setIsSending(true);

    // اگر شماره 10 رقمی است، صفر به اولش اضافه کن
    const normalizedPhone = phone.length === 10 ? `0${phone}` : phone;

    try {
      // ارسال درخواست به API
      const response = await sendSupervisorCode(normalizedPhone, workflowID);

      if (response.success) {
        setCodeSent(true);
        alert(response.message || `کد تأیید به شماره ${phone} ارسال شد`);
      } else {
        alert(response.message || "خطا در ارسال کد. لطفاً دوباره تلاش کنید.");
      }
    } catch (error) {
      console.error("Error sending supervisor code:", error);
      alert("خطا در ارتباط با سرور. لطفاً دوباره تلاش کنید.");
    } finally {
      setIsSending(false);
    }
  };

  const handleChangePhone = () => {
    setCodeSent(false);
    setCode("");
  };

  return (
    <div
      className="relative overflow-hidden rounded-3xl p-6"
      style={{
        backgroundImage:
          "linear-gradient(180deg, rgba(46, 27, 61, 0.92) 0%, rgba(35, 24, 62, 0.94) 100%), linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)",
        backgroundOrigin: "border-box",
        backgroundClip: "padding-box, border-box",
        border: "0.5px solid transparent",
        boxShadow:
          "0 -7px 20px rgba(7, 0, 18, 0.46), 0 6px 14px rgba(5, 2, 12, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(12, 7, 27, 0.66)",
        backdropFilter: "blur(14px)",
        WebkitBackdropFilter: "blur(14px)",
      }}
    >
      <div className="flex items-center gap-3 mb-4">
        <div
          className="w-10 h-10 rounded-full flex items-center justify-center"
          style={{
            background: "linear-gradient(145deg, #A873FF 0%, #8A52EE 55%, #6637CC 100%)",
            boxShadow: "0 4px 12px rgba(155,108,241,0.45)",
          }}
        >
          <Phone className="w-5 h-5 text-white" />
        </div>
        <div className="flex-1">
          <h3 className="text-base font-bold text-[#FBE7F5]">درخواست معرفی ناظر</h3>
          <p className="mt-0.5 text-sm text-[#EED3EC]/85">
            شماره تلفن ناظر خود را وارد کنید
          </p>
        </div>
      </div>

      <div className="space-y-4">
        <div className="relative">
          <input
            type="tel"
            value={phone}
            onChange={(e) => setPhone(e.target.value.replace(/\D/g, ""))}
            maxLength={11}
            placeholder="09123456789"
            disabled={codeSent}
            className="w-full px-4 py-3 rounded-2xl text-white text-center text-lg font-bold tracking-wider"
            style={{
              background: "rgba(26, 18, 54, 0.6)",
              border: "1px solid rgba(216, 180, 254, 0.45)",
              outline: "none",
            }}
            dir="ltr"
          />
        </div>

        {/* Send Code Button */}
        {!codeSent && (
          <motion.button
            whileTap={{ scale: 0.95 }}
            onClick={handleSendCode}
            disabled={isSending || phone.length < 10}
            className="w-full py-3 rounded-2xl text-white font-bold flex items-center justify-center gap-2"
            style={{
              background: phone.length >= 10
                ? "linear-gradient(135deg, rgba(174, 117, 255, 0.96) 0%, rgba(138, 82, 238, 0.95) 46%, rgba(102, 55, 204, 0.94) 100%)"
                : "linear-gradient(145deg, rgba(72, 58, 105, 0.72) 0%, rgba(42, 35, 77, 0.76) 100%)",
              boxShadow: phone.length >= 10
                ? "0 0 18px rgba(155,108,241,0.4), 0 10px 20px rgba(24, 10, 54, 0.34)"
                : "inset 0 1px 0 rgba(255,255,255,0.12)",
              cursor: phone.length >= 10 ? "pointer" : "not-allowed",
            }}
          >
            {isSending ? (
              <>
                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                در حال ارسال...
              </>
            ) : (
              <>
                <Send className="w-5 h-5" />
                ارسال کد تأیید
              </>
            )}
          </motion.button>
        )}

        {/* Code Input */}
        {codeSent && (
          <>
            <div className="relative">
              <input
                type="text"
                value={code}
                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
                maxLength={6}
                placeholder="کد تأیید را وارد کنید"
                className="w-full px-4 py-3 rounded-2xl text-white text-center text-xl font-bold tracking-widest"
                style={{
                  background: "rgba(10, 20, 35, 0.6)",
                  border: "2px solid rgba(168, 144, 224, 0.4)",
                  outline: "none",
                }}
                dir="ltr"
              />
            </div>

            {/* Change Phone and Resend Code Buttons */}
            <div className="flex gap-2">
              <button
                onClick={handleChangePhone}
                className="flex-1 py-2.5 rounded-2xl text-white/80 text-sm font-bold hover:text-white transition-colors"
                style={{
                  background: "rgba(138, 82, 238, 0.22)",
                  border: "1px solid rgba(216, 180, 254, 0.45)",
                }}
              >
                تغییر شماره
              </button>
              <button
                onClick={() => {
                  setCodeSent(false);
                  setCode("");
                }}
                className="flex-1 py-2.5 rounded-2xl text-white/80 text-sm font-bold hover:text-white transition-colors"
                style={{
                  background: "rgba(138, 82, 238, 0.22)",
                  border: "1px solid rgba(216, 180, 254, 0.45)",
                }}
              >
                ارسال مجدد کد
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}
