"use client";

import { AlertCircle, Loader2, Wand2 } from "lucide-react";
import { useUGCGenerator }  from "@/hooks/useUGCGenerator";
import { URLExtractStep, UGCProductStep } from "@/components/ugc-generator/UGCProductStep";
import { UGCConfigStep }    from "@/components/ugc-generator/UGCConfigStep";
import UGCOutput            from "@/components/ugc-generator/UGCOutput";

export default function UGCGeneratorPage() {
  const ugc = useUGCGenerator();

  return (
    <div className="max-w-7xl mx-auto">
      {/* Header */}
      <div className="mb-6">
        <div className="flex items-center gap-3 mb-1">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-600/20 to-violet-600/20 border border-pink-500/30 flex items-center justify-center text-xl">
            🎬
          </div>
          <div>
            <h1 className="text-xl font-bold flex items-center gap-2">
              Generator UGC
              <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-gradient-to-r from-pink-600 to-violet-600 text-white">
                NEW
              </span>
            </h1>
            <p className="text-sm text-muted-foreground">
              Buat script &amp; package UGC dari link produk secara otomatis
            </p>
          </div>
        </div>
      </div>

      {/* Two-column layout */}
      <div className="grid lg:grid-cols-2 gap-6">

        {/* ── LEFT: Form ── */}
        <div className="space-y-4">
          {/* Step 1 */}
          <URLExtractStep
            url={ugc.url}
            setUrl={ugc.setUrl}
            extracting={ugc.extracting}
            onExtract={ugc.handleExtract}
          />

          {/* Step 2 */}
          <UGCProductStep
            product={ugc.product}
            extracted={ugc.extracted}
            setField={ugc.setField}
            onClear={ugc.handleClearProduct}
          />

          {/* Step 3 */}
          <UGCConfigStep
            platform={ugc.platform}           setPlatform={ugc.setPlatform}
            durasi={ugc.durasi}               setDurasi={ugc.setDurasi}
            durasiOptions={ugc.durasiOptions}
            gayaBahasa={ugc.gayaBahasa}       setGayaBahasa={ugc.setGayaBahasa}
            presenter={ugc.presenter}         setPresenter={ugc.setPresenter}
            hookStyle={ugc.hookStyle}         setHookStyle={ugc.setHookStyle}
            language={ugc.language}           setLanguage={ugc.setLanguage}
            showAdvanced={ugc.showAdvanced}   setShowAdvanced={ugc.setShowAdvanced}
            brandVoice={ugc.brandVoice}       setBrandVoice={ugc.setBrandVoice}
            customInstructions={ugc.customInstructions}
            setCustomInstructions={ugc.setCustomInstructions}
          />

          {/* Warning: produk kosong */}
          {!ugc.product.namaProduk && !ugc.product.deskripsiProduk && (
            <div className="flex items-start gap-2 rounded-xl p-3 bg-amber-500/8 border border-amber-500/20 text-xs text-amber-300">
              <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
              <span>
                Isi data produk terlebih dahulu, atau tempel link produk di atas untuk ekstrak otomatis.
              </span>
            </div>
          )}

          {/* Generate button */}
          <button
            type="button"
            onClick={ugc.handleGenerate}
            disabled={ugc.generating || !ugc.product.namaProduk.trim()}
            className="w-full flex items-center justify-center gap-2 py-3.5 rounded-xl bg-gradient-to-r from-pink-600 to-violet-600 text-white font-semibold text-sm hover:opacity-90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {ugc.generating
              ? <><Loader2 className="w-4 h-4 animate-spin" />Generating UGC Package…</>
              : <><Wand2 className="w-4 h-4" />Generate UGC Package</>}
          </button>
        </div>

        {/* ── RIGHT: Output ── */}
        <div>
          {ugc.generating && (
            <div className="glass-card rounded-xl p-8 flex flex-col items-center justify-center gap-4 text-center min-h-[300px]">
              <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-600/20 to-violet-600/20 border border-pink-500/30 flex items-center justify-center">
                <Loader2 className="w-7 h-7 animate-spin text-pink-400" />
              </div>
              <div>
                <p className="font-semibold">AI sedang menulis script UGC…</p>
                <p className="text-sm text-muted-foreground mt-1">Biasanya 10–30 detik</p>
              </div>
            </div>
          )}

          {!ugc.generating && ugc.output && (
            <UGCOutput output={ugc.output} onReset={ugc.handleReset} />
          )}

          {!ugc.generating && !ugc.output && (
            <div className="glass-card rounded-xl p-8 flex flex-col items-center justify-center gap-3 text-center min-h-[300px] text-muted-foreground">
              <div className="text-5xl opacity-30">🎬</div>
              <p className="font-medium">UGC Package akan muncul di sini</p>
              <p className="text-sm">Isi data produk dan klik Generate</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
