"use client";

import { Link2, Loader2, Sparkles, X } from "lucide-react";
import type { ExtractedProduct } from "@/types/ugc-generator";

// ─── Shared primitives ────────────────────────────────────────────────────────
export const inputCls    = "w-full px-3 py-2.5 rounded-xl bg-accent border border-border focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 text-sm transition-colors";
export const textareaCls = `${inputCls} resize-none`;

function FieldRow({ label, required, children }: {
  label: string;
  required?: boolean;
  children: React.ReactNode;
}) {
  return (
    <div>
      <label className="text-xs font-medium text-muted-foreground mb-1.5 block">
        {label} {required && <span className="text-red-400">*</span>}
      </label>
      {children}
    </div>
  );
}

// ─── Step 1: URL extract ──────────────────────────────────────────────────────
interface URLExtractStepProps {
  url: string;
  setUrl: (v: string) => void;
  extracting: boolean;
  onExtract: () => void;
}

export function URLExtractStep({ url, setUrl, extracting, onExtract }: URLExtractStepProps) {
  return (
    <div className="glass-card rounded-xl p-4 space-y-3">
      <div className="flex items-center gap-2 mb-1">
        <div className="w-5 h-5 rounded-full bg-pink-500/20 text-pink-400 text-xs font-bold flex items-center justify-center border border-pink-500/30">
          1
        </div>
        <h3 className="text-sm font-semibold">Ekstrak dari Link Produk</h3>
        <span className="text-[10px] text-muted-foreground">(opsional)</span>
      </div>

      <div className="flex gap-2">
        <div className="relative flex-1">
          <Link2 className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
          <input
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") onExtract(); }}
            placeholder="https://shopee.co.id/produk... atau Tokopedia, website"
            className="w-full pl-9 pr-3 py-2.5 rounded-xl bg-accent border border-border focus:border-pink-500 focus:outline-none text-sm transition-colors"
          />
        </div>
        <button
          type="button"
          onClick={onExtract}
          disabled={extracting || !url.trim()}
          className="flex items-center gap-1.5 px-4 py-2.5 rounded-xl bg-gradient-to-r from-pink-600 to-violet-600 text-white text-sm font-medium hover:opacity-90 transition-all disabled:opacity-50 flex-shrink-0"
        >
          {extracting
            ? <><Loader2 className="w-3.5 h-3.5 animate-spin" />Ekstrak</>
            : <><Sparkles className="w-3.5 h-3.5" />Ekstrak</>}
        </button>
      </div>

      {extracting && (
        <p className="text-xs text-muted-foreground text-center">
          AI sedang membaca dan menganalisa halaman produk…
        </p>
      )}
    </div>
  );
}

// ─── Step 2: Product data form ────────────────────────────────────────────────
interface UGCProductStepProps {
  product: ExtractedProduct;
  extracted: boolean;
  setField: (key: keyof ExtractedProduct, val: string) => void;
  onClear: () => void;
}

export function UGCProductStep({ product, extracted, setField, onClear }: UGCProductStepProps) {
  return (
    <div className="glass-card rounded-xl p-4 space-y-3">
      <div className="flex items-center justify-between mb-1">
        <div className="flex items-center gap-2">
          <div className="w-5 h-5 rounded-full bg-violet-500/20 text-violet-400 text-xs font-bold flex items-center justify-center border border-violet-500/30">
            2
          </div>
          <h3 className="text-sm font-semibold">Data Produk</h3>
          {extracted && (
            <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
              ✓ Auto-filled
            </span>
          )}
        </div>
        {extracted && (
          <button
            type="button"
            onClick={onClear}
            className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
          >
            <X className="w-3 h-3" /> Reset
          </button>
        )}
      </div>

      {/* Nama + Kategori */}
      <div className="grid grid-cols-2 gap-3">
        <FieldRow label="Nama Produk" required>
          <input
            value={product.namaProduk}
            onChange={(e) => setField("namaProduk", e.target.value)}
            placeholder="Glad2Glow Centella"
            className={inputCls}
          />
        </FieldRow>
        <FieldRow label="Kategori">
          <input
            value={product.kategori}
            onChange={(e) => setField("kategori", e.target.value)}
            placeholder="Skincare / Beauty"
            className={inputCls}
          />
        </FieldRow>
      </div>

      {/* Deskripsi */}
      <FieldRow label="Deskripsi Produk" required>
        <textarea
          value={product.deskripsiProduk}
          onChange={(e) => setField("deskripsiProduk", e.target.value)}
          placeholder="Deskripsikan produk secara singkat dan jelas..."
          rows={3}
          className={textareaCls}
        />
      </FieldRow>

      {/* Pain Point */}
      <FieldRow label="Masalah Target Konsumen (Pain Point)">
        <textarea
          value={product.masalahPainPoint}
          onChange={(e) => setField("masalahPainPoint", e.target.value)}
          placeholder="Masalah apa yang dialami target konsumen?"
          rows={2}
          className={textareaCls}
        />
      </FieldRow>

      {/* Manfaat + Fitur */}
      <div className="grid grid-cols-2 gap-3">
        <FieldRow label="Manfaat Utama">
          <input
            value={product.manfaatUtama}
            onChange={(e) => setField("manfaatUtama", e.target.value)}
            placeholder="Menenangkan kulit sensitif..."
            className={inputCls}
          />
        </FieldRow>
        <FieldRow label="Fitur / Kandungan">
          <input
            value={product.fiturKandungan}
            onChange={(e) => setField("fiturKandungan", e.target.value)}
            placeholder="Mengandung Centella Asiatica..."
            className={inputCls}
          />
        </FieldRow>
      </div>

      {/* Target + Harga */}
      <div className="grid grid-cols-2 gap-3">
        <FieldRow label="Target Audiens">
          <input
            value={product.targetAudiens}
            onChange={(e) => setField("targetAudiens", e.target.value)}
            placeholder="Remaja dan dewasa muda"
            className={inputCls}
          />
        </FieldRow>
        <FieldRow label="Harga">
          <input
            value={product.harga ?? ""}
            onChange={(e) => setField("harga", e.target.value)}
            placeholder="Rp 89.000"
            className={inputCls}
          />
        </FieldRow>
      </div>
    </div>
  );
}
