"use client";

import { ArrowLeft, ClipboardCheck, Eraser, ListChecks } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo, useState, useTransition } from "react";
import { toast } from "sonner";
import { PageHeader } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 { parseQuantity } from "@/shared/quantity";
import { formatStock, quantityInput, WASTE_REASONS, type WasteReason } from "@/shared/stock";
import { submitCountAction } from "../actions";
import type { CountSheet as Data, CountSheetRow } from "../service";
import { ymdLabel } from "./stock-view";

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

type Entry = { actual: string; waste: string; reason: WasteReason | "" };
const EMPTY: Entry = { actual: "", waste: "", reason: "" };

function signed(q: number, unit: string) {
  if (q === 0) return t.count.same;
  return `${q > 0 ? "+" : "−"}${formatStock(Math.abs(q), unit)}`;
}

/** /stok/sayim — liste hâlinde beklenen → sayılan; fark sayım düzeltmesi, bir kısmı fire. */
export function CountSheet({ data }: { data: Data }) {
  const router = useRouter();
  const [entries, setEntries] = useState<Record<string, Entry>>({});
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [onlyDue, setOnlyDue] = useState(data.rows.some((r) => r.count?.due));
  const [note, setNote] = useState("");
  const [pending, start] = useTransition();

  const rows = useMemo(
    () => (onlyDue ? data.rows.filter((r) => r.count?.due) : data.rows),
    [data.rows, onlyDue],
  );
  const groups = useMemo(() => {
    const by = new Map<string, { path: string; rows: CountSheetRow[] }>();
    for (const r of rows) {
      const g = by.get(r.categoryId) ?? { path: r.categoryPath, rows: [] };
      g.rows.push(r);
      by.set(r.categoryId, g);
    }
    return [...by.values()];
  }, [rows]);
  const dueTotal = data.rows.filter((r) => r.count?.due).length;
  const filled = data.rows.filter((r) => entries[r.id]?.actual.trim()).length;

  const set = (id: string, patch: Partial<Entry>) =>
    setEntries((e) => ({ ...e, [id]: { ...(e[id] ?? EMPTY), ...patch } }));

  const fillExpected = () =>
    setEntries((e) => {
      const next = { ...e };
      for (const r of rows)
        if (!next[r.id]?.actual.trim())
          next[r.id] = { ...(next[r.id] ?? EMPTY), actual: quantityInput(Math.max(0, r.expected)) };
      return next;
    });

  const submit = () =>
    start(async () => {
      const sent = data.rows.filter((r) => entries[r.id]?.actual.trim());
      const r = await submitCountAction({
        date: data.today,
        categoryId: data.category?.id ?? "",
        note,
        rows: sent.map((row) => {
          const e = entries[row.id]!;
          // Fire alanı yalnızca sayımda eksik çıkınca geçerlidir.
          const actual = parseQuantity(e.actual);
          const short = actual !== null && actual < row.expected;
          return {
            productTypeId: row.id,
            actualQuantity: e.actual,
            wasteQuantity: short ? e.waste : "",
            wasteReason: short ? e.reason : "",
          };
        }),
      });
      if (r.ok) {
        const d = r.data as { counted: number; adjusted: number };
        toast.success(t.count.done(d.counted, d.adjusted));
        setEntries({});
        setErrors({});
        setNote("");
        router.refresh();
        return;
      }
      const next: Record<string, string> = {};
      for (const [key, msg] of Object.entries(r.fieldErrors ?? {})) {
        const m = /^rows\.(\d+)\.(\w+)$/.exec(key);
        const row = m ? sent[Number(m[1])] : undefined;
        if (row && msg) next[`${row.id}.${m![2]}`] = msg;
      }
      setErrors(next);
      toast.error(r.fieldErrors?.rows ?? r.error);
    });

  return (
    <div className="flex flex-col gap-4">
      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
        <Link href="/stok">
          <ArrowLeft />
          {t.count.back}
        </Link>
      </Button>
      <PageHeader
        title={data.category ? `${t.count.title}: ${data.category.path}` : t.count.title}
        description={t.count.description}
      />

      <div className="flex flex-wrap items-center gap-3">
        <Select
          value={data.category?.id ?? ALL}
          onValueChange={(v) =>
            router.push(v === ALL ? "/stok/sayim" : `/stok/sayim?kategori=${v}`)
          }
        >
          <SelectTrigger className="w-full sm:w-72" aria-label={t.count.category}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value={ALL}>{t.count.allCategories}</SelectItem>
            {data.categories.map((c) => (
              <SelectItem key={c.id} value={c.id}>
                <span style={{ paddingLeft: c.depth * 12 }}>{c.path.split(" › ").at(-1)}</span>
                {c.due ? (
                  <span className="text-xs text-amber-700 dark:text-amber-400">
                    {" "}
                    · {t.count.dueCount(c.due)}
                  </span>
                ) : null}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        {dueTotal > 0 ? (
          <label className="flex items-center gap-2 text-sm">
            <Checkbox checked={onlyDue} onCheckedChange={(x) => setOnlyDue(x === true)} />
            {t.count.onlyDue} ({dueTotal})
          </label>
        ) : null}
        {data.canWrite && rows.length ? (
          <div className="flex gap-2 sm:ml-auto">
            <Button
              size="sm"
              variant="outline"
              onClick={fillExpected}
              title={t.count.fillExpectedHint}
            >
              <ListChecks />
              {t.count.fillExpected}
            </Button>
            {filled ? (
              <Button size="sm" variant="ghost" onClick={() => setEntries({})}>
                <Eraser />
                {t.count.clear}
              </Button>
            ) : null}
          </div>
        ) : null}
      </div>

      {rows.length === 0 ? (
        <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
          {t.count.empty}
        </p>
      ) : null}

      {groups.map((g) => (
        <section key={g.path} className="flex flex-col gap-2">
          <h2 className="text-sm font-medium text-muted-foreground">{g.path}</h2>
          <ul className="divide-y rounded-xl border bg-card">
            {g.rows.map((r) => (
              <CountRow
                key={r.id}
                row={r}
                entry={entries[r.id] ?? EMPTY}
                errors={errors}
                disabled={!data.canWrite || pending}
                onChange={(patch) => set(r.id, patch)}
              />
            ))}
          </ul>
        </section>
      ))}

      {data.canWrite && data.rows.length ? (
        <div className="sticky bottom-[calc(4rem+env(safe-area-inset-bottom))] z-10 -mx-4 flex flex-wrap items-center gap-3 border-t bg-background/95 px-4 py-3 backdrop-blur md:bottom-0 md:mx-0 md:rounded-xl md:border">
          <Input
            value={note}
            onChange={(e) => setNote(e.target.value)}
            placeholder={t.count.note}
            aria-label={t.count.note}
            maxLength={300}
            className="min-w-40 flex-1"
          />
          <span className="text-sm text-muted-foreground tabular-nums">
            {t.count.counted(filled)}
          </span>
          <Button onClick={submit} disabled={pending || filled === 0}>
            <ClipboardCheck />
            {t.count.submit}
          </Button>
        </div>
      ) : null}
    </div>
  );
}

function CountRow({
  row,
  entry,
  errors,
  disabled,
  onChange,
}: {
  row: CountSheetRow;
  entry: Entry;
  errors: Record<string, string>;
  disabled: boolean;
  onChange: (patch: Partial<Entry>) => void;
}) {
  const actual = entry.actual.trim() ? parseQuantity(entry.actual) : null;
  const diff = actual === null ? null : actual - row.expected;
  const shortage = diff !== null && diff < 0 ? -diff : 0;
  const actualError = errors[`${row.id}.actualQuantity`];
  const wasteError = errors[`${row.id}.wasteQuantity`] ?? errors[`${row.id}.wasteReason`];
  const inputId = `count-${row.id}`;
  return (
    <li className="flex flex-col gap-2 p-3">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <div className="min-w-0 flex-1 basis-40">
          <label htmlFor={inputId} className="flex flex-wrap items-center gap-1.5 font-medium">
            <span className="truncate">{row.name}</span>
            {row.count?.due ? (
              <Badge
                variant="outline"
                className="border-amber-500/50 text-amber-700 dark:text-amber-400"
              >
                {t.count.dueBadge(row.count.overdueDays)}
              </Badge>
            ) : null}
          </label>
          <p className="truncate text-xs text-muted-foreground">
            {[
              row.location,
              row.count
                ? row.count.lastDate
                  ? t.count.lastCount(ymdLabel(row.count.lastDate))
                  : t.count.neverCounted
                : null,
            ]
              .filter(Boolean)
              .join(" · ")}
          </p>
        </div>
        <div className="flex items-center gap-3">
          <div className="w-20 text-right text-sm tabular-nums">
            <p className="text-xs text-muted-foreground">{t.count.expected}</p>
            {formatStock(Math.max(0, row.expected), row.unit)}
          </div>
          <div className="w-28">
            <span className="text-xs text-muted-foreground">
              {t.count.actual} ({row.unit})
            </span>
            <Input
              id={inputId}
              inputMode="decimal"
              value={entry.actual}
              onChange={(e) => onChange({ actual: e.target.value })}
              disabled={disabled}
              aria-invalid={Boolean(actualError) || (entry.actual.trim() !== "" && actual === null)}
              className="h-8 tabular-nums"
            />
          </div>
          <div className="w-20 text-right text-sm tabular-nums">
            <p className="text-xs text-muted-foreground">{t.count.diff}</p>
            <span
              className={cn(
                diff === null
                  ? "text-muted-foreground"
                  : diff > 0
                    ? "text-income"
                    : diff < 0
                      ? "text-expense"
                      : "text-muted-foreground",
              )}
            >
              {diff === null ? "—" : signed(diff, row.unit)}
            </span>
          </div>
        </div>
      </div>
      {actualError ? <p className="text-xs text-destructive">{actualError}</p> : null}
      {shortage > 0 ? (
        <div className="flex flex-wrap items-center gap-2 rounded-lg bg-muted/50 p-2 text-sm">
          <span className="text-xs text-muted-foreground">{t.count.markWaste}:</span>
          <Input
            inputMode="decimal"
            value={entry.waste}
            onChange={(e) => onChange({ waste: e.target.value })}
            disabled={disabled}
            placeholder={t.count.wasteMax(formatStock(shortage, row.unit))}
            aria-label={`${row.name}: ${t.count.wasteQuantity}`}
            aria-invalid={Boolean(errors[`${row.id}.wasteQuantity`])}
            className="h-8 w-36 tabular-nums"
          />
          <Select
            value={entry.reason}
            onValueChange={(v) => onChange({ reason: v as WasteReason })}
            disabled={disabled || !entry.waste.trim()}
          >
            <SelectTrigger
              size="sm"
              className="w-48"
              aria-label={`${row.name}: ${t.fields.wasteReason}`}
              aria-invalid={Boolean(errors[`${row.id}.wasteReason`])}
            >
              <SelectValue placeholder={t.fields.wasteReason} />
            </SelectTrigger>
            <SelectContent>
              {WASTE_REASONS.map((w) => (
                <SelectItem key={w} value={w}>
                  {t.wasteReasons[w]}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {wasteError ? <p className="w-full text-xs text-destructive">{wasteError}</p> : null}
        </div>
      ) : null}
    </li>
  );
}