"use client";

import { ensureBuiltinIndicatorsRegistered } from "@/lib/indicators/builtin";
import {
  addIndicatorInstance,
  createIndicatorInstance,
  removeIndicatorInstance,
  updateIndicatorInstance,
} from "@/lib/indicators/instances/manager";
import {
  loadIndicatorInstances,
  saveIndicatorInstances,
} from "@/lib/indicators/instances/storage";
import { listIndicators } from "@/lib/indicators/registry";
import type { IndicatorDefinition } from "@/lib/indicators/types";
import type { CanonicalSymbol } from "@/lib/market/instruments";
import { DEFAULT_SYMBOL } from "@/lib/market/symbols";
import { DEFAULT_TIMEFRAME } from "@/lib/market/timeframes";
import type { IndicatorInstance } from "@/lib/indicators/instances/types";
import Link from "next/link";
import { useCallback, useMemo, useState } from "react";

ensureBuiltinIndicatorsRegistered();

const HIDDEN_IDS = new Set(["reference.annotation-fixture"]);

const DEFAULT_SCOPE = {
  symbol: DEFAULT_SYMBOL as CanonicalSymbol,
  timeframe: DEFAULT_TIMEFRAME,
};

export function NewIndicatorsPageClient() {
  const catalog = useMemo(
    () =>
      listIndicators().filter((d) => !HIDDEN_IDS.has(d.id)) as IndicatorDefinition[],
    [],
  );
  const [message, setMessage] = useState<string | null>(null);
  const [instances, setInstances] = useState<IndicatorInstance[]>(() =>
    loadIndicatorInstances(DEFAULT_SCOPE),
  );

  const refreshInstances = useCallback(() => {
    setInstances(loadIndicatorInstances(DEFAULT_SCOPE));
  }, []);

  const addToChart = (definitionId: string) => {
    const created = createIndicatorInstance(DEFAULT_SCOPE, definitionId);
    if ("error" in created) {
      setMessage(created.error);
      return;
    }
    const next = addIndicatorInstance(loadIndicatorInstances(DEFAULT_SCOPE), created);
    saveIndicatorInstances(DEFAULT_SCOPE, next);
    refreshInstances();
    setMessage(`Added ${definitionId} to ${DEFAULT_SYMBOL} ${DEFAULT_TIMEFRAME}. Open chart to view.`);
  };

  const toggleInstance = (instanceId: string, enabled: boolean) => {
    const next = updateIndicatorInstance(instances, instanceId, {
      enabled,
      visible: enabled,
    });
    saveIndicatorInstances(DEFAULT_SCOPE, next);
    refreshInstances();
  };

  const removeInstance = (instanceId: string) => {
    const next = removeIndicatorInstance(instances, instanceId);
    saveIndicatorInstances(DEFAULT_SCOPE, next);
    refreshInstances();
  };

  return (
    <main>
      <header className="app-subheader">
        <Link href="/">← Chart</Link>
        <h1>Trading Products → New Indicators</h1>
      </header>
      <section className="panel">
        <p className="chart-meta">
          Catalog from indicator registry. Instances attach to {DEFAULT_SYMBOL}{" "}
          {DEFAULT_TIMEFRAME} (change symbol on chart first if needed).
        </p>
        {message ? <p className="status">{message}</p> : null}
        <ul className="indicator-catalog">
          {catalog.map((def) => (
            <li key={def.id} className="indicator-catalog-item">
              <div>
                <strong>{def.name}</strong>
                <span className="chart-meta">
                  {def.id} · v{def.version} · {def.renderPlacement} · {def.category}
                </span>
                <p>{def.description}</p>
              </div>
              <button
                type="button"
                className="toolbar-btn"
                onClick={() => addToChart(def.id)}
              >
                Add / Enable
              </button>
            </li>
          ))}
        </ul>
        {instances.length > 0 ? (
          <>
            <h2 className="chart-meta" style={{ marginTop: "1.5rem" }}>
              Active instances ({DEFAULT_SYMBOL} {DEFAULT_TIMEFRAME})
            </h2>
            <ul className="indicator-catalog">
              {instances.map((inst) => (
                <li key={inst.instanceId} className="indicator-catalog-item">
                  <div>
                    <strong>{inst.definitionId}</strong>
                    <span className="chart-meta">{inst.instanceId.slice(0, 10)}…</span>
                  </div>
                  <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
                    <label className="toolbar-check-row">
                      <input
                        type="checkbox"
                        checked={inst.enabled}
                        onChange={(e) => toggleInstance(inst.instanceId, e.target.checked)}
                      />
                      Enabled
                    </label>
                    <button
                      type="button"
                      className="toolbar-btn"
                      onClick={() => removeInstance(inst.instanceId)}
                    >
                      Remove
                    </button>
                  </div>
                </li>
              ))}
            </ul>
          </>
        ) : null}
      </section>
    </main>
  );
}