"use client";

import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import type {
  UGCPlatform, UGCLanguageStyle, UGCPresenter, UGCHookStyle,
} from "@/types/ugc-generator";
import {
  UGC_PLATFORMS, UGC_LANGUAGE_STYLES, UGC_PRESENTERS, UGC_HOOK_STYLES,
} from "@/types/ugc-generator";
import { inputCls, textareaCls } from "./UGCProductStep";

interface UGCConfigStepProps {
  platform: UGCPlatform;
  setPlatform: (v: UGCPlatform) => void;
  durasi: string;
  setDurasi: (v: string) => void;
  durasiOptions: string[];
  gayaBahasa: UGCLanguageStyle;
  setGayaBahasa: (v: UGCLanguageStyle) => void;
  presenter: UGCPresenter;
  setPresenter: (v: UGCPresenter) => void;
  hookStyle: UGCHookStyle;
  setHookStyle: (v: UGCHookStyle) => void;
  language: "id" | "en";
  setLanguage: (v: "id" | "en") => void;
  showAdvanced: boolean;
  setShowAdvanced: (v: boolean) => void;
  brandVoice: string;
  setBrandVoice: (v: string) => void;
  customInstructions: string;
  setCustomInstructions: (v: string) => void;
}

export function UGCConfigStep({
  platform, setPlatform,
  durasi, setDurasi, durasiOptions,
  gayaBahasa, setGayaBahasa,
  presenter, setPresenter,
  hookStyle, setHookStyle,
  language, setLanguage,
  showAdvanced, setShowAdvanced,
  brandVoice, setBrandVoice,
  customInstructions, setCustomInstructions,
}: UGCConfigStepProps) {
  return (
    <div className="glass-card rounded-xl p-4 space-y-4">
      {/* Step badge */}
      <div className="flex items-center gap-2 mb-1">
        <div className="w-5 h-5 rounded-full bg-cyan-500/20 text-cyan-400 text-xs font-bold flex items-center justify-center border border-cyan-500/30">
          3
        </div>
        <h3 className="text-sm font-semibold">Konfigurasi Output</h3>
      </div>

      {/* Platform */}
      <div>
        <p className="text-xs font-medium text-muted-foreground mb-2">Platform</p>
        <div className="grid grid-cols-3 gap-2 sm:grid-cols-5">
          {(Object.entries(UGC_PLATFORMS) as [UGCPlatform, typeof UGC_PLATFORMS[UGCPlatform]][]).map(([key, info]) => (
            <button
              key={key}
              type="button"
              onClick={() => { setPlatform(key); setDurasi(info.durations[1] ?? info.durations[0]); }}
              className={cn(
                "flex flex-col items-center gap-1 py-2.5 rounded-xl border text-center transition-all text-[10px] font-medium",
                platform === key
                  ? "border-pink-500 bg-pink-500/10 text-pink-300"
                  : "border-border bg-accent/40 text-muted-foreground hover:border-pink-500/40 hover:text-foreground"
              )}
            >
              <span className="text-lg">{info.icon}</span>
              <span className="leading-tight">{info.label.replace(" ", "\n")}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Durasi + Presenter */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <p className="text-xs font-medium text-muted-foreground mb-2">Durasi</p>
          <div className="flex flex-wrap gap-1.5">
            {durasiOptions.map((d) => (
              <button
                key={d}
                type="button"
                onClick={() => setDurasi(d)}
                className={cn(
                  "px-3 py-1.5 rounded-lg border text-xs font-medium transition-all",
                  durasi === d
                    ? "border-cyan-500 bg-cyan-500/10 text-cyan-300"
                    : "border-border bg-accent/50 text-muted-foreground hover:border-cyan-500/40"
                )}
              >
                {d}
              </button>
            ))}
          </div>
        </div>
        <div>
          <p className="text-xs font-medium text-muted-foreground mb-2">Presenter</p>
          <div className="flex flex-wrap gap-1.5">
            {(Object.entries(UGC_PRESENTERS) as [UGCPresenter, typeof UGC_PRESENTERS[UGCPresenter]][]).map(([key, info]) => (
              <button
                key={key}
                type="button"
                onClick={() => setPresenter(key)}
                className={cn(
                  "flex items-center gap-1 px-2 py-1.5 rounded-lg border text-xs font-medium transition-all",
                  presenter === key
                    ? "border-violet-500 bg-violet-500/10 text-violet-300"
                    : "border-border bg-accent/50 text-muted-foreground hover:border-violet-500/40"
                )}
              >
                {info.icon} {info.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Gaya Bahasa */}
      <div>
        <p className="text-xs font-medium text-muted-foreground mb-2">Gaya Bahasa</p>
        <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
          {(Object.entries(UGC_LANGUAGE_STYLES) as [UGCLanguageStyle, typeof UGC_LANGUAGE_STYLES[UGCLanguageStyle]][]).map(([key, info]) => (
            <button
              key={key}
              type="button"
              onClick={() => setGayaBahasa(key)}
              className={cn(
                "flex items-start gap-2 px-3 py-2 rounded-lg border text-left transition-all",
                gayaBahasa === key
                  ? "border-amber-500 bg-amber-500/10"
                  : "border-border bg-accent/40 hover:border-amber-500/40"
              )}
            >
              <div>
                <p className={cn("text-xs font-semibold", gayaBahasa === key ? "text-amber-300" : "text-foreground")}>
                  {info.label}
                </p>
                <p className="text-[10px] text-muted-foreground leading-tight mt-0.5">{info.desc}</p>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Hook Style */}
      <div>
        <p className="text-xs font-medium text-muted-foreground mb-2">Style Hook</p>
        <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
          {(Object.entries(UGC_HOOK_STYLES) as [UGCHookStyle, typeof UGC_HOOK_STYLES[UGCHookStyle]][]).map(([key, info]) => (
            <button
              key={key}
              type="button"
              onClick={() => setHookStyle(key)}
              className={cn(
                "flex flex-col gap-0.5 px-3 py-2 rounded-lg border text-left transition-all",
                hookStyle === key
                  ? "border-rose-500 bg-rose-500/10"
                  : "border-border bg-accent/40 hover:border-rose-500/40"
              )}
            >
              <p className={cn("text-xs font-semibold", hookStyle === key ? "text-rose-300" : "text-foreground")}>
                {info.label}
              </p>
              <p className="text-[10px] text-muted-foreground leading-tight italic">{info.example}</p>
            </button>
          ))}
        </div>
      </div>

      {/* Language toggle */}
      <div className="flex items-center gap-3">
        <p className="text-xs font-medium text-muted-foreground">Bahasa Output:</p>
        <div className="flex rounded-lg bg-accent overflow-hidden">
          {(["id", "en"] as const).map((l) => (
            <button
              key={l}
              type="button"
              onClick={() => setLanguage(l)}
              className={cn(
                "px-3 py-1.5 text-xs font-medium transition-colors",
                language === l
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:text-foreground"
              )}
            >
              {l === "id" ? "🇮🇩 Indonesia" : "🇬🇧 English"}
            </button>
          ))}
        </div>
      </div>

      {/* Advanced options */}
      <div className="border border-border/40 rounded-xl overflow-hidden">
        <button
          type="button"
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="w-full flex items-center justify-between px-3 py-2.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
        >
          <span className="font-medium">Opsi Lanjutan</span>
          <ChevronDown className={cn("w-3.5 h-3.5 transition-transform", showAdvanced && "rotate-180")} />
        </button>
        {showAdvanced && (
          <div className="px-3 pb-3 space-y-3 border-t border-border/40">
            <div className="pt-3">
              <label className="text-xs text-muted-foreground mb-1.5 block">Brand Voice / Persona Presenter</label>
              <input
                value={brandVoice}
                onChange={(e) => setBrandVoice(e.target.value)}
                placeholder="Misal: cheerful, energik, trustworthy, relatable..."
                className={inputCls}
              />
            </div>
            <div>
              <label className="text-xs text-muted-foreground mb-1.5 block">Instruksi Khusus</label>
              <textarea
                value={customInstructions}
                onChange={(e) => setCustomInstructions(e.target.value)}
                placeholder="Arahan tambahan untuk AI..."
                rows={2}
                className={textareaCls}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
