import type { ReactNode } from "react";
import { ArrowLeft, ChevronDown } from "lucide-react";

import { Button } from "~/components/ui/button";
import { cn } from "~/lib/utils";
import type { AbnormalLevel, ModelGrade, ModelStatus } from "./modelData";

export function OperationsPageHeader({
  title,
  description,
  actions,
  onBack,
}: {
  title: string;
  description: string;
  actions?: ReactNode;
  onBack?: () => void;
}) {
  return (
    <header className="flex items-start justify-between gap-6">
      <div className="flex min-w-0 items-start gap-3">
        {onBack && (
          <Button aria-label="返回" variant="outline" size="icon-sm" onClick={onBack}>
            <ArrowLeft />
          </Button>
        )}
        <div className="min-w-0">
          <span className="text-2xs font-medium-plus tracking-[0.08em] text-primary">
            A CARD MODEL OPERATIONS
          </span>
          <h2 className="mt-1 text-2xl font-bold tracking-tight text-foreground">{title}</h2>
          <p className="mt-1 max-w-3xl text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </header>
  );
}

const gradeClasses: Record<ModelGrade, string> = {
  A: "bg-success-soft text-success-strong hover:bg-success-soft/80",
  B: "bg-warning-soft text-warning hover:bg-warning-soft/80",
  C: "bg-danger-soft text-danger hover:bg-danger-soft/80",
};

export function GradeBadge({
  grade,
  onClick,
  suffix,
}: {
  grade: ModelGrade;
  onClick?: () => void;
  suffix?: string;
}) {
  const label = `${grade}${suffix ? ` ${suffix}` : ""}`;
  if (onClick) {
    return (
      <Button
        className={cn("min-w-8 font-semibold", gradeClasses[grade])}
        variant="ghost"
        size="xs"
        onClick={onClick}
      >
        {label}
      </Button>
    );
  }
  return (
    <span
      data-slot="grade-badge"
      className={cn("inline-flex h-6 items-center rounded-full px-2.5 text-xs font-semibold", gradeClasses[grade])}
    >
      {label}
    </span>
  );
}

const abnormalClasses: Record<AbnormalLevel, string> = {
  三级: "bg-danger-soft text-danger",
  二级: "bg-warning-soft text-warning",
  一级: "bg-brand-soft text-primary",
  正常: "bg-success-soft text-success-strong",
};

export function AbnormalBadge({ level }: { level: AbnormalLevel }) {
  return (
    <span
      data-slot="abnormal-badge"
      className={cn("inline-flex h-6 items-center rounded-full px-2.5 text-xs font-medium", abnormalClasses[level])}
    >
      {level}
    </span>
  );
}

const statusClasses: Record<ModelStatus, string> = {
  正常: "bg-success-soft text-success-strong",
  陪跑: "bg-brand-soft text-primary",
  陪跑结束: "bg-muted text-muted-foreground",
  下线: "bg-muted text-muted-foreground",
};

export function StatusBadge({ status }: { status: ModelStatus }) {
  return (
    <span
      data-slot="model-status-badge"
      className={cn("inline-flex h-6 items-center rounded-full px-2.5 text-xs font-medium", statusClasses[status])}
    >
      {status}
    </span>
  );
}

export function FilterSelect({
  label,
  value,
  options,
  onChange,
  allLabel = "全部",
  className,
}: {
  label: string;
  value: string;
  options: Array<string | { label: string; value: string }>;
  onChange: (value: string) => void;
  allLabel?: string;
  className?: string;
}) {
  return (
    <label className={cn("flex min-w-0 flex-col gap-1.5", className)}>
      <span className="text-xs font-medium text-ink-caption">{label}</span>
      <span className="relative">
        <select
          data-slot="operations-filter-select"
          className="h-9 w-full appearance-none rounded-3xl border border-transparent bg-input/50 px-3 pr-8 text-sm text-foreground outline-none transition-colors focus:border-ring"
          value={value}
          onChange={(event) => onChange(event.target.value)}
        >
          <option value="">{allLabel}</option>
          {options.map((option) => {
            const item = typeof option === "string" ? { label: option, value: option } : option;
            return <option key={item.value} value={item.value}>{item.label}</option>;
          })}
        </select>
        <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
      </span>
    </label>
  );
}

export function MultiSelectFilter({
  label,
  values,
  options,
  onChange,
  allLabel = "全部",
  className,
}: {
  label: string;
  values: string[];
  options: Array<string | { label: string; value: string }>;
  onChange: (values: string[]) => void;
  allLabel?: string;
  className?: string;
}) {
  const normalized = options.map((option) => typeof option === "string" ? { label: option, value: option } : option);
  const selectedLabels = normalized.filter((option) => values.includes(option.value)).map((option) => option.label);
  const summary = !selectedLabels.length
    ? allLabel
    : selectedLabels.length <= 2
      ? selectedLabels.join("、")
      : `已选 ${selectedLabels.length} 项`;

  const toggle = (value: string) => {
    onChange(values.includes(value) ? values.filter((item) => item !== value) : [...values, value]);
  };

  return (
    <div className={cn("flex min-w-0 flex-col gap-1.5", className)} data-slot="operations-multi-select">
      <span className="text-xs font-medium text-ink-caption">{label}</span>
      <details className="group relative">
        <summary className="flex h-9 cursor-pointer list-none items-center justify-between gap-2 rounded-3xl border border-transparent bg-input/50 px-3 text-sm text-foreground outline-none transition-colors hover:bg-input focus-visible:border-ring [&::-webkit-details-marker]:hidden">
          <span className="truncate">{summary}</span>
          <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" />
        </summary>
        <div className="absolute left-0 z-30 mt-1.5 min-w-full rounded-3xl bg-popover p-2 shadow-lg ring-1 ring-foreground/5">
          <div className="mb-1 flex items-center justify-between border-b border-border px-2 pb-2">
            <span className="text-xs text-muted-foreground">{values.length ? `已选 ${values.length} 项` : allLabel}</span>
            {values.length > 0 && <button className="text-xs font-medium text-primary hover:underline" type="button" onClick={() => onChange([])}>清空</button>}
          </div>
          <div className="max-h-64 overflow-y-auto py-1">
            {normalized.map((option) => (
              <label className="flex cursor-pointer items-center gap-2 rounded-xl px-2 py-2 text-sm hover:bg-muted/70" key={option.value}>
                <input className="size-4 accent-brand" type="checkbox" checked={values.includes(option.value)} onChange={() => toggle(option.value)} />
                <span className="whitespace-nowrap">{option.label}</span>
              </label>
            ))}
          </div>
        </div>
      </details>
    </div>
  );
}

type Threshold = {
  value: number;
  label: string;
  tone?: "warning" | "danger";
};

export function MetricLineChart({
  months,
  values,
  name,
  unit = "%",
  thresholds = [],
  comparison,
}: {
  months: string[];
  values: number[];
  name: string;
  unit?: string;
  thresholds?: Threshold[];
  comparison?: { name: string; values: number[]; tone?: "success" | "warning" };
}) {
  const width = 640;
  const height = 190;
  const left = 48;
  const right = 20;
  const top = 18;
  const bottom = 34;
  const plotWidth = width - left - right;
  const plotHeight = height - top - bottom;
  const allValues = [...values, ...(comparison?.values ?? []), ...thresholds.map((item) => item.value)];
  const rawMin = Math.min(...allValues);
  const rawMax = Math.max(...allValues);
  const padding = Math.max(1, (rawMax - rawMin) * 0.16);
  const min = Math.max(0, rawMin - padding);
  const max = rawMax + padding;
  const range = Math.max(1, max - min);
  const x = (index: number) => left + (months.length <= 1 ? plotWidth / 2 : index * plotWidth / (months.length - 1));
  const y = (value: number) => top + (max - value) / range * plotHeight;
  const path = values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index)},${y(value)}`).join(" ");
  const comparisonPath = comparison?.values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index)},${y(value)}`).join(" ") ?? "";
  const ticks = Array.from({ length: 4 }, (_, index) => max - range * index / 3);

  return (
    <div data-slot="metric-line-chart" className="w-full">
      <svg className="h-auto w-full" viewBox={`0 0 ${width} ${height}`} role="img" aria-label={`${name}趋势图`}>
        {ticks.map((tick) => (
          <g key={tick}>
            <line className="stroke-border" x1={left} x2={width - right} y1={y(tick)} y2={y(tick)} />
            <text className="fill-ink-subtle text-3xs" x={left - 8} y={y(tick) + 3} textAnchor="end">
              {tick.toFixed(1)}{unit}
            </text>
          </g>
        ))}
        {thresholds.map((threshold) => (
          <g key={threshold.label}>
            <line
              className={cn(
                "[stroke-dasharray:6_5] [stroke-width:1.5]",
                threshold.tone === "danger" ? "stroke-danger" : "stroke-warning",
              )}
              x1={left}
              x2={width - right}
              y1={y(threshold.value)}
              y2={y(threshold.value)}
            />
            <text
              className={threshold.tone === "danger" ? "fill-danger text-3xs" : "fill-warning text-3xs"}
              x={width - right}
              y={y(threshold.value) - 5}
              textAnchor="end"
            >
              {threshold.label}
            </text>
          </g>
        ))}
        <path className="fill-none stroke-primary [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:3]" d={path} />
        {values.map((value, index) => (
          <circle
            className="fill-card stroke-primary [stroke-width:3]"
            key={`${months[index]}-${value}`}
            cx={x(index)}
            cy={y(value)}
            r="4"
          />
        ))}
        {comparison && <path className={cn("fill-none [stroke-dasharray:7_5] [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:2.5]", comparison.tone === "warning" ? "stroke-warning" : "stroke-success")} d={comparisonPath} />}
        {comparison?.values.map((value, index) => (
          <circle className={cn("fill-card [stroke-width:2.5]", comparison.tone === "warning" ? "stroke-warning" : "stroke-success")} key={`comparison-${months[index]}-${value}`} cx={x(index)} cy={y(value)} r="3.5" />
        ))}
        {months.map((month, index) => (
          <text
            className="fill-ink-subtle text-3xs"
            key={month}
            x={x(index)}
            y={height - 10}
            textAnchor="middle"
          >
            {month}
          </text>
        ))}
      </svg>
      <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
        <i className="h-0.5 w-5 rounded-full bg-primary" />
        {name}
        {comparison && <><i className={cn("ml-3 h-0.5 w-5 rounded-full", comparison.tone === "warning" ? "bg-warning" : "bg-success")} />{comparison.name}</>}
      </div>
    </div>
  );
}

export function SortingComboChart({
  bins,
  counts,
  badRates,
}: {
  bins: readonly string[];
  counts: readonly number[];
  badRates: readonly number[];
}) {
  const width = 760;
  const height = 300;
  const left = 56;
  const right = 54;
  const top = 22;
  const bottom = 52;
  const plotWidth = width - left - right;
  const plotHeight = height - top - bottom;
  const maxCount = Math.ceil(Math.max(...counts) / 1000) * 1000;
  const maxRate = 12;
  const step = plotWidth / bins.length;
  const barWidth = step * 0.34;
  const x = (index: number) => left + step * index + step / 2;
  const countY = (value: number) => top + (1 - value / maxCount) * plotHeight;
  const rateY = (value: number) => top + (1 - value / maxRate) * plotHeight;
  const linePath = badRates.map((value, index) => `${index === 0 ? "M" : "L"}${x(index)},${rateY(value)}`).join(" ");
  const rateTicks = [0, 2, 4, 6, 8, 10, 12];

  return (
    <div data-slot="sorting-combo-chart" className="w-full">
      <svg className="h-auto w-full" viewBox={`0 0 ${width} ${height}`} role="img" aria-label="排序性趋势（当月）">
        {rateTicks.map((tick) => (
          <g key={tick}>
            <line className="stroke-border" x1={left} x2={width - right} y1={rateY(tick)} y2={rateY(tick)} />
            <text className="fill-ink-subtle text-3xs" x={left - 8} y={rateY(tick) + 3} textAnchor="end">{tick.toFixed(0)}%</text>
            <text className="fill-ink-subtle text-3xs" x={width - right + 8} y={rateY(tick) + 3} textAnchor="start">
              {Math.round(tick / maxRate * maxCount)}
            </text>
          </g>
        ))}
        {counts.map((count, index) => (
          <g key={`${bins[index]}-${count}`}>
            <rect
              className="fill-primary/75"
              x={x(index) - barWidth / 2}
              y={countY(count)}
              width={barWidth}
              height={top + plotHeight - countY(count)}
              rx="3"
            />
            <text className="fill-foreground text-3xs" x={x(index)} y={countY(count) - 7} textAnchor="middle">{count}</text>
            <text className="fill-ink-muted text-3xs" x={x(index)} y={height - 24} textAnchor="middle">{bins[index]}</text>
          </g>
        ))}
        <path className="fill-none stroke-warning [stroke-linecap:round] [stroke-linejoin:round] [stroke-width:3]" d={linePath} />
        {badRates.map((rate, index) => (
          <g key={`${bins[index]}-${rate}`}>
            <circle className="fill-warning" cx={x(index)} cy={rateY(rate)} r="4" />
            <text className="fill-foreground text-3xs" x={x(index) + 6} y={rateY(rate) - 8}>{rate.toFixed(2)}%</text>
          </g>
        ))}
      </svg>
      <div className="mt-2 flex justify-center gap-6 text-xs text-muted-foreground">
        <span className="flex items-center gap-2"><i className="h-2.5 w-5 rounded bg-primary/75" />客户数</span>
        <span className="flex items-center gap-2"><i className="h-0.5 w-5 rounded bg-warning" />坏客户占比</span>
      </div>
    </div>
  );
}