'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import { Phone, Star, Flame, LogOut, ShieldOff, Loader2, Lock, CheckCircle2 } from 'lucide-react';
import Mascot from '../Mascot';
import DemoBadge from '../DemoBadge';

export default function ProfileView({
  maskedPhone,
  status,
  subscribedAt,
  stars,
  streak,
}: {
  maskedPhone: string;
  status: string;
  subscribedAt: string | null;
  stars: number;
  streak: number;
}) {
  const router = useRouter();
  const [confirmUnsub, setConfirmUnsub] = useState(false);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  async function logout() {
    setBusy(true);
    try {
      await fetch('/api/logout', { method: 'POST' });
      router.push('/');
    } finally {
      setBusy(false);
    }
  }

  async function unsubscribe() {
    setBusy(true);
    setError('');
    try {
      const res = await fetch('/api/unsubscribe', { method: 'POST' });
      const data = await res.json();
      if (res.ok && data.ok) {
        router.push('/?unsubscribed=1');
        return;
      }
      setError(data.error ?? 'আনসাবস্ক্রাইব করা গেল না।');
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setBusy(false);
    }
  }

  const subscribedDate = subscribedAt
    ? new Date(subscribedAt).toLocaleDateString('bn-BD', { day: 'numeric', month: 'long', year: 'numeric' })
    : null;

  return (
    <main className="mx-auto max-w-lg px-4 pt-6 sm:px-6">
      <div className="flex flex-col items-center text-center">
        <Mascot mood="wave" size={96} />
        <h1 className="mt-3 font-heading text-2xl font-extrabold text-ink">প্রোফাইল</h1>
        <DemoBadge className="mt-1" />
      </div>

      {/* info card */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
        className="mt-5 rounded-3xl bg-white p-5 shadow-card"
      >
        <div className="flex items-center gap-3">
          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-leaf-100 text-leaf-600">
            <Phone className="h-5 w-5" />
          </div>
          <div>
            <p className="text-xs text-ink-faint">ফোন নাম্বার</p>
            <p className="font-heading text-lg font-bold text-ink">{maskedPhone}</p>
          </div>
          <span
            className={`ml-auto flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold ${
              status === 'REGISTERED' ? 'bg-leaf-100 text-leaf-700' : 'bg-cream-200 text-ink-soft'
            }`}
          >
            <CheckCircle2 className="h-3.5 w-3.5" />
            {status === 'REGISTERED' ? 'সক্রিয়' : 'বন্ধ'}
          </span>
        </div>
        {subscribedDate && (
          <p className="mt-3 text-xs text-ink-soft">সাবস্ক্রাইব করেছ: {subscribedDate}</p>
        )}

        <div className="mt-4 grid grid-cols-2 gap-3">
          <div className="rounded-2xl bg-sun-50 p-3 text-center">
            <Star className="mx-auto h-6 w-6 fill-sun-500 text-sun-500" />
            <p className="mt-1 font-heading text-xl font-extrabold text-ink">{stars}</p>
            <p className="text-[11px] text-ink-soft">স্টার</p>
          </div>
          <div className="rounded-2xl bg-mango-50 p-3 text-center">
            <Flame className="mx-auto h-6 w-6 fill-mango-500 text-mango-500" />
            <p className="mt-1 font-heading text-xl font-extrabold text-ink">{streak}</p>
            <p className="text-[11px] text-ink-soft">স্ট্রিক</p>
          </div>
        </div>
      </motion.div>

      {/* actions */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.1 }}
        className="mt-4 space-y-2.5"
      >
        <Link
          href="/app/parent"
          className="flex items-center gap-3 rounded-2xl bg-white px-4 py-3.5 font-semibold text-ink shadow-card transition active:scale-[0.99]"
        >
          <Lock className="h-5 w-5 text-ink-soft" />
          Parent Zone
          <span className="ml-auto text-sm text-ink-faint">PIN দিয়ে সুরক্ষিত</span>
        </Link>

        <button
          onClick={logout}
          disabled={busy}
          className="flex w-full items-center gap-3 rounded-2xl bg-white px-4 py-3.5 font-semibold text-ink shadow-card transition active:scale-[0.99] disabled:opacity-60"
        >
          <LogOut className="h-5 w-5 text-ink-soft" />
          Logout
          <span className="ml-auto text-xs text-ink-faint">সাবস্ক্রিপশন চালু থাকবে</span>
        </button>

        <button
          onClick={() => setConfirmUnsub(true)}
          className="flex w-full items-center gap-3 rounded-2xl bg-white px-4 py-3.5 font-semibold text-mango-700 shadow-card transition active:scale-[0.99]"
        >
          <ShieldOff className="h-5 w-5" />
          Unsubscribe
          <span className="ml-auto text-xs text-ink-faint">দৈনিক চার্জ বন্ধ হবে</span>
        </button>
      </motion.div>

      {/* unsubscribe confirmation modal */}
      <AnimatePresence>
        {confirmUnsub && (
          <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 }}
          >
            <div
              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
              onClick={() => !busy && setConfirmUnsub(false)}
            />
            <motion.div
              role="alertdialog"
              aria-modal="true"
              className="relative w-full max-w-sm rounded-t-4xl bg-cream-50 p-6 shadow-soft sm:rounded-4xl"
              initial={{ y: 40, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: 40, opacity: 0 }}
            >
              <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-mango-100 text-mango-600">
                <ShieldOff className="h-6 w-6" />
              </div>
              <h2 className="text-center font-heading text-xl font-bold text-ink">
                সাবস্ক্রিপশন বাতিল করবে?
              </h2>
              <p className="mt-2 text-center text-sm text-ink-soft">
                তুমি কি সাবস্ক্রিপশন বাতিল করতে চাও? দৈনিক চার্জ বন্ধ হয়ে যাবে এবং অ্যাক্সেস চলে যাবে।
              </p>
              {error && (
                <p className="mt-3 rounded-2xl bg-mango-50 px-3 py-2 text-center text-sm font-medium text-mango-700">
                  {error}
                </p>
              )}
              <div className="mt-5 flex gap-3">
                <button
                  onClick={unsubscribe}
                  disabled={busy}
                  className="flex flex-1 items-center justify-center gap-2 rounded-2xl bg-mango-500 px-4 py-3 font-bold text-white transition active:scale-[0.98] disabled:opacity-60"
                >
                  {busy && <Loader2 className="h-4 w-4 animate-spin" />}
                  বাতিল করো
                </button>
                <button
                  onClick={() => setConfirmUnsub(false)}
                  disabled={busy}
                  className="flex-1 rounded-2xl bg-cream-200 px-4 py-3 font-bold text-ink-soft transition active:scale-[0.98]"
                >
                  থাক
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </main>
  );
}