"use client";

import { useState } from "react";
import {
  PRESET_GROUPS,
  type CategoryField,
  type ChartConfig,
  type ChartType,
  type MetricField,
  type SeriesGroupBy,
  type TimeBin,
  type TimeField,
  type XAxisField,
  type YMetric,
} from "../../lib/chartConfig";
import type { ChartShape } from "../../lib/chartShare";
import { Checkbox } from "../ui/checkbox";

const sel =
  "rounded-md border border-border bg-card text-foreground px-2 py-1 text-sm";
const lbl = "flex flex-col gap-1 text-xs font-medium text-muted-foreground";

const METRIC_FIELDS: { value: MetricField; label: string }[] = [
  { value: "duration", label: "Duration" },
  { value: "viewCount", label: "Views" },
  { value: "likeCount", label: "Likes" },
  { value: "commentCount", label: "Comments" },
  { value: "channelFollowerCount", label: "Followers" },
  { value: "cueCount", label: "Cue count" },
  { value: "coverage", label: "Transcript coverage" },
];

// Map a gallery template's ChartConfig onto the search-page chart shape. The
// query inside the template is ignored — the chart plots the live search.
function shapeFromConfig(c: ChartConfig, prev: ChartShape): ChartShape {
  return {
    dataSource: c.search ? "search" : "metadata",
    type: c.type,
    x: c.x,
    y: c.y,
    groupBy: c.groupBy,
    cumulative: c.cumulative,
    metric: c.search?.metric ?? prev.metric,
  };
}

// Controlled chart-configuration panel for the search page's single chart.
// Mirrors ChartConfigEditor's controls (same labels/markup) but edits a
// ChartShape live (no Save/Cancel) and carries no embedded query builder —
// the query IS the current search.
export function ChartShapeControls({
  shape,
  onChange,
}: {
  shape: ChartShape;
  onChange: (next: ChartShape) => void;
}) {
  const [showExamples, setShowExamples] = useState(false);
  const patch = (p: Partial<ChartShape>) => onChange({ ...shape, ...p });
  const patchX = (x: XAxisField) => patch({ x });
  const patchY = (y: YMetric) => patch({ y });

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex flex-col gap-1">
          <span className={lbl}>Data source</span>
          <div className="inline-flex w-fit overflow-hidden rounded-md border border-border bg-muted">
            {(["search", "metadata"] as const).map((m) => (
              <button
                key={m}
                type="button"
                onClick={() => patch({ dataSource: m })}
                className={`px-3 py-1 text-sm ${
                  shape.dataSource === m
                    ? "bg-primary text-primary-foreground"
                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                }`}
              >
                {m === "metadata" ? "Metadata" : "Search matches"}
              </button>
            ))}
          </div>
        </div>

        <div className="relative self-end">
          <button
            type="button"
            data-testid="chart-examples-button"
            onClick={() => setShowExamples((v) => !v)}
            className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
          >
            Examples ▾
          </button>
          {showExamples && (
            <div
              data-testid="chart-examples-menu"
              className="absolute right-0 z-10 mt-1 w-64 rounded-md border border-border bg-popover text-popover-foreground p-1 shadow-md"
            >
              {PRESET_GROUPS.map((group) => (
                <div key={group.id} className="py-1">
                  <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                    {group.title}
                  </div>
                  {group.templates.map((t) => (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => {
                        onChange(shapeFromConfig(t.config, shape));
                        setShowExamples(false);
                      }}
                      className="block w-full rounded px-2 py-1 text-left text-sm hover:bg-accent hover:text-accent-foreground"
                    >
                      {t.title}
                    </button>
                  ))}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="flex flex-wrap gap-4">
        <label className={lbl}>
          Chart type
          <select
            className={sel}
            value={shape.type}
            onChange={(e) => patch({ type: e.target.value as ChartType })}
          >
            <option value="line">Line</option>
            <option value="bar">Bar</option>
            <option value="stackedBar">Stacked bar</option>
            <option value="area">Area</option>
            <option value="pie">Pie</option>
          </select>
        </label>

        <label className={lbl}>
          Group into series by
          <select
            className={sel}
            value={shape.groupBy}
            onChange={(e) => patch({ groupBy: e.target.value as SeriesGroupBy })}
          >
            <option value="none">None</option>
            <option value="channel">Channel</option>
            <option value="platform">Platform</option>
            <option value="language">Language</option>
            <option value="mediaType">Media type</option>
            <option value="status">Status</option>
          </select>
        </label>

        <label className="flex items-center gap-2 self-end text-sm">
          <Checkbox
            checked={shape.cumulative}
            onCheckedChange={(checked) =>
              patch({ cumulative: checked === true })
            }
          />
          Cumulative
        </label>
      </div>

      <fieldset className="flex flex-wrap items-end gap-3 rounded-md border border-border p-3">
        <legend className="px-1 text-xs font-semibold">X axis</legend>
        <label className={lbl}>
          Dimension
          <select
            className={sel}
            value={shape.x.kind}
            onChange={(e) => {
              const k = e.target.value;
              if (k === "time") patchX({ kind: "time", bin: "month" });
              else if (k === "category")
                patchX({ kind: "category", field: "channel" });
              else
                patchX({
                  kind: "numericBucket",
                  field: "duration",
                  bucketSize: 300,
                });
            }}
          >
            <option value="time">Date (time series)</option>
            <option value="category">Category</option>
            <option value="numericBucket">Duration buckets</option>
          </select>
        </label>
        {shape.x.kind === "time" && (
          <>
            <label className={lbl}>
              Date field
              <select
                className={sel}
                value={shape.x.field ?? "uploadDate"}
                onChange={(e) =>
                  patchX({
                    kind: "time",
                    bin: (shape.x as { bin: TimeBin }).bin,
                    field: e.target.value as TimeField,
                  })
                }
              >
                <option value="uploadDate">Uploaded (by creator)</option>
                <option value="downloadedDate">Downloaded (added)</option>
                <option value="transcribedDate">Transcribed</option>
              </select>
            </label>
            <label className={lbl}>
              Bin
              <select
                className={sel}
                value={shape.x.bin}
                onChange={(e) =>
                  patchX({
                    kind: "time",
                    bin: e.target.value as TimeBin,
                    field: (shape.x as { field?: TimeField }).field,
                  })
                }
              >
                <option value="week">Week</option>
                <option value="month">Month</option>
                <option value="quarter">Quarter</option>
                <option value="year">Year</option>
              </select>
            </label>
          </>
        )}
        {shape.x.kind === "category" && (
          <label className={lbl}>
            Field
            <select
              className={sel}
              value={shape.x.field}
              onChange={(e) =>
                patchX({
                  kind: "category",
                  field: e.target.value as CategoryField,
                })
              }
            >
              <option value="channel">Channel</option>
              <option value="platform">Platform</option>
              <option value="language">Language</option>
              <option value="category">Category</option>
              <option value="type">Type (video/livestream)</option>
              <option value="mediaType">Media type (incl. shorts)</option>
              <option value="status">Status (available/deleted)</option>
              <option value="tag">Tag</option>
              <option value="hasTranscript">Has transcript</option>
            </select>
          </label>
        )}
        {shape.x.kind === "numericBucket" && (
          <label className={lbl}>
            Bucket (minutes)
            <input
              type="number"
              min={1}
              className={`${sel} w-24`}
              value={Math.round(shape.x.bucketSize / 60)}
              onChange={(e) =>
                patchX({
                  kind: "numericBucket",
                  field: "duration",
                  bucketSize: Math.max(1, Number(e.target.value)) * 60,
                })
              }
            />
          </label>
        )}
      </fieldset>

      {shape.dataSource === "metadata" && (
        <fieldset className="flex flex-wrap items-end gap-3 rounded-md border border-border p-3">
          <legend className="px-1 text-xs font-semibold">Y metric</legend>
          <label className={lbl}>
            Aggregate
            <select
              className={sel}
              value={shape.y.agg}
              onChange={(e) => {
                const agg = e.target.value;
                if (agg === "count") patchY({ agg: "count" });
                else
                  patchY({
                    agg: agg as Exclude<YMetric, { agg: "count" }>["agg"],
                    field: shape.y.agg === "count" ? "viewCount" : shape.y.field,
                  });
              }}
            >
              <option value="count">Count</option>
              <option value="sum">Sum</option>
              <option value="avg">Average</option>
              <option value="median">Median</option>
              <option value="max">Max</option>
              <option value="min">Min</option>
            </select>
          </label>
          {shape.y.agg !== "count" && (
            <label className={lbl}>
              Of
              <select
                className={sel}
                value={shape.y.field}
                onChange={(e) =>
                  patchY({
                    agg: (
                      shape.y as {
                        agg: Exclude<YMetric, { agg: "count" }>["agg"];
                      }
                    ).agg,
                    field: e.target.value as MetricField,
                  })
                }
              >
                {METRIC_FIELDS.map((m) => (
                  <option key={m.value} value={m.value}>
                    {m.label}
                  </option>
                ))}
              </select>
            </label>
          )}
        </fieldset>
      )}

      {shape.dataSource === "search" && (
        <label className={`${lbl} self-start`}>
          Plot
          <select
            className={sel}
            value={shape.metric}
            onChange={(e) =>
              patch({
                metric: e.target.value as "matchedVideos" | "totalHits",
              })
            }
          >
            <option value="matchedVideos">Matched videos</option>
            <option value="totalHits">Total hits</option>
          </select>
        </label>
      )}
    </div>
  );
}