"use client";

import type {
  ChartAppearanceCustomColors,
  SavedChartColorPalette,
} from "@/lib/chart/chart-appearance";
import type { ChartAppearancePreference } from "@/lib/chart/chart-appearance-storage";
import { useEffect, useRef, useState } from "react";

type ChartAppearancePanelProps = {
  preference: ChartAppearancePreference;
  onCustomColorsChange: (colors: ChartAppearanceCustomColors) => void;
  onResetColors: () => void;
  onPreferenceChange: (next: ChartAppearancePreference) => void;
};

const COLOR_FIELDS: { key: keyof ChartAppearanceCustomColors; label: string }[] = [
  { key: "candleUp", label: "Candle up" },
  { key: "candleDown", label: "Candle down" },
  { key: "wickUp", label: "Wick up" },
  { key: "wickDown", label: "Wick down" },
  { key: "volumeUp", label: "Volume up" },
  { key: "volumeDown", label: "Volume down" },
];

function newPaletteId(): string {
  return `pal-${Date.now()}`;
}

export function ChartAppearancePanel({
  preference,
  onCustomColorsChange,
  onResetColors,
  onPreferenceChange,
}: ChartAppearancePanelProps) {
  const custom = preference.customColors ?? {};
  const palettes = preference.savedPalettes ?? [];
  const [saveName, setSaveName] = useState("My colors");
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) {
      return;
    }
    const onDoc = (e: MouseEvent) => {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, [open]);

  const applyPalette = (pal: SavedChartColorPalette) => {
    onPreferenceChange({
      ...preference,
      activePaletteId: pal.id,
      customColors: { ...pal.colors },
    });
  };

  const saveCurrentPalette = () => {
    const name = saveName.trim() || "Saved palette";
    const id = newPaletteId();
    const entry: SavedChartColorPalette = {
      id,
      name,
      colors: { ...custom },
    };
    onPreferenceChange({
      ...preference,
      savedPalettes: [...palettes, entry],
      activePaletteId: id,
      customColors: { ...custom },
    });
  };

  return (
    <div className="chart-appearance-panel" ref={rootRef}>
      <button
        type="button"
        className={`toolbar-btn toolbar-btn-sm${open ? " toolbar-btn-active" : ""}`}
        aria-expanded={open}
        onClick={() => setOpen((v) => !v)}
      >
        Chart colors
      </button>
      {open ? (
        <div className="chart-appearance-grid">
          <label className="chart-appearance-field chart-appearance-full">
            <span>Show volume bars</span>
            <input
              type="checkbox"
              checked={preference.showVolumePane !== false}
              onChange={(e) =>
                onPreferenceChange({
                  ...preference,
                  showVolumePane: e.target.checked,
                })
              }
            />
          </label>
          {COLOR_FIELDS.map(({ key, label }) => (
            <label key={key} className="chart-appearance-field">
              <span>{label}</span>
              <input
                type="color"
                value={custom[key] ?? "#888888"}
                onChange={(e) =>
                  onCustomColorsChange({
                    ...custom,
                    [key]: e.target.value,
                  })
                }
              />
            </label>
          ))}
          <div className="chart-appearance-full chart-appearance-palette-row">
            <input
              type="text"
              className="toolbar-input"
              value={saveName}
              onChange={(e) => setSaveName(e.target.value)}
              placeholder="Palette name"
            />
            <button type="button" className="toolbar-btn toolbar-btn-sm" onClick={saveCurrentPalette}>
              Save palette
            </button>
          </div>
          {palettes.length > 0 ? (
            <label className="chart-appearance-field chart-appearance-full">
              <span>Saved palettes</span>
              <select
                value={preference.activePaletteId ?? ""}
                onChange={(e) => {
                  const pal = palettes.find((p) => p.id === e.target.value);
                  if (pal) {
                    applyPalette(pal);
                  }
                }}
              >
                <option value="">— Select —</option>
                {palettes.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.name}
                  </option>
                ))}
              </select>
            </label>
          ) : null}
          <button type="button" className="toolbar-btn toolbar-btn-sm" onClick={onResetColors}>
            Reset colors
          </button>
        </div>
      ) : null}
    </div>
  );
}