import { useMemo, useState } from "react";
import { toast } from "sonner";

type Field =
  | { name: string; label: string; type: "text" | "textarea" | "number" | "color"; placeholder?: string; default?: string; hint?: string }
  | { name: string; label: string; type: "select"; options: string[]; default?: string; hint?: string };

export function GenericTool({
  fields,
  build,
  language = "mcfunction",
  helper,
}: {
  fields: Field[];
  build: (values: Record<string, string>) => string;
  language?: string;
  helper?: React.ReactNode;
}) {
  const defaults = useMemo(() => {
    const d: Record<string, string> = {};
    fields.forEach((f) => { d[f.name] = f.default ?? ""; });
    return d;
  }, [fields]);
  const [values, setValues] = useState<Record<string, string>>(defaults);

  let output = "";
  try { output = build(values); } catch (e) { output = `# erro: ${(e as Error).message}`; }

  const copy = async () => {
    await navigator.clipboard.writeText(output);
    toast.success("Copiado!");
  };

  return (
    <div className="grid gap-4 md:grid-cols-2">
      <div className="space-y-3">
        {fields.map((f) => (
          <div key={f.name} className="space-y-1">
            <label className="text-xs uppercase tracking-wider text-muted-foreground pixel" style={{ fontSize: 10 }}>{f.label}</label>
            {f.type === "textarea" ? (
              <textarea
                className="w-full rounded-md bg-input border border-border p-2 mono text-sm min-h-24"
                placeholder={"placeholder" in f ? f.placeholder : ""}
                value={values[f.name] ?? ""}
                onChange={(e) => setValues({ ...values, [f.name]: e.target.value })}
              />
            ) : f.type === "select" ? (
              <select
                className="w-full rounded-md bg-input border border-border p-2 text-sm"
                value={values[f.name] ?? ""}
                onChange={(e) => setValues({ ...values, [f.name]: e.target.value })}
              >
                {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
              </select>
            ) : (
              <input
                type={f.type}
                className="w-full rounded-md bg-input border border-border p-2 mono text-sm"
                placeholder={"placeholder" in f ? f.placeholder : ""}
                value={values[f.name] ?? ""}
                onChange={(e) => setValues({ ...values, [f.name]: e.target.value })}
              />
            )}
            {"hint" in f && f.hint && <p className="text-[10px] text-muted-foreground">{f.hint}</p>}
          </div>
        ))}
        {helper}
      </div>
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <span className="text-xs uppercase tracking-wider text-muted-foreground pixel" style={{ fontSize: 10 }}>Saída ({language})</span>
          <button onClick={copy} className="mc-btn mc-btn-hover rounded-md">Copiar</button>
        </div>
        <pre className="mc-card rounded-md p-3 mono text-xs whitespace-pre-wrap break-all max-h-[420px] overflow-auto">{output || "—"}</pre>
      </div>
    </div>
  );
}