"use client";

import { useState } from "react";
import {
  isDisabled,
  type ChartState,
} from "yt-dlp-transcript-common/lib/homepageChart";
import { Segmented } from "./Segmented";

// The power-user matrix, hidden behind a disclosure. Each control is a Segmented
// group; invalid options are greyed via isDisabled (e.g. Symlog is unavailable
// on a stacked chart, Share on a non-stacked one) so the UI shows *why* rather
// than silently flipping a choice. The exclude-outlier toggle drops the top site.
export function CustomizePanel({
  state,
  onPatch,
  topSiteLabel,
}: {
  state: ChartState;
  onPatch: (patch: Partial<ChartState>) => void;
  topSiteLabel: string | null;
}) {
  const [open, setOpen] = useState(false);
  const dis = (key: Parameters<typeof isDisabled>[0], value: string) =>
    isDisabled(key, value, state);

  return (
    <div className="flex flex-col gap-3">
      <button
        type="button"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="inline-flex w-fit items-center gap-1.5 font-mono text-[0.6875rem] uppercase tracking-[0.18em] text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
      >
        <span className="text-[var(--brand)]">{open ? "–" : "+"}</span>
        Customize
      </button>

      {open && (
        <div className="flex flex-wrap items-center gap-2.5">
          <Segmented
            label="Metric"
            value={state.metric}
            onChange={(v) => onPatch({ metric: v })}
            options={[
              { value: "transcribed", label: "Transcribed" },
              { value: "downloaded", label: "Downloaded" },
            ]}
          />
          <Segmented
            label="Breakdown"
            value={state.breakdown}
            onChange={(v) => onPatch({ breakdown: v })}
            options={[
              { value: "site", label: "By site" },
              { value: "channel", label: "By channel" },
            ]}
          />
          <Segmented
            label="Chart type"
            value={state.chartType}
            onChange={(v) => onPatch({ chartType: v })}
            options={[
              { value: "line", label: "Lines" },
              { value: "area", label: "Area" },
              { value: "bar", label: "Bars" },
              { value: "barH", label: "Ranked" },
              { value: "small", label: "Small" },
            ]}
          />
          <Segmented
            label="Bucket"
            value={state.bucket}
            onChange={(v) => onPatch({ bucket: v })}
            options={[
              { value: "day", label: "Day" },
              { value: "week", label: "Week" },
              { value: "month", label: "Month" },
              { value: "cumulative", label: "Cumulative" },
            ]}
          />
          <Segmented
            label="Range"
            value={state.range}
            onChange={(v) => onPatch({ range: v })}
            options={[
              { value: "2w", label: "2w" },
              { value: "6w", label: "6w" },
              { value: "90d", label: "90d" },
              { value: "12mo", label: "12mo" },
              { value: "all", label: "All" },
            ]}
          />
          <Segmented
            label="Scale"
            value={state.scale}
            onChange={(v) => onPatch({ scale: v })}
            options={[
              { value: "linear", label: "Linear" },
              { value: "symlog", label: "Symlog", disabled: dis("scale", "symlog") },
            ]}
          />
          <Segmented
            label="Values"
            value={state.valueMode}
            onChange={(v) => onPatch({ valueMode: v })}
            options={[
              { value: "counts", label: "Counts" },
              { value: "share", label: "Share", disabled: dis("valueMode", "share") },
              { value: "indexed", label: "Indexed", disabled: dis("valueMode", "indexed") },
            ]}
          />
          {topSiteLabel && (
            <button
              type="button"
              aria-pressed={state.excludeTop}
              onClick={() => onPatch({ excludeTop: !state.excludeTop })}
              className={
                "rounded-[var(--radius)] border px-3 py-1.5 text-[0.8125rem] font-medium transition-all duration-150 " +
                (state.excludeTop
                  ? "border-[var(--brand)] bg-[var(--brand-soft)] text-[var(--brand-strong)]"
                  : "border-[var(--border)] text-[var(--muted-foreground)] hover:border-[var(--border-strong)] hover:text-[var(--foreground)]")
              }
            >
              {state.excludeTop ? `Excluding ${topSiteLabel}` : `Exclude ${topSiteLabel}`}
            </button>
          )}
        </div>
      )}
    </div>
  );
}