import { redirect } from 'next/navigation';
import Link from 'next/link';
import { Sparkles, ListChecks, History } from 'lucide-react';
import { getCurrentUser } from '@/lib/auth';
import { prisma } from '@/lib/prisma';

export const dynamic = 'force-dynamic';

export default async function AIIndexPage() {
  const user = await getCurrentUser();
  if (!user) redirect('/auth/login');

  const prefs = await prisma.userPreferences.findUnique({
    where: { userId: user.id },
    select: { aiProvider: true, aiModel: true },
  });
  const aiConfigured = !!prefs?.aiProvider && !!prefs?.aiModel;

  const cards = [
    {
      href: '/main/ai/generate',
      icon: Sparkles,
      title: 'Generate program',
      blurb:
        'Pick a template, describe what you want, and get a full multi-week program back. Review before applying.',
      disabled: !aiConfigured,
    },
    {
      href: '/main/ai/templates',
      icon: ListChecks,
      title: 'Prompt templates',
      blurb:
        'Built-in templates ship with the app. Create + save your own for repeated use.',
    },
    {
      href: '/main/ai/history',
      icon: History,
      title: 'Generation history',
      blurb: 'Every prompt you sent, every response, every applied program.',
    },
  ];

  return (
    <div className="min-h-screen bg-[#0A0A0A]">
      <div className="border-b border-zinc-800">
        <div className="max-w-3xl mx-auto px-4 py-4 sm:py-6 flex items-center justify-between">
          <h1 className="text-2xl sm:text-3xl font-bold text-white">AI</h1>
          <p className="text-xs text-zinc-500">
            {aiConfigured ? (
              <>
                {prefs!.aiProvider} · {prefs!.aiModel}
              </>
            ) : (
              <Link href="/main/settings" className="underline">
                Configure in Settings →
              </Link>
            )}
          </p>
        </div>
      </div>
      <div className="max-w-3xl mx-auto px-4 py-6 grid gap-3">
        {cards.map((c) => {
          const Icon = c.icon;
          const disabled = !!c.disabled;
          return (
            <Link
              key={c.href}
              href={disabled ? '/main/settings' : c.href}
              className={`block bg-zinc-900 border border-zinc-800 rounded p-5 hover:border-zinc-700 transition ${disabled ? 'opacity-60' : ''}`}
            >
              <div className="flex items-start gap-3">
                <Icon className="w-5 h-5 text-zinc-400 mt-0.5" />
                <div>
                  <h2 className="text-base font-semibold text-white">
                    {c.title}
                    {disabled && (
                      <span className="ml-2 text-[10px] uppercase tracking-wider text-amber-400">
                        configure first
                      </span>
                    )}
                  </h2>
                  <p className="text-sm text-zinc-500 mt-1">{c.blurb}</p>
                </div>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}
