'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { BookOpen, Play, ImageIcon, ChevronRight, Plus, Layers, Sparkles, X, Loader2, Pin } from 'lucide-react';

interface DeckSummary {
  id: number;
  slug: string;
  title: string;
  title_cn: string | null;
  client: string | null;
  sections: string[];
  slide_count: number;
  asset_count: number;
  updated_at: string;
  created_at: string;
}

interface GenerateForm {
  topic: string;
  audience: string;
  purpose: string;
  slide_count: string;
  style: string;
  language: string;
  client: string;
}

const DEFAULT_FORM: GenerateForm = {
  topic: '',
  audience: '',
  purpose: '',
  slide_count: '15',
  style: 'professional',
  language: 'en',
  client: '',
};

export default function PresentationDeckListPage() {
  const router = useRouter();
  const [decks, setDecks] = useState<DeckSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const [showGenerate, setShowGenerate] = useState(false);
  const [form, setForm] = useState<GenerateForm>(DEFAULT_FORM);
  const [generating, setGenerating] = useState(false);
  const [genError, setGenError] = useState('');

  useEffect(() => {
    fetch('/api/presentation-deck')
      .then(async r => {
        const data = await r.json();
        if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`);
        setDecks(Array.isArray(data) ? data : data.decks ?? []);
        setLoading(false);
      })
      .catch(e => {
        setError(e instanceof Error ? e.message : 'Failed to load decks');
        setLoading(false);
      });
  }, []);

  const totalSlides = decks.reduce((s, d) => s + (d.slide_count ?? 0), 0);
  const totalAssets = decks.reduce((s, d) => s + (d.asset_count ?? 0), 0);

  async function handleGenerate(e: React.FormEvent) {
    e.preventDefault();
    if (!form.topic.trim()) return;
    setGenerating(true);
    setGenError('');
    try {
      const res = await fetch('/api/presentation-deck/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...form,
          slide_count: parseInt(form.slide_count, 10) || 15,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
      // Navigate to the new deck's slides view
      router.push(`/presentation-deck/${data.slug}/slides`);
    } catch (err) {
      setGenError(err instanceof Error ? err.message : 'Generation failed');
      setGenerating(false);
    }
  }

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      {/* Header */}
      <div className="border-b border-slate-800/60 bg-slate-900/60 backdrop-blur-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Layers className="w-5 h-5 text-red-400" />
            <div>
              <div className="text-xs text-slate-500 font-medium tracking-wide uppercase">5 Miles Lab</div>
              <div className="text-sm font-semibold text-slate-100">Presentation Deck Builder</div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Link
              href="/presentation-deck/library"
              className="flex items-center gap-2 text-slate-400 hover:text-slate-200 text-sm px-3 py-2 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors"
            >
              <ImageIcon className="w-3.5 h-3.5" />
              Image Library
            </Link>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-6 py-8">
        {/* Hero */}
        <div className="mb-8 flex items-start justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-slate-100 mb-2">Presentation Decks</h1>
            <p className="text-slate-400 mb-4">
              AI-generated tender and pitch decks for client proposals
            </p>
            {!loading && decks.length > 0 && (
              <div className="flex items-center gap-6 text-sm text-slate-500">
                <span><span className="text-slate-300 font-medium">{decks.length}</span> deck{decks.length !== 1 ? 's' : ''}</span>
                <span>·</span>
                <span><span className="text-slate-300 font-medium">{totalSlides}</span> slides</span>
                <span>·</span>
                <span><span className="text-slate-300 font-medium">{totalAssets}</span> generated assets</span>
              </div>
            )}
          </div>
          <button
            onClick={() => { setShowGenerate(true); setGenError(''); }}
            className="flex items-center gap-2 bg-red-600 hover:bg-red-500 text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors shrink-0"
          >
            <Sparkles className="w-4 h-4" />
            Generate New Deck
          </button>
        </div>

        {/* Generate panel */}
        {showGenerate && (
          <div className="mb-8 bg-slate-800/60 border border-slate-700/50 rounded-xl p-6">
            <div className="flex items-center justify-between mb-5">
              <div className="flex items-center gap-2">
                <Sparkles className="w-4 h-4 text-red-400" />
                <h2 className="text-sm font-semibold text-slate-100">Generate Deck with AI</h2>
              </div>
              <button
                onClick={() => setShowGenerate(false)}
                className="text-slate-500 hover:text-slate-300 transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
            </div>

            <form onSubmit={handleGenerate} className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Topic *</label>
                  <input
                    type="text"
                    required
                    value={form.topic}
                    onChange={e => setForm(f => ({ ...f, topic: e.target.value }))}
                    placeholder="e.g. Tender Proposal for Print & Lettershop Services"
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:border-red-500/50"
                  />
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Target Audience</label>
                  <input
                    type="text"
                    value={form.audience}
                    onChange={e => setForm(f => ({ ...f, audience: e.target.value }))}
                    placeholder="e.g. Procurement committee"
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:border-red-500/50"
                  />
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Purpose</label>
                  <input
                    type="text"
                    value={form.purpose}
                    onChange={e => setForm(f => ({ ...f, purpose: e.target.value }))}
                    placeholder="e.g. Win the tender bid"
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:border-red-500/50"
                  />
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Client</label>
                  <input
                    type="text"
                    value={form.client}
                    onChange={e => setForm(f => ({ ...f, client: e.target.value }))}
                    placeholder="e.g. CLP Power HK"
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 placeholder-slate-600 focus:outline-none focus:border-red-500/50"
                  />
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Number of Slides</label>
                  <input
                    type="number"
                    min={5}
                    max={40}
                    value={form.slide_count}
                    onChange={e => setForm(f => ({ ...f, slide_count: e.target.value }))}
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-red-500/50"
                  />
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Style</label>
                  <select
                    value={form.style}
                    onChange={e => setForm(f => ({ ...f, style: e.target.value }))}
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-red-500/50"
                  >
                    <option value="professional">Professional</option>
                    <option value="pitch">Startup Pitch</option>
                    <option value="executive">Executive Brief</option>
                    <option value="educational">Educational</option>
                    <option value="sales">Sales Deck</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs text-slate-400 mb-1.5 font-medium">Language</label>
                  <select
                    value={form.language}
                    onChange={e => setForm(f => ({ ...f, language: e.target.value }))}
                    className="w-full bg-slate-900/60 border border-slate-700/50 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:border-red-500/50"
                  >
                    <option value="en">English</option>
                    <option value="zh">Traditional Chinese</option>
                    <option value="bilingual">Bilingual (EN + ZH)</option>
                  </select>
                </div>
              </div>

              {genError && (
                <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg p-3">
                  {genError}
                </div>
              )}

              <div className="flex items-center gap-3 pt-1">
                <button
                  type="submit"
                  disabled={generating || !form.topic.trim()}
                  className="flex items-center gap-2 bg-red-600 hover:bg-red-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors"
                >
                  {generating ? (
                    <>
                      <Loader2 className="w-4 h-4 animate-spin" />
                      Generating deck…
                    </>
                  ) : (
                    <>
                      <Sparkles className="w-4 h-4" />
                      Generate
                    </>
                  )}
                </button>
                {generating && (
                  <span className="text-xs text-slate-500">
                    DeepSeek is writing your slides — usually 20–40 seconds
                  </span>
                )}
              </div>
            </form>
          </div>
        )}

        {/* Pinned static decks (always visible, no DB required) */}
        <div className="mb-6">
          <div className="flex items-center gap-2 mb-3">
            <Pin className="w-3.5 h-3.5 text-slate-500" />
            <span className="text-xs text-slate-500 font-medium uppercase tracking-wide">Pinned Decks</span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            <div className="bg-slate-800/60 rounded-xl border border-red-500/20 hover:border-red-500/40 p-6 transition-all hover:bg-slate-800/80 flex flex-col">
              <div className="flex items-start justify-between mb-3">
                <span className="text-xs text-slate-500 font-medium uppercase tracking-wide">TEDxXinyi</span>
                <span className="text-xs text-slate-600 font-mono bg-slate-900/50 px-2 py-0.5 rounded">tedxxinyisalon</span>
              </div>
              <h2 className="font-semibold text-slate-100 text-base leading-snug mb-1">TEDxXinyiSalon</h2>
              <p className="text-sm text-slate-500 mb-1">蓄勢軌跡 × 奇點世界</p>
              <p className="text-xs text-slate-600 mb-4">2026.03.31 · 台北表演藝術中心</p>
              <div className="flex items-center gap-4 text-xs text-slate-500 mb-4 mt-auto">
                <span className="flex items-center gap-1"><BookOpen className="w-3 h-3" />21 slides</span>
                <span>5 sections</span>
              </div>
              <div className="flex items-center gap-2 mt-auto pt-1">
                <Link
                  href="/presentation-deck/tedxxinyisalon"
                  className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors"
                >
                  <ChevronRight className="w-3 h-3" />
                  Manage
                </Link>
                <Link
                  href="/presentation-deck/tedxxinyisalon/slides"
                  className="flex items-center gap-1.5 text-xs font-medium bg-red-600 hover:bg-red-500 text-white px-3 py-1.5 rounded-lg transition-colors"
                >
                  <Play className="w-3 h-3" />
                  Present
                </Link>
                <Link
                  href="/presentation-deck/tedxxinyisalon/manifest"
                  className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors ml-auto"
                >
                  <ImageIcon className="w-3 h-3" />
                  Images
                </Link>
              </div>
            </div>
            <div className="bg-slate-800/60 rounded-xl border border-blue-500/20 hover:border-blue-500/40 p-6 transition-all hover:bg-slate-800/80 flex flex-col">
              <div className="flex items-start justify-between mb-3">
                <span className="text-xs text-slate-500 font-medium uppercase tracking-wide">CLP Power</span>
                <span className="text-xs text-slate-600 font-mono bg-slate-900/50 px-2 py-0.5 rounded">2603CLPtender</span>
              </div>
              <h2 className="font-semibold text-slate-100 text-base leading-snug mb-1">CLP Tender Proposal</h2>
              <p className="text-sm text-slate-500 mb-1">Print & Lettershop Services</p>
              <p className="text-xs text-slate-600 mb-4">March 2026 · 5 Miles Lab</p>
              <div className="flex items-center gap-4 text-xs text-slate-500 mb-4 mt-auto">
                <span className="flex items-center gap-1"><BookOpen className="w-3 h-3" />— slides</span>
                <span>8 sections</span>
              </div>
              <div className="flex items-center gap-2 mt-auto pt-1">
                <Link
                  href="/presentation-deck/2603CLPtender"
                  className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors"
                >
                  <ChevronRight className="w-3 h-3" />
                  Manage
                </Link>
                <Link
                  href="/presentation-deck/2603CLPtender/slides"
                  className="flex items-center gap-1.5 text-xs font-medium bg-red-600 hover:bg-red-500 text-white px-3 py-1.5 rounded-lg transition-colors"
                >
                  <Play className="w-3 h-3" />
                  Present
                </Link>
                <Link
                  href="/presentation-deck/2603CLPtender/manifest"
                  className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors ml-auto"
                >
                  <ImageIcon className="w-3 h-3" />
                  Images
                </Link>
              </div>
            </div>
          </div>
        </div>

        {/* DB Decks */}
        <div className="flex items-center gap-2 mb-3">
          <span className="text-xs text-slate-500 font-medium uppercase tracking-wide">All Decks</span>
        </div>

        {/* Deck list */}
        {loading && (
          <div className="flex items-center justify-center py-24">
            <div className="text-slate-500 text-sm">Loading decks…</div>
          </div>
        )}

        {error && (
          <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-xl p-4 mb-4">
            API error: {error}
          </div>
        )}

        {!loading && !error && decks.length === 0 && !showGenerate && (
          <div className="flex flex-col items-center justify-center py-24 text-center">
            <BookOpen className="w-10 h-10 text-slate-700 mb-4" />
            <p className="text-slate-400 mb-2">No decks yet</p>
            <p className="text-slate-600 text-sm mb-6">
              Generate a deck with AI or seed one from a data file.
            </p>
            <button
              onClick={() => setShowGenerate(true)}
              className="flex items-center gap-2 bg-red-600 hover:bg-red-500 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"
            >
              <Sparkles className="w-4 h-4" />
              Generate First Deck
            </button>
          </div>
        )}

        {!loading && decks.length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            {decks.map(deck => (
              <div
                key={deck.slug}
                className="bg-slate-800/60 rounded-xl border border-slate-700/50 hover:border-slate-600 p-6 transition-all hover:bg-slate-800/80 flex flex-col"
              >
                {/* Client + slug */}
                <div className="flex items-start justify-between mb-3">
                  <span className="text-xs text-slate-500 font-medium uppercase tracking-wide">
                    {deck.client ?? 'Unknown Client'}
                  </span>
                  <span className="text-xs text-slate-600 font-mono bg-slate-900/50 px-2 py-0.5 rounded">
                    {deck.slug}
                  </span>
                </div>

                {/* Title */}
                <h2 className="font-semibold text-slate-100 text-base leading-snug mb-1">
                  {deck.title}
                </h2>
                {deck.title_cn && (
                  <p className="text-sm text-slate-500 mb-4">{deck.title_cn}</p>
                )}

                {/* Stats */}
                <div className="flex items-center gap-4 text-xs text-slate-500 mb-4 mt-auto">
                  <span className="flex items-center gap-1">
                    <BookOpen className="w-3 h-3" />
                    {deck.slide_count ?? 0} slides
                  </span>
                  <span className="flex items-center gap-1">
                    <ImageIcon className="w-3 h-3" />
                    {deck.asset_count ?? 0} assets
                  </span>
                  {deck.sections?.length > 0 && (
                    <span>{deck.sections.length} sections</span>
                  )}
                </div>

                {/* Updated */}
                {deck.updated_at && (
                  <p className="text-xs text-slate-600 mb-4">
                    Updated {new Date(deck.updated_at).toLocaleDateString('en-HK', {
                      year: 'numeric', month: 'short', day: 'numeric'
                    })}
                  </p>
                )}

                {/* Actions */}
                <div className="flex items-center gap-2 mt-auto pt-1">
                  <Link
                    href={`/presentation-deck/${deck.slug}`}
                    className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors"
                  >
                    <ChevronRight className="w-3 h-3" />
                    Deck
                  </Link>
                  <Link
                    href={`/presentation-deck/${deck.slug}/slides`}
                    className="flex items-center gap-1.5 text-xs font-medium bg-red-600 hover:bg-red-500 text-white px-3 py-1.5 rounded-lg transition-colors"
                  >
                    <Play className="w-3 h-3" />
                    Present
                  </Link>
                  <Link
                    href={`/presentation-deck/library?deck=${deck.slug}`}
                    className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 px-3 py-1.5 rounded-lg border border-slate-700/50 hover:border-slate-600 transition-colors ml-auto"
                  >
                    <ImageIcon className="w-3 h-3" />
                    Assets
                  </Link>
                </div>
              </div>
            ))}

            {/* "Add new" placeholder */}
            <button
              onClick={() => { setShowGenerate(true); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
              className="bg-white/[0.02] rounded-xl border border-dashed border-slate-700/50 hover:border-slate-600 p-6 flex flex-col items-center justify-center text-center min-h-[200px] transition-colors cursor-pointer"
            >
              <Plus className="w-8 h-8 text-slate-700 mb-3" />
              <p className="text-slate-500 text-sm font-medium mb-1">New Deck</p>
              <p className="text-slate-600 text-xs">
                Generate with AI or seed from data file
              </p>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}