'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, Loader2, Wand2, RefreshCw } from 'lucide-react';
import Mascot from '../Mascot';
import SpeakButton from '../SpeakButton';
import DemoBadge from '../DemoBadge';

const IDEAS = ['সাহসী সিংহ', 'বন্ধুত্ব', 'সত্যি বলা', 'একটা জাদুর গাছ', 'ছোট্ট রকেট', 'সাহায্য করা'];

export default function AiStory({ savedStories }: { savedStories: { id: number; title: string }[] }) {
  const router = useRouter();
  const [topic, setTopic] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [story, setStory] = useState<{ title: string; body: string } | null>(null);

  async function make(t: string) {
    setBusy(true);
    setError('');
    setStory(null);
    try {
      const res = await fetch('/api/ai/story', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ topic: t, save: true }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        setStory(data.story);
      } else {
        setError(data.error ?? 'গল্প বানানো গেল না।');
      }
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="min-h-dvh pb-24 lg:pb-0 lg:pl-24">
      <header className="sticky top-0 z-30 bg-cream/90 px-4 pb-3 pt-4 backdrop-blur sm:px-6">
        <div className="mx-auto flex max-w-2xl items-center gap-3">
          <button
            onClick={() => router.push('/app/ai')}
            aria-label="ফিরে যাও"
            className="rounded-full p-2 text-ink-soft transition hover:bg-cream-200"
          >
            <ArrowLeft className="h-5 w-5" />
          </button>
          <h1 className="font-heading text-xl font-extrabold text-ink">AI গল্পকার</h1>
          <DemoBadge className="ml-auto" />
        </div>
      </header>

      <main className="mx-auto max-w-2xl px-4 pt-4 sm:px-6">
        {!story && !busy && (
          <>
            <div className="flex items-center gap-3">
              <Mascot mood="happy" size={56} />
              <p className="rounded-2xl bg-white px-4 py-2 text-sm font-medium text-ink-soft shadow-card">
                কোন বিষয়ে গল্প শুনতে চাও? লিখো বা একটা বেছে নাও ✨
              </p>
            </div>

            <form
              onSubmit={(e) => {
                e.preventDefault();
                make(topic);
              }}
              className="mt-4"
            >
              <input
                value={topic}
                onChange={(e) => setTopic(e.target.value.slice(0, 60))}
                placeholder="যেমন: সাহসী খরগোশ"
                className="w-full rounded-2xl border-2 border-cream-200 bg-white px-4 py-3.5 text-lg text-ink outline-none transition focus:border-mango-500"
              />
              <button
                type="submit"
                className="mt-3 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]"
              >
                <Wand2 className="h-5 w-5" /> গল্প বানাও
              </button>
            </form>

            <div className="mt-4 flex flex-wrap gap-2">
              {IDEAS.map((idea) => (
                <button
                  key={idea}
                  onClick={() => {
                    setTopic(idea);
                    make(idea);
                  }}
                  className="rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-ink-soft shadow-card transition active:scale-95"
                >
                  {idea}
                </button>
              ))}
            </div>

            {savedStories.length > 0 && (
              <div className="mt-6">
                <h2 className="mb-2 font-heading text-sm font-bold text-ink-faint">আগের গল্প</h2>
                <div className="flex flex-wrap gap-2">
                  {savedStories.map((s) => (
                    <span key={s.id} className="rounded-full bg-cream-100 px-3 py-1.5 text-xs text-ink-soft">
                      {s.title}
                    </span>
                  ))}
                </div>
              </div>
            )}
          </>
        )}

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

        {busy && (
          <div className="mt-10 flex flex-col items-center gap-3 text-ink-soft">
            <Loader2 className="h-10 w-10 animate-spin text-mango-500" />
            তারা গল্প ভাবছে…
          </div>
        )}

        <AnimatePresence>
          {story && (
            <motion.div
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              className="mt-4 rounded-4xl bg-white p-6 shadow-card"
            >
              <div className="flex items-start justify-between gap-3">
                <h2 className="font-heading text-2xl font-extrabold text-ink">{story.title}</h2>
                <SpeakButton text={`${story.title}। ${story.body}`} autoPlay />
              </div>
              <p className="mt-3 text-lg leading-relaxed text-ink">{story.body}</p>

              <div className="mt-6 flex gap-3">
                <button
                  onClick={() => make(topic || 'বন্ধুত্ব')}
                  className="flex flex-1 items-center justify-center gap-2 rounded-2xl bg-mango-500 px-4 py-3 font-bold text-white shadow-pop transition active:scale-[0.98]"
                >
                  <RefreshCw className="h-5 w-5" /> আরেকটা গল্প
                </button>
                <button
                  onClick={() => {
                    setStory(null);
                    setTopic('');
                  }}
                  className="rounded-2xl bg-cream-200 px-4 py-3 font-bold text-ink-soft transition active:scale-[0.98]"
                >
                  নতুন বিষয়
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </main>
    </div>
  );
}