"use client";

import { ChevronLeft, ChevronRight, Download, Filter, Paperclip, Plus, X } from "lucide-react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { useQuickAdd } from "@/components/layout/quick-add";
import { MoneyInput } from "@/components/money-input";
import { ResponsiveDialog } from "@/components/responsive-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { formatMoney } from "@/shared/format";
import type { TransactionFilters } from "@/shared/schemas/transaction";
import { TRANSACTION_STATUSES, TRANSACTION_TYPES } from "@/shared/transactions";
import type { TransactionFormOptions, TransactionListItem, TransactionPage } from "../service";
import {
  Amount,
  dayLabel,
  RowIcon,
  rowSubtitle,
  rowTitle,
  signed,
  useTransactionDetail,
} from "./transaction-parts";

const t = tr.transactions;
const ALL = "__all__";

// --- Filtreler ---

type Options = TransactionFormOptions & { members: { id: string; name: string }[] };

function countActive(f: TransactionFilters) {
  return (
    [
      "from",
      "to",
      "type",
      "hesap",
      "kategori",
      "kisi",
      "durum",
      "min",
      "max",
      "etiket",
      "q",
    ] as const
  ).filter((k) => f[k] !== undefined && f[k] !== "").length;
}

function FiltersDialog({
  open,
  onOpenChange,
  filters,
  raw,
  options,
}: {
  open: boolean;
  onOpenChange: (o: boolean) => void;
  filters: TransactionFilters;
  raw: Record<string, string>;
  options: Options;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [v, setV] = useState<Record<string, string>>(raw);
  const set = (k: string, value: string) => setV((prev) => ({ ...prev, [k]: value }));
  const f = t.filters;

  function apply(next: Record<string, string>) {
    const params = new URLSearchParams();
    for (const [k, value] of Object.entries(next)) if (value && k !== "sayfa") params.set(k, value);
    router.push(params.size ? `${pathname}?${params}` : pathname);
    onOpenChange(false);
  }

  const select = (key: string, label: string, items: { value: string; label: string }[]) => (
    <Field>
      <FieldLabel htmlFor={`flt-${key}`}>{label}</FieldLabel>
      <Select value={v[key] || ALL} onValueChange={(x) => set(key, x === ALL ? "" : x)}>
        <SelectTrigger id={`flt-${key}`} className="w-full">
          <SelectValue>{items.find((i) => i.value === v[key])?.label ?? f.all}</SelectValue>
        </SelectTrigger>
        <SelectContent className="max-h-72">
          <SelectItem value={ALL}>{f.all}</SelectItem>
          {items.map((i) => (
            <SelectItem key={i.value} value={i.value}>
              {i.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </Field>
  );

  return (
    <ResponsiveDialog
      open={open}
      onOpenChange={(o) => {
        if (o) setV(raw);
        onOpenChange(o);
      }}
      title={f.title}
      footer={
        <>
          <Button variant="outline" onClick={() => apply({})} disabled={!countActive(filters)}>
            {f.clear}
          </Button>
          <Button onClick={() => apply(v)}>{f.apply}</Button>
        </>
      }
    >
      <form
        onSubmit={(e) => {
          e.preventDefault();
          apply(v);
        }}
      >
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="flt-q">{f.search}</FieldLabel>
            <Input
              id="flt-q"
              value={v.q ?? ""}
              onChange={(e) => set("q", e.target.value)}
              placeholder={f.searchPlaceholder}
            />
          </Field>
          <div className="grid grid-cols-2 gap-3">
            <Field>
              <FieldLabel htmlFor="flt-from">{f.from}</FieldLabel>
              <Input
                id="flt-from"
                type="date"
                value={v.from ?? ""}
                onChange={(e) => set("from", e.target.value)}
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="flt-to">{f.to}</FieldLabel>
              <Input
                id="flt-to"
                type="date"
                value={v.to ?? ""}
                onChange={(e) => set("to", e.target.value)}
              />
            </Field>
          </div>
          <div className="grid grid-cols-2 gap-3">
            {select(
              "type",
              f.type,
              TRANSACTION_TYPES.map((x) => ({ value: x, label: t.types[x] })),
            )}
            {select(
              "durum",
              f.status,
              TRANSACTION_STATUSES.map((x) => ({ value: x, label: t.statuses[x] })),
            )}
          </div>
          {select(
            "hesap",
            f.account,
            options.accounts.map((a) => ({ value: a.id, label: a.name })),
          )}
          {select(
            "kategori",
            f.category,
            options.categories.map((c) => ({
              value: c.id,
              label: `${c.kind === "income" ? "↑" : "↓"} ${c.path}`,
            })),
          )}
          {select(
            "kisi",
            f.person,
            options.members.map((m) => ({ value: m.id, label: m.name })),
          )}
          <div className="grid grid-cols-2 gap-3">
            <Field>
              <FieldLabel htmlFor="flt-min">{f.min}</FieldLabel>
              <MoneyInput id="flt-min" value={v.min ?? ""} onChange={(x) => set("min", x)} />
            </Field>
            <Field>
              <FieldLabel htmlFor="flt-max">{f.max}</FieldLabel>
              <MoneyInput id="flt-max" value={v.max ?? ""} onChange={(x) => set("max", x)} />
            </Field>
          </div>
          <Field>
            <FieldLabel htmlFor="flt-tag">{f.tag}</FieldLabel>
            <Input
              id="flt-tag"
              value={v.etiket ?? ""}
              onChange={(e) => set("etiket", e.target.value)}
            />
          </Field>
          <button type="submit" hidden />
        </FieldGroup>
      </form>
    </ResponsiveDialog>
  );
}

// --- Ayrıntı ---

// --- Ana görünüm ---

export function TransactionsView({
  data,
  filters,
  raw,
  options,
  canWrite,
}: {
  data: TransactionPage;
  filters: TransactionFilters;
  raw: Record<string, string>;
  options: Options;
  canWrite: boolean;
}) {
  const pathname = usePathname();
  const { openQuickAdd } = useQuickAdd();
  const [filtersOpen, setFiltersOpen] = useState(false);
  const { openDetail, element: detailElement } = useTransactionDetail(canWrite);
  const active = countActive(filters);

  const pageHref = (page: number) => {
    const params = new URLSearchParams(raw);
    if (page > 1) params.set("sayfa", String(page));
    else params.delete("sayfa");
    return params.size ? `${pathname}?${params}` : pathname;
  };
  const exportHref = () => {
    const params = new URLSearchParams(raw);
    params.delete("sayfa");
    return `/islemler/disa-aktar${params.size ? `?${params}` : ""}`;
  };

  // Sayfadaki işlemleri güne göre grupla (liste zaten tarihe göre sıralı).
  const groups: { date: string; items: TransactionListItem[] }[] = [];
  for (const item of data.items) {
    const last = groups.at(-1);
    if (last?.date === item.date) last.items.push(item);
    else groups.push({ date: item.date, items: [item] });
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Button variant="outline" onClick={() => setFiltersOpen(true)}>
          <Filter />
          {t.filters.open}
          {active ? <Badge className="ml-1">{t.filters.active(active)}</Badge> : null}
        </Button>
        {active ? (
          <Button variant="ghost" asChild>
            <Link href={pathname}>
              <X />
              {t.filters.clear}
            </Link>
          </Button>
        ) : null}
        <Button variant="ghost" asChild className="ml-auto">
          {/* Dosya indirme: istemci gezinmesi değil, tam istek. */}
          <a href={exportHref()} download>
            <Download />
            <span className="hidden sm:inline">{t.export}</span>
          </a>
        </Button>
        {canWrite ? (
          <Button onClick={() => openQuickAdd()}>
            <Plus />
            {t.new}
          </Button>
        ) : null}
      </div>

      <div className="grid grid-cols-3 gap-3">
        {(
          [
            ["income", data.sums.incomeMinor, "text-income"],
            ["expense", data.sums.expenseMinor, "text-expense"],
            ["net", data.sums.incomeMinor - data.sums.expenseMinor, ""],
          ] as const
        ).map(([key, value, tone]) => (
          <Card key={key} size="sm">
            <CardHeader>
              <CardDescription>{t.list.sums[key]}</CardDescription>
              <CardTitle
                className={cn(
                  "text-base tabular-nums sm:text-lg",
                  tone,
                  key === "net" && value < 0 && "text-expense",
                )}
              >
                {formatMoney(value)}
              </CardTitle>
            </CardHeader>
          </Card>
        ))}
      </div>

      {data.items.length === 0 ? (
        <p className="rounded-xl border border-dashed p-8 text-center text-muted-foreground">
          {active ? t.list.empty : t.list.emptyAll}
        </p>
      ) : (
        groups.map((g) => {
          const net = g.items.reduce(
            (a, i) => a + (i.status === "posted" ? signed(i.type, i.amountMinor) : 0),
            0,
          );
          return (
            <section key={g.date} aria-label={dayLabel(g.date)} className="flex flex-col gap-1.5">
              <div className="flex items-center justify-between px-1 text-xs font-medium text-muted-foreground">
                <h2 className="first-letter:uppercase">{dayLabel(g.date)}</h2>
                <span
                  className={cn(
                    "tabular-nums",
                    net > 0 && "text-income",
                    net < 0 && "text-expense",
                  )}
                  title={t.list.dayTotal}
                >
                  {net === 0 ? "" : `${net > 0 ? "+" : "−"}${formatMoney(Math.abs(net))}`}
                </span>
              </div>
              <ul className="divide-y rounded-xl border bg-card">
                {g.items.map((item) => (
                  <li key={item.id}>
                    <button
                      type="button"
                      onClick={() => openDetail(item.id)}
                      className="flex w-full items-center gap-3 p-3 text-left outline-none hover:bg-muted/50 focus-visible:bg-muted"
                    >
                      <RowIcon item={item} />
                      <span className="min-w-0 flex-1">
                        <span className="flex items-center gap-1.5">
                          <span className="truncate font-medium">{rowTitle(item)}</span>
                          {item.status !== "posted" ? (
                            <Badge variant="outline">{t.statuses[item.status]}</Badge>
                          ) : null}
                          {item.attachmentCount ? (
                            <Paperclip className="size-3.5 shrink-0 text-muted-foreground" />
                          ) : null}
                        </span>
                        <span className="block truncate text-xs text-muted-foreground">
                          {rowSubtitle(item)}
                        </span>
                      </span>
                      <Amount
                        type={item.type}
                        amountMinor={item.amountMinor}
                        className={cn(item.status !== "posted" && "opacity-60")}
                      />
                    </button>
                  </li>
                ))}
              </ul>
            </section>
          );
        })
      )}

      {data.pageCount > 1 ? (
        <nav
          aria-label={tr.common.page(data.page, data.pageCount)}
          className="flex items-center justify-between text-sm text-muted-foreground"
        >
          <span>{t.list.total(data.total)}</span>
          <div className="flex items-center gap-2">
            <span className="tabular-nums">{tr.common.page(data.page, data.pageCount)}</span>
            <Button
              variant="outline"
              size="icon-sm"
              asChild
              disabled={data.page <= 1}
              aria-label={tr.common.previous}
            >
              <Link
                href={pageHref(data.page - 1)}
                aria-disabled={data.page <= 1}
                className={cn(data.page <= 1 && "pointer-events-none opacity-50")}
              >
                <ChevronLeft />
              </Link>
            </Button>
            <Button variant="outline" size="icon-sm" asChild aria-label={tr.common.next}>
              <Link
                href={pageHref(data.page + 1)}
                aria-disabled={data.page >= data.pageCount}
                className={cn(data.page >= data.pageCount && "pointer-events-none opacity-50")}
              >
                <ChevronRight />
              </Link>
            </Button>
          </div>
        </nav>
      ) : data.total ? (
        <p className="text-sm text-muted-foreground">{t.list.total(data.total)}</p>
      ) : null}

      <FiltersDialog
        open={filtersOpen}
        onOpenChange={setFiltersOpen}
        filters={filters}
        raw={raw}
        options={options}
      />
      {detailElement}
    </div>
  );
}