"use client";

import type { ParameterSchema, ParameterValue } from "@/lib/indicators/types";

type IndicatorParameterFormProps = {
  schemas: ParameterSchema[];
  values: Record<string, unknown>;
  onChange: (key: string, value: ParameterValue) => void;
  disabled?: boolean;
};

export function IndicatorParameterForm({
  schemas,
  values,
  onChange,
  disabled,
}: IndicatorParameterFormProps) {
  return (
    <div className="indicator-param-form">
      {schemas.map((schema) => {
        const raw = values[schema.key];
        const id = `param-${schema.key}`;
        if (schema.type === "boolean") {
          const checked =
            typeof raw === "boolean" ? raw : schema.default;
          return (
            <label key={schema.key} className="indicator-param-row" htmlFor={id}>
              <span className="indicator-param-label">{schema.label}</span>
              <input
                id={id}
                type="checkbox"
                checked={checked}
                disabled={disabled}
                onChange={(e) => onChange(schema.key, e.target.checked)}
              />
            </label>
          );
        }
        if (
          schema.type === "string" &&
          (schema.key.toLowerCase().includes("color") || /Color$/i.test(schema.key))
        ) {
          const value =
            typeof raw === "string" && raw.length > 0 ? raw : String(schema.default);
          const hex = value.startsWith("#") ? value : `#${value.replace(/^#/, "")}`;
          return (
            <label key={schema.key} className="indicator-param-row indicator-param-color" htmlFor={id}>
              <span className="indicator-param-label">{schema.label}</span>
              <span className="indicator-param-color-inputs">
                <input
                  id={id}
                  type="color"
                  value={hex.length === 7 ? hex : "#808080"}
                  disabled={disabled}
                  onChange={(e) => onChange(schema.key, e.target.value)}
                />
                <input
                  type="text"
                  className="toolbar-input indicator-param-hex"
                  value={hex}
                  disabled={disabled}
                  spellCheck={false}
                  onChange={(e) => {
                    const next = e.target.value.trim();
                    if (/^#[0-9a-fA-F]{6}$/.test(next)) {
                      onChange(schema.key, next);
                    }
                  }}
                />
              </span>
            </label>
          );
        }
        if (schema.type === "string" && schema.options?.length) {
          const value =
            typeof raw === "string" && schema.options.includes(raw)
              ? raw
              : schema.default;
          return (
            <label key={schema.key} className="indicator-param-row" htmlFor={id}>
              <span className="indicator-param-label">{schema.label}</span>
              <select
                id={id}
                value={value}
                disabled={disabled}
                onChange={(e) => onChange(schema.key, e.target.value)}
              >
                {schema.options.map((opt) => (
                  <option key={opt} value={opt}>
                    {opt}
                  </option>
                ))}
              </select>
            </label>
          );
        }
        if (schema.type === "integer" || schema.type === "number") {
          const num =
            typeof raw === "number"
              ? raw
              : typeof raw === "string"
                ? Number.parseFloat(raw)
                : schema.default;
          return (
            <label key={schema.key} className="indicator-param-row" htmlFor={id}>
              <span className="indicator-param-label">{schema.label}</span>
              <input
                id={id}
                type="number"
                className="toolbar-number"
                value={Number.isFinite(num) ? num : schema.default}
                min={schema.min}
                max={schema.max}
                step={schema.type === "integer" ? 1 : schema.type === "number" ? 0.01 : 1}
                disabled={disabled}
                onChange={(e) => {
                  const parsed =
                    schema.type === "integer"
                      ? Number.parseInt(e.target.value, 10)
                      : Number.parseFloat(e.target.value);
                  if (Number.isFinite(parsed)) {
                    onChange(schema.key, parsed);
                  }
                }}
              />
            </label>
          );
        }
        return null;
      })}
    </div>
  );
}