"use client";

import { useState } from "react";
import type {
  CategoryField,
  ChartConfig,
  ChartType,
  MetricField,
  SeriesGroupBy,
  TimeBin,
  TimeField,
  XAxisField,
  YMetric,
} from "../../lib/chartConfig";
import {
  emptyRoot,
  parseRoot,
  stringifyRoot,
  type GroupNode,
} from "../../lib/searchQuery";
import type { GroupState, LeafState } from "../../lib/searchEval";
import QueryBuilder from "../QueryBuilder";

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

// The chart editor has no live search evaluation, so the builder renders without
// per-leaf/group count badges.
const NO_LEAF_STATES: ReadonlyMap<string, LeafState> = new Map();
const NO_GROUP_STATES: ReadonlyMap<string, GroupState> = new Map();

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" },
];

export function ChartConfigEditor({
  initial,
  onSave,
  onCancel,
}: {
  initial: ChartConfig;
  onSave: (c: ChartConfig) => void;
  onCancel: () => void;
}) {
  const [draft, setDraft] = useState<ChartConfig>(initial);
  const [mode, setMode] = useState<"metadata" | "search">(
    initial.search ? "search" : "metadata",
  );
  // The full query builder owns the chart's search tree while editing.
  const [searchRoot, setSearchRoot] = useState<GroupNode>(
    () => parseRoot(initial.search?.queryTree ?? "") ?? emptyRoot(),
  );

  const patch = (p: Partial<ChartConfig>) => setDraft((d) => ({ ...d, ...p }));
  const patchX = (x: XAxisField) => patch({ x });
  const patchY = (y: YMetric) => patch({ y });

  const save = () => {
    let search: ChartConfig["search"];
    if (mode === "search") {
      // Keep the search block even with an empty query, so the card prompts the
      // user to fill one in rather than silently reverting to a metadata chart.
      search = {
        queryTree: stringifyRoot(searchRoot),
        metric: draft.search?.metric ?? "matchedVideos",
      };
    } else {
      search = undefined;
    }
    onSave({ ...draft, search });
  };

  return (
    <div className="flex flex-col gap-4 rounded-lg border border-border bg-card p-4">
      <label className={lbl}>
        Title
        <input
          className={sel}
          value={draft.title}
          onChange={(e) => patch({ title: e.target.value })}
        />
      </label>

      <div className="flex flex-wrap gap-4">
        <label className={lbl}>
          Chart type
          <select
            className={sel}
            value={draft.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={draft.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>
            <option value="site">Site</option>
          </select>
        </label>

        <label className="flex items-center gap-2 self-end text-sm">
          <input
            type="checkbox"
            checked={draft.cumulative}
            onChange={(e) => patch({ cumulative: e.target.checked })}
          />
          Cumulative
        </label>
      </div>

      <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">
          {(["metadata", "search"] as const).map((m) => (
            <button
              key={m}
              type="button"
              onClick={() => setMode(m)}
              className={`px-3 py-1 text-sm capitalize ${
                mode === m
                  ? "bg-primary text-primary-foreground"
                  : "bg-card hover:bg-muted"
              }`}
            >
              {m === "metadata" ? "Metadata" : "Search matches"}
            </button>
          ))}
        </div>
      </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={draft.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>
        {draft.x.kind === "time" && (
          <>
            <label className={lbl}>
              Date field
              <select
                className={sel}
                value={draft.x.field ?? "uploadDate"}
                onChange={(e) =>
                  patchX({
                    kind: "time",
                    bin: (draft.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={draft.x.bin}
                onChange={(e) =>
                  patchX({
                    kind: "time",
                    bin: e.target.value as TimeBin,
                    field: (draft.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>
          </>
        )}
        {draft.x.kind === "category" && (
          <label className={lbl}>
            Field
            <select
              className={sel}
              value={draft.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>
        )}
        {draft.x.kind === "numericBucket" && (
          <label className={lbl}>
            Bucket (minutes)
            <input
              type="number"
              min={1}
              className={`${sel} w-24`}
              value={Math.round(draft.x.bucketSize / 60)}
              onChange={(e) =>
                patchX({
                  kind: "numericBucket",
                  field: "duration",
                  bucketSize: Math.max(1, Number(e.target.value)) * 60,
                })
              }
            />
          </label>
        )}
      </fieldset>

      {mode === "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={draft.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: draft.y.agg === "count" ? "viewCount" : draft.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>
        {draft.y.agg !== "count" && (
          <label className={lbl}>
            Of
            <select
              className={sel}
              value={draft.y.field}
              onChange={(e) =>
                patchY({
                  agg: (draft.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>
      )}

      {mode === "search" && (
      <fieldset className="flex flex-col gap-3 rounded-md border border-border p-3">
        <legend className="px-1 text-xs font-semibold">Search</legend>
        <label className={`${lbl} self-start`}>
          Plot
          <select
            className={sel}
            value={draft.search?.metric ?? "matchedVideos"}
            onChange={(e) =>
              patch({
                search: {
                  queryTree: draft.search?.queryTree ?? "",
                  metric: e.target.value as "matchedVideos" | "totalHits",
                },
              })
            }
          >
            <option value="matchedVideos">Matched videos</option>
            <option value="totalHits">Total hits</option>
          </select>
        </label>
        <QueryBuilder
          root={searchRoot}
          onChange={setSearchRoot}
          leafStates={NO_LEAF_STATES}
          groupStates={NO_GROUP_STATES}
        />
        <p className="text-xs text-muted-foreground">
          Build the query with any number of layers (AND/OR/NOT). Each matched
          video counts once, or by its hit count. The X axis, grouping, and
          filters above still apply.
        </p>
      </fieldset>
      )}

      <div className="flex gap-2">
        <button
          type="button"
          onClick={save}
          className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
        >
          Save
        </button>
        <button
          type="button"
          onClick={onCancel}
          className="rounded-md border border-border px-3 py-1.5 text-sm hover:bg-muted"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}