"use client";

import { useState } from "react";
import { Film, BookOpen, Clapperboard } from "lucide-react";
import StoryboardForm from "@/components/storyboard/StoryboardForm";
import StoryboardOutput from "@/components/storyboard/StoryboardOutput";
import type { StoryboardOutput as StoryboardOutputType } from "@/types/storyboard";

export default function StoryboardPage() {
  const [output, setOutput] = useState<StoryboardOutputType | null>(null);

  return (
    <div className="flex flex-col min-h-full">
      {/* ── Page header ── */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-600 to-blue-600 flex items-center justify-center shadow-lg shadow-violet-500/30">
            <Clapperboard className="w-5 h-5 text-white" />
          </div>
          <div>
            <h1 className="text-xl font-bold">Storyboard Generator</h1>
            <p className="text-sm text-muted-foreground">
              Ubah artikel, postingan media sosial, atau konten web menjadi storyboard visual
            </p>
          </div>
        </div>

        {/* Info badges */}
        <div className="flex flex-wrap gap-2 mt-3">
          {[
            { icon: "🌐", label: "Website / Blog" },
            { icon: "📘", label: "Facebook" },
            { icon: "📸", label: "Instagram" },
            { icon: "🐦", label: "Twitter / X" },
          ].map((item) => (
            <span
              key={item.label}
              className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs bg-accent border border-border text-muted-foreground"
            >
              {item.icon} {item.label}
            </span>
          ))}
        </div>
      </div>

      {/* ── How it works ── (only shown before first generate) */}
      {!output && (
        <div className="grid grid-cols-3 gap-3 mb-6">
          {[
            { step: "1", icon: <Film className="w-4 h-4" />, title: "Paste Link", desc: "Masukkan link artikel, postingan Facebook, Instagram, atau Twitter" },
            { step: "2", icon: <BookOpen className="w-4 h-4" />, title: "AI Memproses", desc: "AI membaca konten & menyusun ulang jadi storyboard tanpa keluar tema" },
            { step: "3", icon: <Clapperboard className="w-4 h-4" />, title: "Siap Diproduksi", desc: "Dapatkan scene list, narasi, deskripsi visual lengkap" },
          ].map((item) => (
            <div key={item.step} className="glass-card rounded-xl p-3 flex flex-col items-center text-center gap-2">
              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-600/30 to-blue-600/30 border border-violet-500/20 flex items-center justify-center text-violet-300">
                {item.icon}
              </div>
              <div>
                <p className="text-xs font-semibold">{item.title}</p>
                <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* ── Main layout ── */}
      <div className={`flex gap-6 flex-col ${output ? "lg:flex-row" : ""}`}>
        {/* Form column */}
        <div className={output ? "lg:w-[380px] flex-shrink-0" : "max-w-2xl w-full mx-auto"}>
          <StoryboardForm
            onResult={(result) => {
              setOutput(result);
              // Scroll to top of output on mobile
              window.scrollTo({ top: 0, behavior: "smooth" });
            }}
          />
        </div>

        {/* Output column */}
        {output && (
          <div className="flex-1 min-w-0">
            <StoryboardOutput
              output={output}
              onReset={() => setOutput(null)}
            />
          </div>
        )}
      </div>
    </div>
  );
}
