'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { BookHeart, Infinity as InfinityIcon, MessageCircleHeart, Palette, Mic, Lock, ShieldCheck, Sparkles } from 'lucide-react';
import BottomNav from '../app/BottomNav';
import Mascot from '../Mascot';
import { bn } from '@/lib/bn';

interface FeatureCard {
  key: string;
  href: string;
  title: string;
  desc: string;
  icon: typeof BookHeart;
  accent: string;
  soon?: boolean;
}

const CARDS: FeatureCard[] = [
  { key: 'story', href: '/app/ai/story', title: 'AI গল্পকার', desc: 'পছন্দের টপিকে ছোট গল্প শোনো', icon: BookHeart, accent: 'bg-mango-100 text-mango-600' },
  { key: 'practice', href: '/app/ai/practice', title: 'অসীম প্র্যাকটিস', desc: 'যত খুশি নতুন প্রশ্ন', icon: InfinityIcon, accent: 'bg-leaf-100 text-leaf-600' },
  { key: 'buddy', href: '/app/ai/buddy', title: 'AI বন্ধু', desc: 'প্রশ্ন করো, তারা উত্তর দেবে', icon: MessageCircleHeart, accent: 'bg-sun-100 text-sun-600' },
  { key: 'draw', href: '/app/ai/draw', title: 'আঁকা বন্ধু', desc: 'এঁকে তারাকে দেখাও', icon: Palette, accent: 'bg-mango-100 text-mango-600' },
  { key: 'pronounce', href: '/app/ai/pronounce', title: 'উচ্চারণ কোচ', desc: 'বলে বলে শেখা', icon: Mic, accent: 'bg-leaf-100 text-leaf-600' },
];

export default function AiHub({
  enabled,
  features,
  usedToday,
  dailyLimit,
}: {
  enabled: boolean;
  features: Record<string, boolean>;
  usedToday: number;
  dailyLimit: number;
}) {
  return (
    <div className="min-h-dvh pb-24 lg:pb-0 lg:pl-24">
      <main className="mx-auto max-w-2xl px-4 pt-6 sm:px-6">
        <div className="flex flex-col items-center text-center">
          <Mascot mood="happy" size={88} />
          <h1 className="mt-3 flex items-center gap-2 font-heading text-2xl font-extrabold text-ink">
            <Sparkles className="h-6 w-6 text-mango-500" /> AI বন্ধু তারা
          </h1>
          <p className="text-sm text-ink-soft">তারার সাথে শেখা আরও মজার!</p>
        </div>

        {!enabled ? (
          <div className="mt-6 flex flex-col items-center gap-3 rounded-3xl bg-white p-6 text-center shadow-card">
            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-mango-100 text-mango-600">
              <Lock className="h-7 w-7" />
            </div>
            <h2 className="font-heading text-lg font-bold text-ink">AI এখন বন্ধ আছে</h2>
            <p className="max-w-sm text-sm text-ink-soft">
              নিরাপত্তার জন্য AI ফিচারগুলো বাবা-মা চালু করে দিতে হয়। Parent Zone-এ গিয়ে PIN
              দিয়ে AI চালু করো।
            </p>
            <Link
              href="/app/parent"
              className="mt-1 rounded-2xl bg-mango-500 px-5 py-3 font-bold text-white shadow-pop transition active:scale-[0.98]"
            >
              Parent Zone-এ যাও
            </Link>
          </div>
        ) : (
          <>
            <div className="mt-4 flex items-center justify-center gap-2 text-xs text-ink-faint">
              <ShieldCheck className="h-4 w-4 text-leaf-500" />
              নিরাপদ ও তত্ত্বাবধানে · আজ {bn(usedToday)}/{bn(dailyLimit)} বার
            </div>

            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
              {CARDS.map((c, i) => {
                const on = features[c.key] && !c.soon;
                const Icon = c.icon;
                const card = (
                  <motion.div
                    initial={{ opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: i * 0.05 }}
                    className={`flex items-center gap-3 rounded-3xl p-4 shadow-card ${
                      on ? 'bg-white active:scale-[0.99]' : 'bg-cream-100'
                    }`}
                  >
                    <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${c.accent}`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <div className="flex-1">
                      <h3 className="font-heading text-base font-bold text-ink">{c.title}</h3>
                      <p className="text-xs text-ink-soft">{c.desc}</p>
                    </div>
                    {c.soon ? (
                      <span className="rounded-full bg-cream-200 px-2 py-1 text-[10px] font-semibold text-ink-faint">
                        শীঘ্রই
                      </span>
                    ) : !features[c.key] ? (
                      <Lock className="h-4 w-4 text-ink-faint" />
                    ) : null}
                  </motion.div>
                );
                return on ? (
                  <Link key={c.key} href={c.href}>
                    {card}
                  </Link>
                ) : (
                  <div key={c.key} aria-disabled>
                    {card}
                  </div>
                );
              })}
            </div>
          </>
        )}
      </main>
      <BottomNav />
    </div>
  );
}