"use client";

/**
 * ChartView — simple chart renderer for CHART views (no chart library).
 *
 * view.chartConfig: { type: "bar"|"doughnut"|"line", property (numeric
 * number/rollup/formula), groupBy?, aggregation? }. Series are computed
 * client-side from the loaded records (aggregation is a trivial group/sum/
 * avg/min/max over *display* values — the heavy query engine stays
 * server-side).
 *
 *  - bar:      flex columns with heights + value labels
 *  - doughnut: SVG circle stroke-dasharray segments + legend
 *  - line:     SVG polyline + dots + x labels
 * Hover tooltips; empty state when there are no numeric values.
 */
import { useMemo, useState } from "react";
import { BarChart3 } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  ChartConfig,
  DatabaseProperty,
  DatabaseView,
  RecordDto,
  UseDatabaseRecordsResult,
  valueToText
} from "@/hooks/use-database";

export interface ChartProps {
  databaseId: string;
  view: DatabaseView;
  properties: DatabaseProperty[];
  records: UseDatabaseRecordsResult;
}

interface Bucket {
  label: string;
  value: number;
}

const CHART_COLORS = [
  "var(--factory-color-blue, #337ea9)",
  "var(--factory-color-green, #448361)",
  "var(--factory-color-orange, #d9730d)",
  "var(--factory-color-purple, #9065b0)",
  "var(--factory-color-pink, #c14c8a)",
  "var(--factory-color-red, #d44c47)",
  "var(--factory-color-yellow, #cb912f)",
  "var(--factory-color-brown, #9f6b53)"
];

function numericValue(r: RecordDto, prop: DatabaseProperty): number | null {
  const v = r.properties[prop.id];
  if (!v) return null;
  // rollup / formula carry .value; plain number carries .value too.
  const raw = v.value;
  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
  if (typeof raw === "string" && raw.trim() !== "" && !Number.isNaN(Number(raw))) return Number(raw);
  if (typeof v.text === "string") {
    const n = Number(v.text);
    if (Number.isFinite(n)) return n;
  }
  return null;
}

function aggregate(values: number[], agg?: string): number {
  if (values.length === 0) return 0;
  switch (agg) {
    case "SUM":
      return values.reduce((a, b) => a + b, 0);
    case "AVERAGE":
      return values.reduce((a, b) => a + b, 0) / values.length;
    case "MIN":
      return Math.min(...values);
    case "MAX":
      return Math.max(...values);
    case "COUNT":
    default:
      return values.length;
  }
}

function computeBuckets(
  records: RecordDto[],
  numProp: DatabaseProperty,
  groupProp: DatabaseProperty | undefined,
  aggregation?: string
): Bucket[] {
  if (groupProp) {
    const map = new Map<string, number[]>();
    for (const r of records) {
      const label = valueToText(r.properties[groupProp.id], groupProp) || "—";
      const n = numericValue(r, numProp);
      const arr = map.get(label) ?? [];
      if (n != null) arr.push(n);
      map.set(label, arr);
    }
    return Array.from(map.entries())
      .map(([label, values]) => ({ label, value: aggregate(values, aggregation) }))
      .sort((a, b) => b.value - a.value);
  }
  const all: number[] = [];
  for (const r of records) {
    const n = numericValue(r, numProp);
    if (n != null) all.push(n);
  }
  return [{ label: numProp.name, value: aggregate(all, aggregation) }];
}

function fmt(v: number): string {
  return Number.isInteger(v) ? String(v) : v.toFixed(2);
}

// ---------------------------------------------------------------------------
// Bars
// ---------------------------------------------------------------------------

function BarChart({ buckets }: { buckets: Bucket[] }) {
  const [hover, setHover] = useState<number | null>(null);
  const max = Math.max(...buckets.map((b) => b.value), 1);
  return (
    <div className="flex h-full w-full items-end gap-2 p-4" role="img" aria-label="Bar chart">
      {buckets.map((b, i) => (
        <div
          key={b.label}
          className="group relative flex h-full min-w-0 flex-1 flex-col items-center justify-end"
          onMouseEnter={() => setHover(i)}
          onMouseLeave={() => setHover(null)}
        >
          <div className="relative flex w-full flex-1 items-end justify-center">
            {hover === i && (
              <span className="absolute -top-1 z-10 -translate-y-full whitespace-nowrap rounded bg-foreground px-1.5 py-0.5 text-[11px] text-background">
                {b.label}: {fmt(b.value)}
              </span>
            )}
            <div
              className="w-full max-w-16 rounded-t bg-primary/70 transition-colors group-hover:bg-primary"
              style={{ height: `${Math.max(2, (b.value / max) * 100)}%` }}
            />
          </div>
          <span className="mt-1 w-full truncate text-center text-[10px] text-muted-foreground" title={b.label}>
            {b.label}
          </span>
        </div>
      ))}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Doughnut (SVG stroke-dasharray)
// ---------------------------------------------------------------------------

function DoughnutChart({ buckets }: { buckets: Bucket[] }) {
  const [hover, setHover] = useState<number | null>(null);
  const total = buckets.reduce((a, b) => a + b.value, 0) || 1;
  const R = 60;
  const C = 2 * Math.PI * R;
  let offset = 0;

  return (
    <div className="flex h-full w-full items-center justify-center gap-6 p-4">
      <svg viewBox="0 0 160 160" className="size-48 -rotate-90" role="img" aria-label="Doughnut chart">
        {buckets.map((b, i) => {
          const frac = b.value / total;
          const len = frac * C;
          const seg = (
            <circle
              key={i}
              cx="80"
              cy="80"
              r={R}
              fill="none"
              stroke={CHART_COLORS[i % CHART_COLORS.length]}
              strokeWidth={hover === i ? 30 : 24}
              strokeDasharray={`${len} ${C - len}`}
              strokeDashoffset={-offset}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              className="cursor-pointer transition-all"
            />
          );
          offset += len;
          return seg;
        })}
        <circle cx="80" cy="80" r="34" fill="var(--card, transparent)" />
        <text x="80" y="76" textAnchor="middle" className="fill-foreground text-[13px] font-semibold">
          {hover != null ? fmt(buckets[hover].value) : fmt(total)}
        </text>
        <text x="80" y="92" textAnchor="middle" className="fill-muted-foreground text-[9px]">
          {hover != null ? buckets[hover].label : "total"}
        </text>
      </svg>
      <ul className="space-y-1 text-xs">
        {buckets.map((b, i) => (
          <li
            key={b.label}
            className={cn("flex items-center gap-1.5", hover === i && "font-medium")}
            onMouseEnter={() => setHover(i)}
            onMouseLeave={() => setHover(null)}
          >
            <span className="size-2.5 rounded-full" style={{ backgroundColor: CHART_COLORS[i % CHART_COLORS.length] }} aria-hidden />
            <span className="max-w-32 truncate">{b.label}</span>
            <span className="text-muted-foreground">
              {fmt(b.value)} · {Math.round((b.value / total) * 100)}%
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Line (SVG polyline)
// ---------------------------------------------------------------------------

function LineChart({ buckets }: { buckets: Bucket[] }) {
  const [hover, setHover] = useState<number | null>(null);
  const W = 480;
  const H = 200;
  const pad = 24;
  const max = Math.max(...buckets.map((b) => b.value), 1);
  const min = Math.min(...buckets.map((b) => b.value), 0);
  const range = max - min || 1;
  const x = (i: number) => pad + (buckets.length <= 1 ? 0 : (i / (buckets.length - 1)) * (W - pad * 2));
  const y = (v: number) => H - pad - ((v - min) / range) * (H - pad * 2);
  const points = buckets.map((b, i) => `${x(i)},${y(b.value)}`).join(" ");

  return (
    <div className="flex h-full w-full items-center justify-center p-2">
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full max-w-2xl" role="img" aria-label="Line chart">
        {/* gridlines */}
        {[0.25, 0.5, 0.75, 1].map((f) => (
          <line key={f} x1={pad} x2={W - pad} y1={H - pad - f * (H - pad * 2)} y2={H - pad - f * (H - pad * 2)} stroke="oklch(var(--border))" strokeDasharray="3 3" />
        ))}
        <polyline points={points} fill="none" stroke="var(--primary, #337ea9)" strokeWidth={2} />
        {buckets.map((b, i) => (
          <g key={b.label} onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)} className="cursor-pointer">
            <circle cx={x(i)} cy={y(b.value)} r={hover === i ? 5 : 3.5} fill="var(--primary, #337ea9)" />
            {hover === i && (
              <text x={x(i)} y={y(b.value) - 10} textAnchor="middle" className="fill-foreground text-[10px]">
                {fmt(b.value)}
              </text>
            )}
            <text x={x(i)} y={H - pad + 14} textAnchor="middle" className="fill-muted-foreground text-[9px]">
              {b.label.length > 8 ? `${b.label.slice(0, 8)}…` : b.label}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ---------------------------------------------------------------------------

export function ChartView({ view, properties, records }: ChartProps) {
  const { data, isLoading } = records;
  const cfg: ChartConfig | undefined = view.config.chartConfig;

  const numProp = cfg?.property ? properties.find((p) => p.id === cfg.property) : undefined;
  const groupProp = cfg?.groupBy ? properties.find((p) => p.id === cfg.groupBy) : undefined;

  const buckets = useMemo(() => {
    if (!numProp) return null;
    const b = computeBuckets(data.records, numProp, groupProp, cfg?.aggregation);
    return b.length ? b : null;
  }, [data.records, numProp, groupProp, cfg]);

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="h-40 w-full max-w-lg animate-pulse rounded-lg bg-muted" />
      </div>
    );
  }

  if (!cfg || !numProp || !buckets) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center">
        <BarChart3 className="size-8 text-muted-foreground" aria-hidden />
        <p className="text-sm text-muted-foreground">
          {!cfg
            ? "Configure this chart view (metric, grouping, type) to see data."
            : !numProp
              ? "This chart's metric property no longer exists."
              : "No numeric values to chart in the loaded records."}
        </p>
      </div>
    );
  }

  const type = cfg.type ?? "bar";
  return (
    <div className="h-full w-full">
      {type === "doughnut" ? (
        <DoughnutChart buckets={buckets} />
      ) : type === "line" ? (
        <LineChart buckets={buckets} />
      ) : (
        <BarChart buckets={buckets} />
      )}
    </div>
  );
}