'use client';

import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ArrowRight, Loader2, ShieldCheck, Smartphone } from 'lucide-react';
import Mascot from './Mascot';
import DemoBadge from './DemoBadge';

type Mode = 'phone' | 'otp' | 'login';

// Only bdapps operators: Robi (018) and Cirkle (016).
const PHONE_RE = /^01[68]\d{8}$/;

export default function SubscribeModal({
  open,
  onClose,
  initialMode = 'phone',
}: {
  open: boolean;
  onClose: () => void;
  initialMode?: Mode;
}) {
  const router = useRouter();
  const [mode, setMode] = useState<Mode>(initialMode);
  const [phone, setPhone] = useState('');
  const [otp, setOtp] = useState('');
  const [referenceNo, setReferenceNo] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [cooldown, setCooldown] = useState(0);
  const firstFieldRef = useRef<HTMLInputElement>(null);

  // reset when opened
  useEffect(() => {
    if (open) {
      setMode(initialMode);
      setPhone('');
      setOtp('');
      setReferenceNo('');
      setError('');
      setLoading(false);
      setCooldown(0);
    }
  }, [open, initialMode]);

  // focus first field
  useEffect(() => {
    if (open) setTimeout(() => firstFieldRef.current?.focus(), 60);
  }, [open, mode]);

  // ESC to close
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  // resend cooldown timer
  useEffect(() => {
    if (cooldown <= 0) return;
    const t = setTimeout(() => setCooldown((c) => c - 1), 1000);
    return () => clearTimeout(t);
  }, [cooldown]);

  async function requestOtp() {
    if (!PHONE_RE.test(phone)) {
      setError('শুধু Robi (018) ও Cirkle (016) নাম্বার চলবে।');
      return;
    }
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/subscribe/request-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone }),
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        setError(data.error ?? 'OTP পাঠানো গেল না।');
        return;
      }
      setReferenceNo(data.referenceNo);
      setMode('otp');
      setCooldown(30);
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setLoading(false);
    }
  }

  async function verifyOtp() {
    if (!/^\d{6}$/.test(otp)) {
      setError('OTP অবশ্যই ৬ ডিজিটের হতে হবে।');
      return;
    }
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/subscribe/verify-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ referenceNo, otp, phone }),
      });
      const data = await res.json();
      if (!res.ok || !data.ok) {
        setError(data.error ?? 'OTP মিলল না।');
        return;
      }
      router.push('/app');
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setLoading(false);
    }
  }

  async function loginExisting() {
    if (!PHONE_RE.test(phone)) {
      setError('শুধু Robi (018) ও Cirkle (016) নাম্বার চলবে।');
      return;
    }
    setError('');
    setLoading(true);
    try {
      const res = await fetch('/api/login-existing', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ phone }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        router.push('/app');
        return;
      }
      if (data.needsSubscribe) {
        setError('এই নাম্বারে subscription পাওয়া যায়নি, নতুন করে subscribe করো।');
        setMode('phone');
        return;
      }
      setError(data.error ?? 'লগইন করা গেল না।');
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setLoading(false);
    }
  }

  const titles: Record<Mode, string> = {
    phone: 'শুরু করো WonderKids',
    otp: 'OTP কনফার্ম করো',
    login: 'আবার ফিরে এসো',
  };
  const subtitles: Record<Mode, string> = {
    phone: 'নাম্বার দাও, আমরা একটা OTP পাঠাবো। কার্ড লাগবে না।',
    otp: `${phone} নাম্বারে পাঠানো ৬-ডিজিট কোডটা দাও।`,
    login: 'আগে সাবস্ক্রাইব করেছ? শুধু নাম্বার দাও, OTP লাগবে না।',
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-[60] flex items-end justify-center sm:items-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          {/* backdrop */}
          <div
            className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
            onClick={onClose}
            aria-hidden
          />

          {/* sheet / dialog */}
          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label={titles[mode]}
            className="relative w-full max-w-md rounded-t-4xl bg-cream-50 p-6 shadow-soft sm:rounded-4xl sm:p-8"
            initial={{ y: 40, opacity: 0, scale: 0.98 }}
            animate={{ y: 0, opacity: 1, scale: 1 }}
            exit={{ y: 40, opacity: 0 }}
            transition={{ type: 'spring', stiffness: 320, damping: 30 }}
          >
            <button
              onClick={onClose}
              className="absolute right-4 top-4 rounded-full p-2 text-ink-soft transition hover:bg-cream-200"
              aria-label="বন্ধ করো"
            >
              <X className="h-5 w-5" />
            </button>

            <div className="mb-4 flex items-center gap-3">
              <Mascot mood="wave" size={56} />
              <div>
                <h2 className="text-xl text-ink">{titles[mode]}</h2>
                <DemoBadge className="mt-1" />
              </div>
            </div>
            <p className="mb-5 text-sm leading-relaxed text-ink-soft">{subtitles[mode]}</p>

            {error && (
              <div className="mb-4 rounded-2xl bg-mango-50 px-4 py-3 text-sm font-medium text-mango-700">
                {error}
              </div>
            )}

            {/* PHONE / LOGIN input */}
            {(mode === 'phone' || mode === 'login') && (
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  mode === 'phone' ? requestOtp() : loginExisting();
                }}
              >
                <label className="mb-2 block text-sm font-semibold text-ink">ফোন নাম্বার</label>
                <input
                  ref={firstFieldRef}
                  inputMode="numeric"
                  autoComplete="tel"
                  placeholder="০১৮XXXXXXXX"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value.replace(/[^\d]/g, '').slice(0, 11))}
                  className="w-full rounded-2xl border-2 border-cream-200 bg-white px-4 py-3.5 text-lg tracking-wide text-ink outline-none transition focus:border-mango-500"
                />
                <p className="mt-2 flex items-center gap-1.5 text-xs text-ink-faint">
                  <Smartphone className="h-3.5 w-3.5" />
                  শুধু <b className="text-ink-soft">Robi (018)</b> ও <b className="text-ink-soft">Cirkle (016)</b> নাম্বার
                </p>
                <button
                  type="submit"
                  disabled={loading}
                  className="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-mango-500 px-5 py-3.5 text-base font-bold text-white shadow-pop transition active:scale-[0.98] disabled:opacity-60"
                >
                  {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : null}
                  {mode === 'phone' ? 'OTP পাঠাও' : 'লগইন করো'}
                  {!loading && <ArrowRight className="h-5 w-5" />}
                </button>

                <button
                  type="button"
                  onClick={() => {
                    setError('');
                    setMode(mode === 'phone' ? 'login' : 'phone');
                  }}
                  className="mt-4 w-full text-center text-sm font-medium text-leaf-600 underline-offset-2 hover:underline"
                >
                  {mode === 'phone'
                    ? 'আগে সাবস্ক্রাইব করেছ? লগইন করো'
                    : 'নতুন? সাবস্ক্রাইব করো'}
                </button>
              </form>
            )}

            {/* OTP input */}
            {mode === 'otp' && (
              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  verifyOtp();
                }}
              >
                <label className="mb-2 block text-sm font-semibold text-ink">OTP কোড</label>
                <input
                  ref={firstFieldRef}
                  inputMode="numeric"
                  autoComplete="one-time-code"
                  placeholder="● ● ● ● ● ●"
                  value={otp}
                  onChange={(e) => setOtp(e.target.value.replace(/[^\d]/g, '').slice(0, 6))}
                  className="w-full rounded-2xl border-2 border-cream-200 bg-white px-4 py-3.5 text-center text-2xl tracking-[0.4em] text-ink outline-none transition focus:border-mango-500"
                />
                <button
                  type="submit"
                  disabled={loading}
                  className="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-leaf-500 px-5 py-3.5 text-base font-bold text-white shadow-pop transition active:scale-[0.98] disabled:opacity-60"
                >
                  {loading ? <Loader2 className="h-5 w-5 animate-spin" /> : null}
                  কনফার্ম করো
                </button>

                <div className="mt-4 flex items-center justify-between text-sm">
                  <button
                    type="button"
                    onClick={() => {
                      setMode('phone');
                      setError('');
                    }}
                    className="font-medium text-ink-soft hover:text-ink"
                  >
                    ← নাম্বার বদলাও
                  </button>
                  <button
                    type="button"
                    disabled={cooldown > 0 || loading}
                    onClick={requestOtp}
                    className="font-semibold text-leaf-600 disabled:text-ink-faint"
                  >
                    {cooldown > 0 ? `আবার পাঠাও (${cooldown}স)` : 'আবার OTP পাঠাও'}
                  </button>
                </div>
              </form>
            )}

            <div className="mt-6 flex items-center justify-center gap-1.5 text-xs text-ink-faint">
              <ShieldCheck className="h-4 w-4 text-leaf-500" />
              নিরাপদ, কোনো বিজ্ঞাপন নেই, যেকোনো সময় বন্ধ করা যাবে
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}