'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { Sparkles, Loader2, Volume2, ShieldCheck, MessageSquare } from 'lucide-react';

interface AiSettings {
  enabled: boolean;
  dailyLimit: number;
  features: string[] | 'all';
  voiceEnabled: boolean;
  availableFeatures: string[];
}
interface ChatRow {
  id: number;
  feature: string;
  role: string;
  content: string;
  flagged: number;
  created_at: string;
}

const FEATURE_LABEL: Record<string, string> = {
  buddy: 'AI বন্ধু',
  story: 'গল্পকার',
  practice: 'প্র্যাকটিস',
  draw: 'আঁকা বন্ধু',
  pronounce: 'উচ্চারণ কোচ',
};

export default function ParentAiControls() {
  const [settings, setSettings] = useState<AiSettings | null>(null);
  const [chatLog, setChatLog] = useState<ChatRow[]>([]);
  const [saving, setSaving] = useState(false);
  const [showLog, setShowLog] = useState(false);

  useEffect(() => {
    fetch('/api/parent/ai')
      .then((r) => r.json())
      .then((d) => {
        if (d.ok) {
          setSettings(d.settings);
          setChatLog(d.chatLog ?? []);
        }
      })
      .catch(() => {});
  }, []);

  async function save(patch: Record<string, unknown>) {
    setSaving(true);
    try {
      await fetch('/api/parent/ai', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(patch),
      });
      const r = await fetch('/api/parent/ai');
      const d = await r.json();
      if (d.ok) {
        setSettings(d.settings);
        setChatLog(d.chatLog ?? []);
      }
    } finally {
      setSaving(false);
    }
  }

  if (!settings) {
    return (
      <section className="mt-4 rounded-3xl bg-white p-4 shadow-card">
        <Loader2 className="mx-auto h-6 w-6 animate-spin text-ink-faint" />
      </section>
    );
  }

  const featureOn = (f: string) => settings.features === 'all' || settings.features.includes(f);

  function toggleFeature(f: string) {
    const current =
      settings!.features === 'all' ? [...settings!.availableFeatures] : [...settings!.features];
    const nextArr = current.includes(f) ? current.filter((x) => x !== f) : [...current, f];
    const next =
      nextArr.length === settings!.availableFeatures.length ? 'all' : nextArr;
    save({ features: next });
  }

  return (
    <section className="mt-5 rounded-3xl bg-white p-4 shadow-card">
      <div className="flex items-center gap-2">
        <Sparkles className="h-5 w-5 text-mango-500" />
        <h2 className="font-heading text-lg font-bold text-ink">AI বন্ধু (তারা)</h2>
        {saving && <Loader2 className="ml-auto h-4 w-4 animate-spin text-ink-faint" />}
      </div>
      <p className="mt-1 flex items-center gap-1.5 text-xs text-ink-soft">
        <ShieldCheck className="h-4 w-4 text-leaf-500" />
        নিরাপত্তার জন্য AI ডিফল্টে বন্ধ। তুমি চালু করলে তবেই বাচ্চা ব্যবহার করতে পারবে।
      </p>

      {/* master toggle */}
      <button
        onClick={() => save({ enabled: !settings.enabled })}
        className="mt-4 flex w-full items-center justify-between rounded-2xl bg-cream-50 px-4 py-3"
      >
        <span className="font-semibold text-ink">AI চালু</span>
        <Toggle on={settings.enabled} />
      </button>

      {settings.enabled && (
        <>
          {/* daily limit */}
          <div className="mt-4">
            <p className="mb-2 text-sm font-semibold text-ink">দৈনিক AI ব্যবহার সীমা</p>
            <div className="grid grid-cols-4 gap-2">
              {[10, 20, 40, 100].map((n) => (
                <button
                  key={n}
                  onClick={() => save({ dailyLimit: n })}
                  className={`rounded-2xl px-2 py-2.5 text-sm font-bold transition ${
                    settings.dailyLimit === n ? 'bg-leaf-500 text-white shadow-pop' : 'bg-cream-100 text-ink-soft'
                  }`}
                >
                  {n}
                </button>
              ))}
            </div>
          </div>

          {/* feature toggles */}
          <div className="mt-4 space-y-2">
            <p className="text-sm font-semibold text-ink">কোন AI ফিচার চালু</p>
            {settings.availableFeatures.map((f) => (
              <button
                key={f}
                onClick={() => toggleFeature(f)}
                className="flex w-full items-center justify-between rounded-2xl bg-cream-50 px-4 py-3"
              >
                <span className="font-medium text-ink">{FEATURE_LABEL[f] ?? f}</span>
                <Toggle on={featureOn(f)} />
              </button>
            ))}
          </div>

          {/* voice */}
          <button
            onClick={() => save({ voiceEnabled: !settings.voiceEnabled })}
            className="mt-3 flex w-full items-center justify-between rounded-2xl bg-cream-50 px-4 py-3"
          >
            <span className="flex items-center gap-2 font-semibold text-ink">
              <Volume2 className="h-4 w-4 text-leaf-600" /> ভয়েস (পড়ে শোনানো)
            </span>
            <Toggle on={settings.voiceEnabled} />
          </button>

          {/* chat log review */}
          <button
            onClick={() => setShowLog((v) => !v)}
            className="mt-3 flex w-full items-center gap-2 rounded-2xl bg-cream-50 px-4 py-3 text-left font-semibold text-ink"
          >
            <MessageSquare className="h-4 w-4 text-ink-soft" />
            AI কথোপকথন দেখো ({chatLog.length})
          </button>
          {showLog && (
            <div className="mt-2 max-h-64 space-y-1.5 overflow-y-auto rounded-2xl bg-cream-50 p-3">
              {chatLog.length === 0 && (
                <p className="text-center text-sm text-ink-faint">এখনো কোনো কথোপকথন নেই।</p>
              )}
              {chatLog.map((c) => (
                <div key={c.id} className="text-xs">
                  <span className={`font-semibold ${c.role === 'child' ? 'text-mango-700' : 'text-leaf-700'}`}>
                    {c.role === 'child' ? 'বাচ্চা' : 'তারা'} · {c.feature}:
                  </span>{' '}
                  <span className="text-ink-soft">{c.content}</span>
                  {c.flagged ? <span className="ml-1 text-mango-600">⚠️</span> : null}
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </section>
  );
}

function Toggle({ on }: { on: boolean }) {
  return (
    <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>
  );
}