"use client";
import * as React from "react";
import { Bot, Calendar, FolderKanban, Folder as FolderIcon, Layers, Plus, Search, ShieldCheck, Tag, UserRound, X } from "lucide-react";
import { useApp, AUTO_MODEL_KEY } from "@/components/app/store";
import { useApi } from "@/lib/client/api";
import type { Project, FilterKey, FilterToken } from "@/lib/client/types";
import { addFilter, parseQuery, removeFilter } from "@/lib/search/query";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { providerName } from "@/lib/client/providers";
import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/lib/client/hooks";
import { cn } from "@/lib/utils";

type Picker = "model" | "provider" | "project" | "folder" | "date" | "role" | "is";

const PICKERS: { key: Picker; label: string; icon: React.ReactNode }[] = [
  { key: "model", label: "Model", icon: <Bot /> },
  { key: "project", label: "Project", icon: <FolderKanban /> },
  { key: "date", label: "Date", icon: <Calendar /> },
  { key: "role", label: "Role", icon: <UserRound /> },
  { key: "is", label: "Status", icon: <Tag /> },
  { key: "provider", label: "Provider", icon: <ShieldCheck /> },
  { key: "folder", label: "Folder", icon: <FolderIcon /> },
];

/**
 * Filter chips for the search query: active tokens (removable) + "add filter" chips that open a small sheet
 * (ResponsiveDialog) and append tokens through `addFilter()` — the input stays the single source of truth.
 */
export function FilterChips({ query, onChange, className, compact }: { query: string; onChange: (next: string) => void; className?: string; compact?: boolean }) {
  const [picker, setPicker] = React.useState<Picker | null>(null);
  const parsed = React.useMemo(() => parseQuery(query), [query]);
  const activeKeys = new Set(parsed.tokens.map((t) => (t.key === "after" || t.key === "before" ? "date" : t.key)));

  const apply = (key: FilterKey, value: string) => onChange(addFilter(query, key, value) + " ");
  const applyMany = (pairs: [FilterKey, string][]) => {
    let next = query;
    for (const [k, v] of pairs) next = addFilter(next, k, v);
    onChange(next + " ");
  };

  return (
    <>
      <div className={cn("flex items-center gap-1.5 overflow-x-auto scrollbar-none", className)} role="group" aria-label="Search filters">
        {parsed.tokens.map((t) => (
          <TokenChip key={t.raw + t.key} token={t} onRemove={() => onChange(removeFilter(query, t))} compact={compact} />
        ))}
        {PICKERS.filter((p) => !compact || !activeKeys.has(p.key) || p.key === "model" || p.key === "is").map((p) => (
          <button
            key={p.key}
            type="button"
            onClick={() => setPicker(p.key)}
            className={cn("inline-flex shrink-0 items-center gap-1 rounded-full border border-dashed border-border-strong/70 font-medium text-fg-muted transition-colors hover:border-fg hover:text-fg [&_svg]:size-3.5", compact ? "h-7 px-2.5 text-[12px]" : "h-8 px-3 text-[13px]")}
          >
            {activeKeys.has(p.key) ? <Plus className="size-3" /> : p.icon}
            {p.label}
          </button>
        ))}
      </div>
      <FilterPicker picker={picker} onClose={() => setPicker(null)} onPick={apply} onPickMany={applyMany} />
    </>
  );
}

function TokenChip({ token, onRemove, compact }: { token: FilterToken; onRemove: () => void; compact?: boolean }) {
  return (
    <span className={cn("inline-flex shrink-0 items-center gap-1 rounded-full bg-fg pl-2.5 pr-1 font-medium text-bg", compact ? "h-7 text-[12px]" : "h-8 text-[13px]")}>
      <span className="opacity-70">{token.key}:</span>
      <span className="max-w-[140px] truncate">{token.value}</span>
      <button type="button" onClick={onRemove} className="tap ml-0.5 rounded-full p-0.5 hover:bg-bg/20" aria-label={`Remove ${token.key} filter`}>
        <X className="size-3" />
      </button>
    </span>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Picker sheets
 * ---------------------------------------------------------------------------------------------- */
interface Option {
  value: string;
  label: React.ReactNode;
  hint?: React.ReactNode;
  icon?: React.ReactNode;
}

function FilterPicker({ picker, onClose, onPick, onPickMany }: { picker: Picker | null; onClose: () => void; onPick: (key: FilterKey, value: string) => void; onPickMany: (pairs: [FilterKey, string][]) => void }) {
  const { models, connectedProviders, favorites, labels, folders } = useApp();
  const projectsQ = useApi<{ projects: Project[] }>(picker === "project" ? "/api/projects" : null, { shouldRetryOnError: false });
  const [q, setQ] = React.useState("");
  const isMobile = useIsMobile();
  const [after, setAfter] = React.useState("");
  const [before, setBefore] = React.useState("");

  const close = () => {
    setQ("");
    setAfter("");
    setBefore("");
    onClose();
  };
  const pick = (key: FilterKey, value: string) => {
    onPick(key, value);
    close();
  };

  const title = PICKERS.find((p) => p.key === picker)?.label ?? "Filter";
  let options: Option[] = [];
  let key: FilterKey = "model";
  let searchable = false;

  if (picker === "model") {
    key = "model";
    searchable = true;
    const usable = models.filter((m) => connectedProviders.has(m.provider) && m.status !== "deprecated");
    const sorted = [...usable].sort((a, b) => Number(favorites.has(b.key)) - Number(favorites.has(a.key)) || a.displayName.localeCompare(b.displayName));
    options = sorted
      .filter((m) => !q || `${m.displayName} ${m.key} ${labels[m.key] ?? ""}`.toLowerCase().includes(q.toLowerCase()))
      .slice(0, 60)
      .map((m) => ({ value: m.id, label: labels[m.key] ?? m.displayName, hint: providerName(m.provider), icon: <ProviderIcon provider={m.provider} size={16} /> }));
  } else if (picker === "provider") {
    key = "provider";
    options = Array.from(connectedProviders).map((p) => ({ value: p, label: providerName(p), icon: <ProviderIcon provider={p} size={16} /> }));
  } else if (picker === "project") {
    key = "project";
    searchable = true;
    const list = (projectsQ.data?.projects ?? []).filter((p) => !p.archived);
    options = list.filter((p) => !q || p.name.toLowerCase().includes(q.toLowerCase())).map((p) => ({ value: p.name, label: p.name, hint: p.description ?? undefined, icon: p.icon ? <span className="text-[15px]">{p.icon}</span> : <FolderKanban /> }));
  } else if (picker === "folder") {
    key = "folder";
    options = folders.map((f) => ({ value: f.name, label: f.name, icon: <FolderIcon /> }));
  } else if (picker === "role") {
    key = "role";
    options = [
      { value: "user", label: "You", hint: "Messages you wrote", icon: <UserRound /> },
      { value: "assistant", label: "Assistant", hint: "Model replies", icon: <Bot /> },
    ];
  } else if (picker === "is") {
    key = "is";
    options = [
      { value: "pinned", label: "Pinned", icon: <Tag /> },
      { value: "archived", label: "Archived", icon: <Layers /> },
      { value: "shared", label: "Shared publicly", icon: <ShieldCheck /> },
    ];
  }

  const dateOptions: { label: string; pairs: [FilterKey, string][] }[] = [
    { label: "Today", pairs: [["after", "today"]] },
    { label: "Yesterday", pairs: [["after", "yesterday"], ["before", "today"]] },
    { label: "Last 7 days", pairs: [["after", "7d"]] },
    { label: "Last 30 days", pairs: [["after", "30d"]] },
    { label: "This month", pairs: [["after", "month"]] },
  ];

  const rowCls = cn("flex w-full items-center gap-3 rounded-lg px-3 text-left transition-colors hover:bg-bg-muted active:bg-bg-muted [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-fg-muted", isMobile ? "min-h-[50px] text-[15px]" : "min-h-[40px] text-[13.5px]");

  return (
    <ResponsiveDialog open={picker !== null} onOpenChange={(o) => !o && close()} title={`Filter by ${title.toLowerCase()}`} size="sm" snap="half" expandable flush desktopFlush>
      {picker === "date" ? (
        <div className="px-3 pb-4 pt-1">
          <ul className="space-y-0.5">
            {dateOptions.map((d) => (
              <li key={d.label}>
                <button type="button" className={rowCls} onClick={() => { onPickMany(d.pairs); close(); }}>
                  <Calendar />
                  <span className="flex-1">{d.label}</span>
                  <span className="font-mono text-[11px] text-fg-subtle">{d.pairs.map(([k, v]) => `${k}:${v}`).join(" ")}</span>
                </button>
              </li>
            ))}
          </ul>
          <div className="mt-3 rounded-xl bg-bg-subtle p-3">
            <p className="mb-2 text-[12px] font-medium text-fg-muted">Custom range</p>
            <div className="grid grid-cols-2 gap-2">
              <label className="text-[11.5px] text-fg-subtle">
                After
                <input type="date" value={after} onChange={(e) => setAfter(e.target.value)} className="mt-1 block h-10 w-full rounded-md border border-border bg-bg-elevated px-2 text-[15px] text-fg sm:h-9 sm:text-sm" />
              </label>
              <label className="text-[11.5px] text-fg-subtle">
                Before
                <input type="date" value={before} onChange={(e) => setBefore(e.target.value)} className="mt-1 block h-10 w-full rounded-md border border-border bg-bg-elevated px-2 text-[15px] text-fg sm:h-9 sm:text-sm" />
              </label>
            </div>
            <Button
              className="mt-3 w-full"
              size={isMobile ? "lg" : "md"}
              disabled={!after && !before}
              onClick={() => {
                const pairs: [FilterKey, string][] = [];
                if (after) pairs.push(["after", after]);
                if (before) pairs.push(["before", before]);
                onPickMany(pairs);
                close();
              }}
            >
              Apply range
            </Button>
          </div>
        </div>
      ) : (
        <div className="px-3 pb-3 pt-1">
          {searchable ? (
            <div className="relative mb-2">
              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-fg-subtle" />
              <input value={q} onChange={(e) => setQ(e.target.value)} placeholder={`Filter ${title.toLowerCase()}s…`} className="h-11 w-full rounded-lg border border-border bg-bg-elevated pl-9 pr-3 text-[16px] text-fg outline-none placeholder:text-fg-subtle focus:border-accent sm:h-9 sm:text-sm" autoFocus={!isMobile} aria-label={`Filter ${title.toLowerCase()}s`} />
            </div>
          ) : null}
          {picker === "project" && projectsQ.error ? <p className="px-3 py-6 text-center text-[13px] text-fg-muted">Projects are not available yet.</p> : null}
          {options.length === 0 && !(picker === "project" && projectsQ.error) ? <p className="px-3 py-6 text-center text-[13px] text-fg-muted">{picker === "project" && projectsQ.isLoading ? "Loading…" : "Nothing to pick from."}</p> : null}
          <ul className="max-h-[50dvh] space-y-0.5 overflow-y-auto scrollbar-thin md:max-h-80">
            {options.map((o) => (
              <li key={o.value}>
                <button type="button" className={rowCls} onClick={() => pick(key, o.value)}>
                  {o.icon}
                  <span className="min-w-0 flex-1 truncate">{o.label}</span>
                  {o.hint ? <span className="max-w-[40%] truncate text-[11.5px] text-fg-subtle">{o.hint}</span> : null}
                </button>
              </li>
            ))}
          </ul>
          {picker === "model" && !q ? (
            <p className="mt-2 px-3 text-[11.5px] text-fg-subtle">
              Tip: <code className="font-mono">model:{AUTO_MODEL_KEY}</code> is not a filter — pick a real model or type any part of a name.
            </p>
          ) : null}
        </div>
      )}
    </ResponsiveDialog>
  );
}