"use client";
import * as React from "react";
import { CalendarRange, X } from "lucide-react";
import { Segmented, ChipRow } from "@/components/ui/segmented";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Input, Field } from "@/components/ui/input";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { providerName } from "@/lib/client/providers";
import { cn } from "@/lib/utils";
import type { ProviderId } from "@/lib/client/types";
import type { UsageRangeKey } from "./types";

export interface UsageQueryState {
  range: UsageRangeKey;
  from: string; // YYYY-MM-DD when range === "custom"
  to: string;
  provider: ProviderId | "";
  modelKey: string;
  projectId: string;
}

export const DEFAULT_QUERY: UsageQueryState = { range: "30d", from: "", to: "", provider: "", modelKey: "", projectId: "" };

const RANGE_OPTIONS: { value: UsageRangeKey; label: string; short: string }[] = [
  { value: "today", label: "Today", short: "Today" },
  { value: "7d", label: "7 days", short: "7d" },
  { value: "30d", label: "30 days", short: "30d" },
  { value: "90d", label: "90 days", short: "90d" },
  { value: "custom", label: "Custom", short: "Custom" },
];

export function rangeLabel(q: UsageQueryState): string {
  if (q.range === "custom" && q.from && q.to) return `${fmt(q.from)} – ${fmt(q.to)}`;
  if (q.range === "all") return "All time";
  return RANGE_OPTIONS.find((r) => r.value === q.range)?.label ?? "30 days";
}
function fmt(ymd: string): string {
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd);
  if (!m) return ymd;
  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3])).toLocaleDateString("en-US", { month: "short", day: "numeric" });
}
function today(): string {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}

/** Range segmented control + custom-dates sheet. One filter row scopes every chart below it. */
export function RangePicker({ value, onChange, compact }: { value: UsageQueryState; onChange: (patch: Partial<UsageQueryState>) => void; compact?: boolean }) {
  const [open, setOpen] = React.useState(false);
  const [from, setFrom] = React.useState(value.from);
  const [to, setTo] = React.useState(value.to);
  const max = today();
  const valid = /^\d{4}-\d{2}-\d{2}$/.test(from) && /^\d{4}-\d{2}-\d{2}$/.test(to) && from <= to;

  const openCustom = () => {
    setFrom(value.from || defaultFrom());
    setTo(value.to || max);
    setOpen(true);
  };
  const apply = () => {
    if (!valid) return;
    onChange({ range: "custom", from, to });
    setOpen(false);
  };

  return (
    <>
      <Segmented<UsageRangeKey>
        ariaLabel="Time range"
        size={compact ? "sm" : "md"}
        value={value.range}
        onChange={(v) => (v === "custom" ? openCustom() : onChange({ range: v, from: "", to: "" }))}
        options={RANGE_OPTIONS.map((r) => ({ value: r.value, label: r.value === "custom" && value.range === "custom" && value.from ? rangeLabel(value) : compact ? r.short : r.label, icon: r.value === "custom" ? <CalendarRange /> : undefined }))}
      />
      <ResponsiveDialog
        open={open}
        onOpenChange={setOpen}
        size="sm"
        title="Custom range"
        description="Whole days in your local time zone, up to one year."
        footer={
          <div className="flex gap-2">
            <Button variant="ghost" className="flex-1 md:flex-none" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button variant="accent" className="flex-1 md:flex-none" disabled={!valid} onClick={apply}>
              Apply
            </Button>
          </div>
        }
      >
        <div className="grid gap-3 pt-1 sm:grid-cols-2">
          <Field label="From" htmlFor="usage-from">
            <Input id="usage-from" type="date" value={from} max={to || max} onChange={(e) => setFrom(e.target.value)} className="h-11 text-[16px] md:h-9" />
          </Field>
          <Field label="To" htmlFor="usage-to" error={from && to && from > to ? "End before start." : null}>
            <Input id="usage-to" type="date" value={to} min={from || undefined} max={max} onChange={(e) => setTo(e.target.value)} className="h-11 text-[16px] md:h-9" />
          </Field>
        </div>
        <div className="mt-3 flex flex-wrap gap-1.5">
          {[
            { label: "This month", get: () => [max.slice(0, 8) + "01", max] },
            { label: "Last month", get: () => lastMonth() },
            { label: "Last 6 months", get: () => [shiftDays(-182), max] },
            { label: "This year", get: () => [`${max.slice(0, 4)}-01-01`, max] },
          ].map((p) => (
            <button key={p.label} type="button" onClick={() => { const [a, b] = p.get(); setFrom(a); setTo(b); }} className="tap h-8 rounded-full border border-border px-3 text-[12.5px] text-fg-muted hover:border-border-strong hover:text-fg">
              {p.label}
            </button>
          ))}
        </div>
      </ResponsiveDialog>
    </>
  );
}

function defaultFrom(): string {
  return shiftDays(-29);
}
function shiftDays(n: number): string {
  const d = new Date();
  d.setDate(d.getDate() + n);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
}
function lastMonth(): [string, string] {
  const d = new Date();
  const first = new Date(d.getFullYear(), d.getMonth() - 1, 1);
  const last = new Date(d.getFullYear(), d.getMonth(), 0);
  const f = (x: Date) => `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, "0")}-${String(x.getDate()).padStart(2, "0")}`;
  return [f(first), f(last)];
}

export interface FacetData {
  providers: ProviderId[];
  models: { modelKey: string; provider: ProviderId; requests: number }[];
  projects: { id: string; name: string; icon: string | null; color: string | null }[];
}

/** Provider / model / project chips. Chips scroll horizontally on phones; "All" clears each dimension. */
export function FilterChips({ value, onChange, facets, modelLabel }: { value: UsageQueryState; onChange: (patch: Partial<UsageQueryState>) => void; facets: FacetData | null; modelLabel: (key: string) => string }) {
  const providers = facets?.providers ?? [];
  const models = (facets?.models ?? []).filter((m) => !value.provider || m.provider === value.provider).slice(0, 10);
  const projects = facets?.projects ?? [];
  const showProviders = providers.length > 1 || value.provider;
  const showModels = models.length > 1 || value.modelKey;
  const showProjects = projects.length > 0;
  if (!showProviders && !showModels && !showProjects) return null;
  return (
    <div className="space-y-2">
      {showProviders ? (
        <ChipRow<string>
          value={value.provider || "all"}
          onChange={(v) => onChange({ provider: v === "all" ? "" : (v as ProviderId), modelKey: "" })}
          options={[{ value: "all", label: "All providers" }, ...providers.map((p) => ({ value: p, label: providerName(p), icon: <ProviderIcon provider={p} size={13} /> }))]}
          className="-mx-4 px-4 md:mx-0 md:px-0"
        />
      ) : null}
      {showModels ? (
        <ChipRow<string>
          value={value.modelKey || "all"}
          onChange={(v) => onChange({ modelKey: v === "all" ? "" : v })}
          options={[{ value: "all", label: "All models" }, ...models.map((m) => ({ value: m.modelKey, label: modelLabel(m.modelKey), icon: <ProviderIcon provider={m.provider} size={13} />, count: m.requests }))]}
          className="-mx-4 px-4 md:mx-0 md:px-0"
        />
      ) : null}
      {showProjects ? (
        <ChipRow<string>
          value={value.projectId || "all"}
          onChange={(v) => onChange({ projectId: v === "all" ? "" : v })}
          options={[{ value: "all", label: "All projects" }, ...projects.map((p) => ({ value: p.id, label: p.name, icon: p.icon && /^\p{Extended_Pictographic}/u.test(p.icon) ? <span aria-hidden>{p.icon}</span> : <span className="size-2.5 rounded-full" style={{ background: p.color ?? "var(--fg-subtle)" }} aria-hidden /> }))]}
          className="-mx-4 px-4 md:mx-0 md:px-0"
        />
      ) : null}
    </div>
  );
}

/** Summary of active filters with one-tap clear (shown above the KPIs when anything is narrowed). */
export function ActiveFilters({ value, onChange, modelLabel, projects }: { value: UsageQueryState; onChange: (patch: Partial<UsageQueryState>) => void; modelLabel: (key: string) => string; projects: FacetData["projects"] }) {
  const items: { key: keyof UsageQueryState; label: string }[] = [];
  if (value.provider) items.push({ key: "provider", label: providerName(value.provider) });
  if (value.modelKey) items.push({ key: "modelKey", label: modelLabel(value.modelKey) });
  if (value.projectId) items.push({ key: "projectId", label: projects.find((p) => p.id === value.projectId)?.name ?? "Project" });
  if (!items.length) return null;
  return (
    <div className="flex flex-wrap items-center gap-1.5 text-xs text-fg-muted">
      <span>Filtered by</span>
      {items.map((i) => (
        <button key={i.key} type="button" onClick={() => onChange({ [i.key]: "" } as Partial<UsageQueryState>)} className={cn("tap inline-flex h-7 items-center gap-1 rounded-full bg-bg-muted px-2.5 font-medium text-fg hover:bg-border")} aria-label={`Remove filter ${i.label}`}>
          {i.label}
          <X className="size-3" />
        </button>
      ))}
      <button type="button" onClick={() => onChange({ provider: "", modelKey: "", projectId: "" })} className="tap text-accent hover:underline">
        Clear all
      </button>
    </div>
  );
}