import { Trash2 } from "lucide-react";
import { cn } from "../../lib/utils";
import {
  type EffectDraft,
  type EffectKind,
  EFFECT_META,
  inputCls,
} from "./ItemStudioTypes";
import { Field } from "./ItemStudioShared";
import { LootboxEditor } from "./LootboxEditor";

// ===== Effect Editor =====

export function EffectEditor({
  effect,
  onChange,
  onRemove,
}: {
  effect: EffectDraft;
  onChange: (updated: EffectDraft) => void;
  onRemove: () => void;
}) {
  const update = (fields: Partial<EffectDraft>) =>
    onChange({ ...effect, ...fields });

  const resetFields = {
    amount: "",
    multiplier: "",
    durationSeconds: "",
    roleId: "",
    message: "",
    pool: [],
  };

  const EffectIcon = EFFECT_META[effect.kind].icon;
  const isLootbox = effect.kind === "LOOTBOX";

  return (
    <div
      className={cn(
        "border rounded-lg p-4 space-y-3",
        isLootbox
          ? "bg-amber-500/5 border-amber-500/25"
          : "bg-raised/20 border-border"
      )}
    >
      <div className="flex items-center gap-2">
        <EffectIcon
          className={cn(
            "w-4 h-4 shrink-0",
            isLootbox ? "text-amber-400" : "text-primary"
          )}
        />
        <select
          value={effect.kind}
          onChange={(e) =>
            update({ kind: e.target.value as EffectKind, ...resetFields })
          }
          className={cn(
            "flex-1 bg-input border border-border rounded-md px-3 py-1.5 text-sm text-foreground",
            "focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors"
          )}
        >
          {(Object.keys(EFFECT_META) as EffectKind[]).map((kind) => (
            <option key={kind} value={kind}>
              {EFFECT_META[kind].label}
            </option>
          ))}
        </select>
        <button
          onClick={onRemove}
          className="p-1.5 rounded-md text-text-tertiary hover:text-destructive hover:bg-destructive/10 transition-colors"
          title="Remove effect"
        >
          <Trash2 className="w-4 h-4" />
        </button>
      </div>

      {(effect.kind === "ADD_XP" || effect.kind === "ADD_BALANCE") && (
        <Field label="Amount">
          <input
            type="number"
            min="1"
            value={effect.amount}
            onChange={(e) => update({ amount: e.target.value })}
            placeholder="e.g. 100"
            className={inputCls}
          />
        </Field>
      )}

      {effect.kind === "REPLY_MESSAGE" && (
        <Field label="Message">
          <textarea
            value={effect.message}
            onChange={(e) => update({ message: e.target.value })}
            placeholder="The message the bot will reply with..."
            rows={2}
            className={cn(inputCls, "resize-none")}
          />
        </Field>
      )}

      {effect.kind === "XP_BOOST" && (
        <div className="grid grid-cols-2 gap-3">
          <Field label="Multiplier (x)">
            <input
              type="number"
              min="1"
              step="0.1"
              value={effect.multiplier}
              onChange={(e) => update({ multiplier: e.target.value })}
              placeholder="e.g. 2"
              className={inputCls}
            />
          </Field>
          <Field label="Duration (sec, 0 = permanent)">
            <input
              type="number"
              min="0"
              value={effect.durationSeconds}
              onChange={(e) => update({ durationSeconds: e.target.value })}
              placeholder="e.g. 3600"
              className={inputCls}
            />
          </Field>
        </div>
      )}

      {effect.kind === "TEMP_ROLE" && (
        <div className="grid grid-cols-2 gap-3">
          <Field label="Role ID">
            <input
              type="text"
              value={effect.roleId}
              onChange={(e) => update({ roleId: e.target.value })}
              placeholder="Discord role ID"
              className={inputCls}
            />
          </Field>
          <Field label="Duration (sec, 0 = permanent)">
            <input
              type="number"
              min="0"
              value={effect.durationSeconds}
              onChange={(e) => update({ durationSeconds: e.target.value })}
              placeholder="e.g. 86400"
              className={inputCls}
            />
          </Field>
        </div>
      )}

      {effect.kind === "COLOR_ROLE" && (
        <Field label="Role ID">
          <input
            type="text"
            value={effect.roleId}
            onChange={(e) => update({ roleId: e.target.value })}
            placeholder="Discord role ID"
            className={inputCls}
          />
        </Field>
      )}

      {effect.kind === "LOOTBOX" && (
        <LootboxEditor
          pool={effect.pool}
          onChange={(pool) => update({ pool })}
        />
      )}
    </div>
  );
}
