'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
  BarChart,
  Bar,
  XAxis,
  ResponsiveContainer,
  Cell,
  Tooltip,
} from 'recharts';
import {
  Lock,
  ArrowLeft,
  Clock,
  Loader2,
  ShieldOff,
  AlertTriangle,
  Timer,
  ToggleLeft,
} from 'lucide-react';
import Mascot from '../Mascot';
import ParentAiControls from './ParentAiControls';

const DAY_LABELS = ['রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহ', 'শুক্র', 'শনি'];

interface SubjectStat {
  id: string;
  name: string;
  accent: 'mango' | 'leaf' | 'sun';
  lessonsCompleted: number;
  totalLessons: number;
  totalStars: number;
  totalSeconds: number;
  progressPct: number;
}

interface ParentData {
  subjects: SubjectStat[];
  weakestSubjectId: string | null;
  weekly: { day: number; seconds: number }[];
  secondsToday: number;
  secondsWeek: number;
  settings: { dailyLimitMinutes: number | null; enabledSubjects: string[] | 'all' };
}

const BAR_COLOR: Record<string, string> = { mango: '#FF8B5E', leaf: '#4DC08B', sun: '#FFC94A' };

function fmtDuration(seconds: number): string {
  const m = Math.round(seconds / 60);
  if (m < 60) return `${m} মিনিট`;
  const h = Math.floor(m / 60);
  const rem = m % 60;
  return rem ? `${h} ঘণ্টা ${rem} মিনিট` : `${h} ঘণ্টা`;
}

export default function ParentPanel() {
  const router = useRouter();
  const [phase, setPhase] = useState<'loading' | 'set' | 'enter' | 'ready'>('loading');
  const [pin, setPin] = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);
  const [data, setData] = useState<ParentData | null>(null);

  useEffect(() => {
    fetch('/api/parent/pin')
      .then((r) => r.json())
      .then((d) => {
        if (!d.ok) {
          router.push('/app');
          return;
        }
        if (d.unlocked) {
          setPhase('ready');
          loadData();
        } else {
          setPhase(d.hasPin ? 'enter' : 'set');
        }
      })
      .catch(() => router.push('/app'));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function loadData() {
    const res = await fetch('/api/parent/data');
    if (res.ok) {
      setData(await res.json());
    }
  }

  async function submitPin(action: 'set' | 'verify') {
    if (!/^\d{4}$/.test(pin)) {
      setError('PIN অবশ্যই ৪ ডিজিটের হতে হবে।');
      return;
    }
    setBusy(true);
    setError('');
    try {
      const res = await fetch('/api/parent/pin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action, pin }),
      });
      const d = await res.json();
      if (res.ok && d.ok) {
        setPin('');
        setPhase('ready');
        await loadData();
      } else {
        setError(d.error ?? 'কিছু একটা সমস্যা হয়েছে।');
      }
    } catch {
      setError('নেটওয়ার্ক সমস্যা।');
    } finally {
      setBusy(false);
    }
  }

  /* ------------------------------ PIN gate ------------------------------ */
  if (phase === 'loading') {
    return (
      <div className="flex min-h-dvh items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-ink-faint" />
      </div>
    );
  }

  if (phase === 'set' || phase === 'enter') {
    const isSet = phase === 'set';
    return (
      <div className="mx-auto flex min-h-dvh max-w-sm flex-col justify-center px-6">
        <Link href="/app" className="mb-6 inline-flex items-center gap-1 text-sm font-medium text-ink-soft">
          <ArrowLeft className="h-4 w-4" /> অ্যাপে ফিরে যাও
        </Link>
        <div className="rounded-3xl bg-white p-6 shadow-card">
          <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-mango-100 text-mango-600">
            <Lock className="h-7 w-7" />
          </div>
          <h1 className="text-center font-heading text-2xl font-extrabold text-ink">
            {isSet ? 'Parent PIN সেট করো' : 'Parent Zone'}
          </h1>
          <p className="mt-1 text-center text-sm text-ink-soft">
            {isSet
              ? 'বাচ্চা যেন সেটিংস বদলাতে না পারে, তাই একটা ৪-ডিজিট PIN দাও।'
              : 'তোমার ৪-ডিজিট PIN দাও।'}
          </p>

          <form
            onSubmit={(e) => {
              e.preventDefault();
              submitPin(isSet ? 'set' : 'verify');
            }}
          >
            <input
              inputMode="numeric"
              autoFocus
              value={pin}
              onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 4))}
              placeholder="● ● ● ●"
              className="mt-5 w-full rounded-2xl border-2 border-cream-200 bg-cream-50 px-4 py-3.5 text-center text-2xl tracking-[0.5em] outline-none transition focus:border-mango-500"
            />
            {error && <p className="mt-3 text-center text-sm font-medium text-mango-700">{error}</p>}
            <button
              type="submit"
              disabled={busy}
              className="mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-mango-500 px-5 py-3.5 font-bold text-white shadow-pop transition active:scale-[0.98] disabled:opacity-60"
            >
              {busy && <Loader2 className="h-5 w-5 animate-spin" />}
              {isSet ? 'PIN সেট করো' : 'খোলো'}
            </button>
          </form>
        </div>
      </div>
    );
  }

  /* ----------------------------- dashboard ----------------------------- */
  return <ParentDashboard data={data} reload={loadData} />;
}

function ParentDashboard({ data, reload }: { data: ParentData | null; reload: () => void }) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [confirmUnsub, setConfirmUnsub] = useState(false);
  const [busy, setBusy] = useState(false);

  if (!data) {
    return (
      <div className="flex min-h-dvh items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-ink-faint" />
      </div>
    );
  }

  const enabled = data.settings.enabledSubjects;
  const isEnabled = (id: string) => enabled === 'all' || enabled.includes(id);
  const limit = data.settings.dailyLimitMinutes;

  async function save(body: Record<string, unknown>) {
    setSaving(true);
    try {
      await fetch('/api/parent/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      await reload();
    } finally {
      setSaving(false);
    }
  }

  function setLimit(mins: number | null) {
    save({ dailyLimitMinutes: mins });
  }

  function toggleSubject(id: string) {
    const currentIds =
      enabled === 'all' ? data!.subjects.map((s) => s.id) : [...enabled];
    const next = currentIds.includes(id)
      ? currentIds.filter((x) => x !== id)
      : [...currentIds, id];
    save({ enabledSubjects: next });
  }

  async function unsubscribe() {
    setBusy(true);
    try {
      const res = await fetch('/api/unsubscribe', { method: 'POST' });
      if (res.ok) router.push('/?unsubscribed=1');
    } finally {
      setBusy(false);
    }
  }

  const chartData = data.weekly.map((d) => ({
    label: DAY_LABELS[d.day],
    minutes: Math.round(d.seconds / 60),
    day: d.day,
  }));
  const todayIdx = new Date().getDay();

  return (
    <div className="mx-auto max-w-3xl px-4 py-5 sm:px-6">
      <div className="flex items-center gap-3">
        <Link href="/app" className="rounded-full p-2 text-ink-soft transition hover:bg-cream-200">
          <ArrowLeft className="h-5 w-5" />
        </Link>
        <div>
          <h1 className="font-heading text-2xl font-extrabold text-ink">Parent Panel</h1>
          <p className="text-sm text-ink-soft">বাচ্চার progress ও control</p>
        </div>
        {saving && <Loader2 className="ml-auto h-5 w-5 animate-spin text-ink-faint" />}
      </div>

      {/* time summary */}
      <div className="mt-5 grid grid-cols-2 gap-3">
        <div className="rounded-3xl bg-leaf-50 p-4">
          <Clock className="h-6 w-6 text-leaf-600" />
          <p className="mt-2 font-heading text-2xl font-extrabold text-ink">
            {fmtDuration(data.secondsToday)}
          </p>
          <p className="text-xs text-ink-soft">আজ পড়েছে</p>
        </div>
        <div className="rounded-3xl bg-sun-50 p-4">
          <Timer className="h-6 w-6 text-sun-600" />
          <p className="mt-2 font-heading text-2xl font-extrabold text-ink">
            {fmtDuration(data.secondsWeek)}
          </p>
          <p className="text-xs text-ink-soft">এই সপ্তাহে</p>
        </div>
      </div>

      {/* weekly chart */}
      <section className="mt-4 rounded-3xl bg-white p-4 shadow-card">
        <h2 className="font-heading text-lg font-bold text-ink">সাপ্তাহিক activity</h2>
        <p className="text-xs text-ink-soft">কোন দিন কত মিনিট পড়েছে</p>
        <div className="mt-3 h-40">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={chartData} margin={{ top: 8, right: 4, left: 4, bottom: 0 }}>
              <XAxis
                dataKey="label"
                tickLine={false}
                axisLine={false}
                tick={{ fontSize: 12, fill: '#9A9089' }}
              />
              <Tooltip
                cursor={{ fill: 'rgba(0,0,0,0.03)' }}
                contentStyle={{ borderRadius: 12, border: 'none', boxShadow: '0 4px 20px -8px rgba(0,0,0,0.2)' }}
                formatter={(v: number) => [`${v} মিনিট`, 'সময়']}
                labelFormatter={() => ''}
              />
              <Bar dataKey="minutes" radius={[8, 8, 8, 8]} maxBarSize={34}>
                {chartData.map((d) => (
                  <Cell key={d.day} fill={d.day === todayIdx ? '#FF8B5E' : '#FFC3A8'} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </section>

      {/* weakest subject highlight */}
      {data.weakestSubjectId && (
        <div className="mt-4 flex items-start gap-3 rounded-3xl bg-mango-50 p-4">
          <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-mango-600" />
          <div>
            <p className="font-semibold text-mango-700">সবচেয়ে বেশি মনোযোগ দরকার</p>
            <p className="text-sm text-ink-soft">
              <b className="text-ink">
                {data.subjects.find((s) => s.id === data.weakestSubjectId)?.name}
              </b>{' '}
              বিষয়ে progress সবচেয়ে কম। বাচ্চাকে এখানে একটু উৎসাহ দাও।
            </p>
          </div>
        </div>
      )}

      {/* subject breakdown */}
      <section className="mt-4">
        <h2 className="mb-2 font-heading text-lg font-bold text-ink">বিষয়ভিত্তিক progress</h2>
        <div className="space-y-2.5">
          {data.subjects.map((s) => (
            <div key={s.id} className="rounded-2xl bg-white p-4 shadow-card">
              <div className="flex items-center justify-between">
                <span className="font-semibold text-ink">{s.name}</span>
                <span className="text-xs text-ink-soft">
                  {s.lessonsCompleted}/{s.totalLessons} লেসন · {s.totalStars}⭐
                </span>
              </div>
              <div className="mt-2 h-2 overflow-hidden rounded-full bg-cream-200">
                <div
                  className="h-full rounded-full"
                  style={{ width: `${s.progressPct}%`, backgroundColor: BAR_COLOR[s.accent] }}
                />
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* controls: daily limit */}
      <section className="mt-5 rounded-3xl bg-white p-4 shadow-card">
        <h2 className="font-heading text-lg font-bold text-ink">দৈনিক screen-time limit</h2>
        <p className="text-xs text-ink-soft">লিমিট পার হলে বাচ্চা পরদিন আবার খেলতে পারবে।</p>
        <div className="mt-3 grid grid-cols-4 gap-2">
          {[30, 60, 90, null].map((m) => (
            <button
              key={String(m)}
              onClick={() => setLimit(m)}
              className={`rounded-2xl px-2 py-2.5 text-sm font-bold transition active:scale-95 ${
                limit === m
                  ? 'bg-leaf-500 text-white shadow-pop'
                  : 'bg-cream-100 text-ink-soft'
              }`}
            >
              {m === null ? 'আনলিমিটেড' : `${m} মিঃ`}
            </button>
          ))}
        </div>
      </section>

      {/* controls: subject visibility */}
      <section className="mt-4 rounded-3xl bg-white p-4 shadow-card">
        <div className="flex items-center gap-2">
          <ToggleLeft className="h-5 w-5 text-ink-soft" />
          <h2 className="font-heading text-lg font-bold text-ink">কোন বিষয় দেখা যাবে</h2>
        </div>
        <div className="mt-3 space-y-2">
          {data.subjects.map((s) => {
            const on = isEnabled(s.id);
            return (
              <button
                key={s.id}
                onClick={() => toggleSubject(s.id)}
                className="flex w-full items-center justify-between rounded-2xl bg-cream-50 px-4 py-3"
              >
                <span className="font-semibold text-ink">{s.name}</span>
                <span
                  className={`relative h-6 w-11 rounded-full transition ${
                    on ? 'bg-leaf-500' : 'bg-cream-200'
                  }`}
                >
                  <motion.span
                    layout
                    className="absolute top-0.5 h-5 w-5 rounded-full bg-white shadow"
                    animate={{ left: on ? 22 : 2 }}
                  />
                </span>
              </button>
            );
          })}
        </div>
      </section>

      {/* AI controls */}
      <ParentAiControls />

      {/* unsubscribe */}
      <button
        onClick={() => setConfirmUnsub(true)}
        className="mt-5 flex w-full items-center justify-center gap-2 rounded-2xl border-2 border-mango-200 bg-white px-4 py-3.5 font-bold text-mango-700 transition active:scale-[0.99]"
      >
        <ShieldOff className="h-5 w-5" /> সাবস্ক্রিপশন বাতিল করো
      </button>

      {confirmUnsub && (
        <div className="fixed inset-0 z-[60] flex items-end justify-center sm:items-center">
          <div className="absolute inset-0 bg-ink/40 backdrop-blur-sm" onClick={() => !busy && setConfirmUnsub(false)} />
          <motion.div
            initial={{ y: 40, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            className="relative w-full max-w-sm rounded-t-4xl bg-cream-50 p-6 shadow-soft sm:rounded-4xl"
          >
            <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>
            <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 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"
              >
                থাক
              </button>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}