import type { ToolOptionsSchema, ToolOptionValue, ToolOptionsValue } from "../../core/plugins/plugin-types";
import { Input } from "../ui/Input";
import { Select } from "../ui/Select";
import { Slider } from "../ui/Slider";

interface ToolOptionsPanelTints {
  paper: string;
  ink: string;
  neon: string;
}

export function ToolOptionsPanel({
  schema,
  value,
  onChange,
  dark,
  tints,
  toolCategory
}: {
  schema: ToolOptionsSchema;
  value: ToolOptionsValue;
  onChange: (val: ToolOptionsValue) => void;
  dark?: boolean;
  tints?: ToolOptionsPanelTints;
  toolCategory?: string;
}) {
  const isDark = dark ?? false;

  const handleFieldChange = (key: string, val: ToolOptionValue) => {
    onChange({ ...value, [key]: val });
  };

  const isWasm = toolCategory === 'image' || toolCategory === 'pdf';

  return (
    <div className="flex flex-col gap-[14px] rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-[16px] h-full min-h-[240px]">
      <div className="font-mono text-[10px] text-[var(--p-muted)] tracking-wider uppercase">
        options
      </div>

      <div className="flex flex-col gap-[14px] flex-1 overflow-y-auto pr-1">
        {schema.fields.map((field) => {
          const currentVal = value[field.key] ?? field.defaultValue;

          return (
            <div key={field.key} className="flex flex-col gap-1.5">
              <span className="font-sans text-[13px] text-[var(--p-text)]">
                {field.label}
              </span>
              
              {field.type === "text" && (
                <Input
                  value={String(currentVal ?? "")}
                  placeholder={field.placeholder}
                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
                />
              )}

              {field.type === "number" && (
                <Input
                  type="number"
                  min={field.min}
                  max={field.max}
                  step={field.step}
                  value={Number(currentVal)}
                  onChange={(e) => handleFieldChange(field.key, Number(e.target.value))}
                />
              )}

              {field.type === "boolean" && (
                <label className="flex items-center gap-2 rounded-lg border border-[var(--p-border)] bg-[var(--p-surface)] px-3 py-2 text-[13px] text-[var(--p-text)]">
                  <input
                    type="checkbox"
                    checked={currentVal === true}
                    onChange={(e) => handleFieldChange(field.key, e.target.checked)}
                    className="h-4 w-4 accent-[var(--p-accent)]"
                  />
                  <span>{currentVal === true ? "Enabled" : "Disabled"}</span>
                </label>
              )}

              {field.type === "select" && field.options && (
                <Select
                  value={String(currentVal)}
                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
                  options={field.options}
                />
              )}

              {field.type === "slider" && (
                <Slider
                  min={field.min}
                  max={field.max}
                  step={field.step}
                  value={Number(currentVal)}
                  onChange={(e) => handleFieldChange(field.key, Number(e.target.value))}
                />
              )}
            </div>
          );
        })}
      </div>

      <div className="mt-auto pt-[12px] border-t border-dashed border-[var(--p-border)] flex items-center justify-between">
        <span className="font-mono text-[10px] text-[var(--p-muted)]">
          engine
        </span>
        <span 
          className="font-mono text-[11px]"
          style={{ color: isDark ? tints?.neon : tints?.ink }}
        >
          {isWasm ? 'wasm' : 'js worker'}
        </span>
      </div>
    </div>
  );
}
