import type { OutputColumnMetadata } from "@internal/clickhouse";
import { IconSortAscending, IconSortDescending } from "@tabler/icons-react";
import { BarChart, CheckIcon, LineChart, Plus, XIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { cn } from "~/utils/cn";
import {
  type AggregationType,
  type ChartConfiguration,
  type SortDirection,
} from "../metrics/QueryWidget";
import { Paragraph } from "../primitives/Paragraph";
import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
import SegmentedControl from "../primitives/SegmentedControl";
import { Select, SelectItem } from "../primitives/Select";
import { Switch } from "../primitives/Switch";
import { CHART_COLORS_BY_HUE, getSeriesColor } from "./chartColors";

export const defaultChartConfig: ChartConfiguration = {
  chartType: "bar",
  xAxisColumn: null,
  yAxisColumns: [],
  groupByColumn: null,
  stacked: false,
  sortByColumn: null,
  sortDirection: "asc",
  aggregation: "sum",
  seriesColors: {},
};

interface ChartConfigPanelProps {
  columns: OutputColumnMetadata[];
  config: ChartConfiguration;
  onChange: (config: ChartConfiguration) => void;
  className?: string;
}

// Type detection helpers
function isNumericType(type: string): boolean {
  return (
    type.startsWith("Int") ||
    type.startsWith("UInt") ||
    type.startsWith("Float") ||
    type.startsWith("Decimal") ||
    type.startsWith("Nullable(Int") ||
    type.startsWith("Nullable(UInt") ||
    type.startsWith("Nullable(Float") ||
    type.startsWith("Nullable(Decimal")
  );
}

function isDateTimeType(type: string): boolean {
  return (
    type === "DateTime" ||
    type === "DateTime64" ||
    type === "Date" ||
    type === "Date32" ||
    type.startsWith("DateTime64(") ||
    type.startsWith("Nullable(DateTime") ||
    type.startsWith("Nullable(Date")
  );
}

function isStringType(type: string): boolean {
  return (
    type === "String" ||
    type === "LowCardinality(String)" ||
    type === "Nullable(String)" ||
    type.startsWith("Enum") ||
    type.startsWith("FixedString")
  );
}

export function ChartConfigPanel({ columns, config, onChange, className }: ChartConfigPanelProps) {
  // Categorize columns by type
  const { numericColumns, dateTimeColumns, categoricalColumns, allColumns } = useMemo(() => {
    const numeric: OutputColumnMetadata[] = [];
    const dateTime: OutputColumnMetadata[] = [];
    const categorical: OutputColumnMetadata[] = [];

    for (const col of columns) {
      if (isNumericType(col.type)) {
        numeric.push(col);
      }
      if (isDateTimeType(col.type)) {
        dateTime.push(col);
      }
      if (isStringType(col.type) || isDateTimeType(col.type)) {
        categorical.push(col);
      }
    }

    return {
      numericColumns: numeric,
      dateTimeColumns: dateTime,
      categoricalColumns: categorical,
      allColumns: columns,
    };
  }, [columns]);

  // Create a stable key from column names and types to detect actual changes
  const columnsKey = useMemo(() => columns.map((c) => `${c.name}:${c.type}`).join(","), [columns]);

  // Use refs to access current config/onChange without adding them as dependencies
  const configRef = useRef(config);
  const onChangeRef = useRef(onChange);
  useEffect(() => {
    configRef.current = config;
    onChangeRef.current = onChange;
  });

  // Auto-select defaults when columns change
  useEffect(() => {
    if (columns.length === 0) return;

    const currentConfig = configRef.current;
    let needsUpdate = false;
    const updates: Partial<ChartConfiguration> = {};

    // Auto-select X-axis (prefer datetime, then first categorical)
    if (!currentConfig.xAxisColumn) {
      const defaultX = dateTimeColumns[0] ?? categoricalColumns[0] ?? columns[0];
      if (defaultX) {
        updates.xAxisColumn = defaultX.name;
        needsUpdate = true;
      }
    }

    // Auto-select Y-axis (first numeric column)
    if (currentConfig.yAxisColumns.length === 0 && numericColumns.length > 0) {
      updates.yAxisColumns = [numericColumns[0].name];
      needsUpdate = true;
    }

    // Determine the effective x-axis column (either existing or newly selected)
    const effectiveXAxis = updates.xAxisColumn ?? currentConfig.xAxisColumn;

    // Auto-set sort to x-axis ASC if it's a datetime column and no sort is configured
    if (
      effectiveXAxis &&
      !currentConfig.sortByColumn &&
      dateTimeColumns.some((col) => col.name === effectiveXAxis)
    ) {
      updates.sortByColumn = effectiveXAxis;
      updates.sortDirection = "asc";
      needsUpdate = true;
    }

    if (needsUpdate) {
      onChangeRef.current({ ...currentConfig, ...updates });
    }
    // Only re-run when the actual column structure changes, not on every config change.
    // columnsKey (a string) is stable when columns match, so this won't re-fire
    // unnecessarily when the same query is re-run with identical columns.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [columnsKey]);

  const updateConfig = useCallback(
    (updates: Partial<ChartConfiguration>) => {
      onChange({ ...config, ...updates });
    },
    [config, onChange]
  );

  // X-axis options: prefer datetime and string columns at the top
  const xAxisOptions = useMemo(() => {
    const preferred = [
      ...dateTimeColumns,
      ...categoricalColumns.filter((c) => !isDateTimeType(c.type)),
    ];
    const preferredNames = new Set(preferred.map((c) => c.name));
    const other = allColumns.filter((c) => !preferredNames.has(c.name));

    const options: Array<{ value: string; label: string; type: string }> = [];

    for (const col of preferred) {
      options.push({ value: col.name, label: col.name, type: col.type });
    }
    for (const col of other) {
      options.push({ value: col.name, label: col.name, type: col.type });
    }

    return options;
  }, [allColumns, dateTimeColumns, categoricalColumns]);

  // Y-axis options: numeric columns only
  const yAxisOptions = useMemo(() => {
    return numericColumns.map((col) => ({
      value: col.name,
      label: col.name,
      type: col.type,
    }));
  }, [numericColumns]);

  // Aggregation options
  const aggregationOptions = [
    { value: "sum", label: "Sum" },
    { value: "avg", label: "Average" },
    { value: "count", label: "Count" },
    { value: "min", label: "Min" },
    { value: "max", label: "Max" },
  ];

  // Group by options: categorical columns (excluding selected X axis)
  const groupByOptions = useMemo(() => {
    const options = categoricalColumns
      .filter((col) => col.name !== config.xAxisColumn)
      .map((col) => ({
        value: col.name,
        label: col.name,
        type: col.type,
      }));

    return [{ value: "__none__", label: "None", type: "" }, ...options];
  }, [categoricalColumns, config.xAxisColumn]);

  // Sort by options: all columns
  const sortByOptions = useMemo(() => {
    const options = allColumns.map((col) => ({
      value: col.name,
      label: col.name,
      type: col.type,
    }));

    return [{ value: "__none__", label: "None", type: "" }, ...options];
  }, [allColumns]);

  if (columns.length === 0) {
    return (
      <div className={cn("flex items-center justify-center p-4", className)}>
        <Paragraph variant="small" className="text-text-dimmed">
          Run a query to configure the chart
        </Paragraph>
      </div>
    );
  }

  return (
    <div className={cn("flex flex-col gap-3 p-2", className)}>
      {/* Chart Type */}
      <div className="flex flex-col gap-3">
        <ConfigField label="Type">
          <SegmentedControl
            name="chartType"
            value={config.chartType}
            variant="secondary/small"
            options={[
              {
                label: (
                  <span className="flex items-center gap-1">
                    <BarChart className="size-3" /> Bar
                  </span>
                ),
                value: "bar",
              },
              {
                label: (
                  <span className="flex items-center gap-1">
                    <LineChart className="size-3" /> Line
                  </span>
                ),
                value: "line",
              },
            ]}
            onChange={(value) => updateConfig({ chartType: value as "bar" | "line" })}
          />
        </ConfigField>
      </div>

      <div className="flex flex-col gap-3">
        {/* X-Axis */}
        <ConfigField label="X-Axis">
          <Select
            value={config.xAxisColumn ?? ""}
            setValue={(value) => {
              const updates: Partial<ChartConfiguration> = { xAxisColumn: value || null };
              // Auto-set sort to x-axis ASC if selecting a datetime column
              if (value) {
                const selectedCol = columns.find((c) => c.name === value);
                if (selectedCol && isDateTimeType(selectedCol.type)) {
                  updates.sortByColumn = value;
                  updates.sortDirection = "asc";
                }
              }
              updateConfig(updates);
            }}
            variant="tertiary/small"
            placeholder="Select column"
            items={xAxisOptions}
            dropdownIcon
            className="min-w-[140px]"
          >
            {(items) =>
              items.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  <span className="flex items-center gap-2">
                    <span>{item.label}</span>
                    <TypeBadge type={item.type} />
                  </span>
                </SelectItem>
              ))
            }
          </Select>
        </ConfigField>

        {/* Y-Axis / Series */}
        <ConfigField label={config.yAxisColumns.length > 1 ? "Series" : "Y-Axis"}>
          {yAxisOptions.length === 0 ? (
            <span className="text-xs text-text-dimmed">No numeric columns</span>
          ) : (
            <div className="flex flex-col gap-1.5">
              {/* Always show at least one dropdown, even if yAxisColumns is empty */}
              {(config.yAxisColumns.length === 0 ? [""] : config.yAxisColumns).map((col, index) => (
                <div key={index} className="flex items-center gap-1">
                  {col && !config.groupByColumn && (
                    <SeriesColorPicker
                      color={config.seriesColors?.[col] ?? getSeriesColor(index)}
                      onColorChange={(color) => {
                        updateConfig({
                          seriesColors: { ...config.seriesColors, [col]: color },
                        });
                      }}
                    />
                  )}
                  <Select
                    value={col}
                    setValue={(value) => {
                      const newColumns = [...config.yAxisColumns];
                      const updates: Partial<ChartConfiguration> = {};
                      if (value) {
                        // If this is a new slot (empty string), add it
                        if (index >= config.yAxisColumns.length) {
                          newColumns.push(value);
                        } else {
                          // If the column name changed, migrate the color
                          const oldCol = newColumns[index];
                          if (oldCol && oldCol !== value && config.seriesColors?.[oldCol]) {
                            const newSeriesColors = { ...config.seriesColors };
                            newSeriesColors[value] = newSeriesColors[oldCol];
                            delete newSeriesColors[oldCol];
                            updates.seriesColors = newSeriesColors;
                          }
                          newColumns[index] = value;
                        }
                      } else if (index < config.yAxisColumns.length) {
                        newColumns.splice(index, 1);
                      }
                      updateConfig({ ...updates, yAxisColumns: newColumns });
                    }}
                    variant="tertiary/small"
                    placeholder="Select column"
                    items={yAxisOptions.filter(
                      (opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
                    )}
                    dropdownIcon
                    className="min-w-[140px] flex-1"
                  >
                    {(items) =>
                      items.map((item) => (
                        <SelectItem key={item.value} value={item.value}>
                          <span className="flex items-center gap-2">
                            <span>{item.label}</span>
                            <TypeBadge type={item.type} />
                          </span>
                        </SelectItem>
                      ))
                    }
                  </Select>

                  {index > 0 && (
                    <button
                      type="button"
                      onClick={() => {
                        const removedCol = config.yAxisColumns[index];
                        const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
                        const updates: Partial<ChartConfiguration> = { yAxisColumns: newColumns };
                        // Clean up the color entry for the removed series
                        if (removedCol && config.seriesColors?.[removedCol]) {
                          const newSeriesColors = { ...config.seriesColors };
                          delete newSeriesColors[removedCol];
                          updates.seriesColors = newSeriesColors;
                        }
                        updateConfig(updates);
                      }}
                      className="rounded p-1 text-text-dimmed hover:bg-background-raised hover:text-text-bright"
                      title="Remove series"
                    >
                      <XIcon className="h-3.5 w-3.5" />
                    </button>
                  )}
                </div>
              ))}

              {/* Add another series button - only show when we have at least one series and not grouped */}
              {config.yAxisColumns.length > 0 &&
                config.yAxisColumns.length < yAxisOptions.length &&
                !config.groupByColumn && (
                  <button
                    type="button"
                    onClick={() => {
                      const availableColumns = yAxisOptions.filter(
                        (opt) => !config.yAxisColumns.includes(opt.value)
                      );
                      if (availableColumns.length > 0) {
                        updateConfig({
                          yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
                        });
                      }
                    }}
                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-background-raised hover:text-text-bright"
                  >
                    <Plus className="h-3 w-3" />
                    Add series
                  </button>
                )}

              {config.groupByColumn && config.yAxisColumns.length === 1 && (
                <span className="text-xxs text-text-dimmed">
                  Remove group by to add multiple series
                </span>
              )}
            </div>
          )}
        </ConfigField>

        {/* Aggregation */}
        <ConfigField label="Aggregation">
          <Select
            value={config.aggregation}
            setValue={(value) => updateConfig({ aggregation: value as AggregationType })}
            variant="tertiary/small"
            items={aggregationOptions}
            dropdownIcon
            className="min-w-[100px]"
          >
            {(items) =>
              items.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  {item.label}
                </SelectItem>
              ))
            }
          </Select>
        </ConfigField>

        {/* Group By - disabled when multiple series are selected */}
        <ConfigField label="Group by">
          {config.yAxisColumns.length > 1 ? (
            <span className="text-xs text-text-dimmed">Not available with multiple series</span>
          ) : (
            <Select
              value={config.groupByColumn ?? "__none__"}
              setValue={(value) =>
                updateConfig({ groupByColumn: value === "__none__" ? null : value })
              }
              variant="tertiary/small"
              placeholder="None"
              items={groupByOptions}
              dropdownIcon
              className="min-w-[140px]"
              text={(t) => (t === "__none__" ? "None" : t)}
            >
              {(items) =>
                items.map((item) => (
                  <SelectItem key={item.value} value={item.value}>
                    <span className="flex items-center gap-2">
                      <span>{item.label}</span>
                      {item.type && <TypeBadge type={item.type} />}
                    </span>
                  </SelectItem>
                ))
              }
            </Select>
          )}
        </ConfigField>

        {/* Stacked toggle (when grouped or multiple series) */}
        {(config.groupByColumn || config.yAxisColumns.length > 1) && (
          <ConfigField label={config.groupByColumn ? "Stack groups" : "Stack series"}>
            <Switch
              variant="medium"
              checked={config.stacked}
              onCheckedChange={(checked) => updateConfig({ stacked: checked })}
            />
          </ConfigField>
        )}

        {/* Order By */}
        <ConfigField label="Order by">
          <Select
            value={config.sortByColumn ?? "__none__"}
            setValue={(value) =>
              updateConfig({ sortByColumn: value === "__none__" ? null : value })
            }
            variant="tertiary/small"
            placeholder="None"
            items={sortByOptions}
            dropdownIcon
            className="min-w-[140px]"
            text={(t) => (t === "__none__" ? "None" : t)}
          >
            {(items) =>
              items.map((item) => (
                <SelectItem key={item.value} value={item.value}>
                  <span className="flex items-center gap-2">
                    <span>{item.label}</span>
                    {item.type && <TypeBadge type={item.type} />}
                  </span>
                </SelectItem>
              ))
            }
          </Select>
        </ConfigField>

        {/* Sort Direction (only when sorting) */}
        {config.sortByColumn && (
          <ConfigField label="Sort direction">
            <SegmentedControl
              name="sortDirection"
              value={config.sortDirection}
              variant="secondary/small"
              options={[
                {
                  label: (
                    <span className="flex items-center gap-1">
                      <IconSortAscending className="size-3" /> Asc
                    </span>
                  ),
                  value: "asc",
                },
                {
                  label: (
                    <span className="flex items-center gap-1">
                      <IconSortDescending className="size-3" /> Desc
                    </span>
                  ),
                  value: "desc",
                },
              ]}
              onChange={(value) => updateConfig({ sortDirection: value as SortDirection })}
            />
          </ConfigField>
        )}
      </div>
    </div>
  );
}

function ConfigField({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-1">
      {label && <span className="text-xs text-text-bright">{label}</span>}
      {children}
    </div>
  );
}

function SeriesColorPicker({
  color,
  onColorChange,
}: {
  color: string;
  onColorChange: (color: string) => void;
}) {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          className="shrink-0 rounded p-0.5 hover:bg-background-raised"
          title="Change series color"
        >
          <span
            className="block h-4 w-4 rounded-full border border-white/30"
            style={{ backgroundColor: color }}
          />
        </button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-2">
        <div className="grid grid-cols-6 gap-1.5">
          {CHART_COLORS_BY_HUE.map((c) => (
            <button
              key={c}
              type="button"
              onClick={() => {
                onColorChange(c);
                setOpen(false);
              }}
              className="group/swatch flex h-6 w-6 items-center justify-center rounded-full border border-white/30"
              style={{ backgroundColor: c }}
              title={c}
            >
              {c === color && <CheckIcon className="h-3.5 w-3.5 text-white drop-shadow-md" />}
            </button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
}

function TypeBadge({ type }: { type: string }) {
  // Simplify type for display
  let displayType = type;
  if (type.startsWith("Nullable(")) {
    displayType = type.slice(9, -1) + "?";
  }
  if (type.startsWith("LowCardinality(")) {
    displayType = type.slice(15, -1);
  }

  // Shorten long type names
  if (displayType.length > 12) {
    displayType = displayType.slice(0, 10) + "…";
  }

  return (
    <span className="rounded bg-background-hover px-1 py-0.5 font-mono text-xxs text-text-dimmed">
      {displayType}
    </span>
  );
}