"use client";

import { ArrowLeft, Plus, Trash2 } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo, useState } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { AttachmentPicker } from "@/features/attachments/components/attachment-picker";
import type { AttachmentInfo } from "@/features/attachments/service";
import { StoreDot } from "@/features/prices/components/offers-list";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { formatMoney } from "@/shared/format";
import { formatMoneyInput, parseMoney } from "@/shared/money";
import { parseQuantity } from "@/shared/quantity";
import type { LeftoverAction } from "@/shared/shopping";
import { quantityInput } from "@/shared/stock";
import { completeShoppingAction } from "../actions";
import type { CompletionSheet } from "../completion";
import type { ShoppingItemView } from "../service";

const t = tr.shopping.complete;
/** Ürün tipi kaleminde marka belirtmeden alım (Radix Select boş değer kabul etmez). */
const GENERIC = "__generic__";

type Line = {
  productId: string;
  storeId: string;
  packages: string;
  amount: string;
  /** Kullanıcı tutarı elle değiştirdi: fiyattan yeniden hesaplanmaz. */
  touched: boolean;
};
type ItemLine = Line & { bought: boolean };
type Extra = Line & { key: number };

/** Paket fiyatı biliniyorsa tutar = fiyat × paket. */
function priceAmount(sheet: CompletionSheet, l: Pick<Line, "productId" | "storeId" | "packages">) {
  const price = sheet.prices[`${l.productId}:${l.storeId}`];
  const q = parseQuantity(l.packages);
  return price && q ? formatMoneyInput(Math.round((price * q) / 1000)) : "";
}

function withPrice(sheet: CompletionSheet, l: Line, patch: Partial<Line>): Line {
  const next = { ...l, ...patch };
  if ("amount" in patch) return { ...next, touched: true };
  if (next.touched) return next;
  return { ...next, amount: priceAmount(sheet, next) || next.amount };
}

function initialLine(sheet: CompletionSheet, item: ShoppingItemView): Line {
  const plan = sheet.planned[item.id];
  const typeOf = (id: string | null) => sheet.products.find((p) => p.id === id)?.productTypeId;
  const typeId = item.kind === "product" ? typeOf(item.productId) : item.productTypeId;
  const productId =
    item.kind === "text"
      ? ""
      : (plan?.productId ??
        item.productId ??
        sheet.products.find((p) => p.productTypeId === typeId)?.id ??
        GENERIC);
  const packages = plan
    ? String(plan.packages)
    : item.quantity && (item.kind === "product" || productId === GENERIC)
      ? quantityInput(item.quantity)
      : "1";
  const base = {
    productId,
    storeId: plan?.storeId ?? defaultStore(sheet),
    packages,
    amount: "",
    touched: false,
  };
  return { ...base, amount: priceAmount(sheet, base) };
}

/** Planda en çok kalemin gittiği mağaza; plan yoksa ilk mağaza. */
function defaultStore(sheet: CompletionSheet) {
  const count = new Map<string, number>();
  for (const p of Object.values(sheet.planned))
    count.set(p.storeId, (count.get(p.storeId) ?? 0) + 1);
  return [...count.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? sheet.stores[0]?.id ?? "";
}

/** Mağazaya uygun varsayılan hesap: geçerli yemek kartı, yoksa banka/nakit, yoksa ilk hesap. */
function defaultAccount(sheet: CompletionSheet, storeId: string) {
  const store = sheet.stores.find((s) => s.id === storeId);
  const meal = sheet.accounts.find(
    (a) =>
      a.type === "meal_card" && a.mealCardProvider && store?.providers.includes(a.mealCardProvider),
  );
  return (
    meal?.id ??
    sheet.accounts.find((a) => a.type === "bank" || a.type === "cash")?.id ??
    sheet.accounts[0]?.id ??
    ""
  );
}

function LineFields({
  sheet,
  line,
  products,
  text,
  onChange,
  errors,
  idPrefix,
  genericUnit,
}: {
  sheet: CompletionSheet;
  line: Line;
  products: CompletionSheet["products"];
  text: boolean;
  onChange: (patch: Partial<Line>) => void;
  errors: Record<string, string | undefined>;
  idPrefix: string;
  /** Ürün tipi kalemi: markasız seçeneği ve tipin birimi. */
  genericUnit?: string;
}) {
  const generic = line.productId === GENERIC;
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-[minmax(0,2fr)_minmax(0,1.4fr)_5rem_7rem]">
      {text ? (
        <p className="col-span-2 self-center text-xs text-muted-foreground sm:col-span-1">
          {tr.shopping.complete.textItem}
        </p>
      ) : (
        <Field data-invalid={Boolean(errors.productId)} className="col-span-2 sm:col-span-1">
          <FieldLabel htmlFor={`${idPrefix}-p`} className="text-xs">
            {t.product}
          </FieldLabel>
          <Select value={line.productId} onValueChange={(x) => onChange({ productId: x })}>
            <SelectTrigger id={`${idPrefix}-p`} className="w-full">
              <SelectValue placeholder={tr.shopping.validation.product} />
            </SelectTrigger>
            <SelectContent className="max-h-72">
              {genericUnit ? (
                <SelectItem value={GENERIC}>{t.generic(genericUnit)}</SelectItem>
              ) : null}
              {products.map((p) => (
                <SelectItem key={p.id} value={p.id}>
                  {p.label}{" "}
                  <span className="text-xs text-muted-foreground">({p.packageLabel})</span>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.productId ? <FieldError>{errors.productId}</FieldError> : null}
        </Field>
      )}
      <Field data-invalid={Boolean(errors.storeId)} className="col-span-2 sm:col-span-1">
        <FieldLabel htmlFor={`${idPrefix}-s`} className="text-xs">
          {t.store}
        </FieldLabel>
        <Select value={line.storeId} onValueChange={(x) => onChange({ storeId: x })}>
          <SelectTrigger id={`${idPrefix}-s`} className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent className="max-h-72">
            {sheet.stores.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                <StoreDot slot={s.slot} />
                {s.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </Field>
      {text ? (
        <span className="hidden sm:block" />
      ) : (
        <Field data-invalid={Boolean(errors.packages)}>
          <FieldLabel htmlFor={`${idPrefix}-q`} className="text-xs">
            {generic && genericUnit ? `${t.quantity} (${genericUnit})` : t.packages}
          </FieldLabel>
          <Input
            id={`${idPrefix}-q`}
            inputMode="decimal"
            value={line.packages}
            onChange={(e) => onChange({ packages: e.target.value })}
            className="text-right tabular-nums"
            aria-invalid={Boolean(errors.packages)}
          />
        </Field>
      )}
      <Field
        data-invalid={Boolean(errors.amount)}
        className={text ? "col-span-2 sm:col-span-1" : ""}
      >
        <FieldLabel htmlFor={`${idPrefix}-a`} className="text-xs">
          {t.amount}
        </FieldLabel>
        <Input
          id={`${idPrefix}-a`}
          inputMode="decimal"
          value={line.amount}
          onChange={(e) => onChange({ amount: e.target.value })}
          className="text-right tabular-nums"
          aria-invalid={Boolean(errors.amount)}
        />
        {errors.amount ? <FieldError>{errors.amount}</FieldError> : null}
      </Field>
    </div>
  );
}

/** /alisveris/:id/tamamla — alınanları gir, mağaza başına hesap ve fiş, alınmayanlar. */
export function CompletionForm({ sheet }: { sheet: CompletionSheet }) {
  const router = useRouter();
  const anyChecked = sheet.items.some((i) => i.checked);
  const [date, setDate] = useState(sheet.today);
  const [rows, setRows] = useState<Record<string, ItemLine>>(() =>
    Object.fromEntries(
      sheet.items.map((i) => [
        i.id,
        { ...initialLine(sheet, i), bought: anyChecked ? i.checked : !i.archived },
      ]),
    ),
  );
  const [extras, setExtras] = useState<Extra[]>([]);
  const [accounts, setAccounts] = useState<Record<string, string>>({});
  const [receipts, setReceipts] = useState<Record<string, AttachmentInfo[]>>({});
  const [uploading, setUploading] = useState(0);
  const [fallback, setFallback] = useState(sheet.defaultFallbackCategoryId ?? "");
  const [leftover, setLeftover] = useState<{
    action: LeftoverAction;
    target: string;
    name: string;
  }>({
    action: sheet.otherLists.length ? "move" : "new",
    target: sheet.otherLists[0]?.id ?? "",
    name: t.newListDefault(sheet.list.name),
  });
  const [errors, setErrors] = useState<Record<string, string | undefined>>({});
  const [busy, setBusy] = useState(false);

  const typeProducts = (item: ShoppingItemView) => {
    const typeId =
      item.kind === "product"
        ? sheet.products.find((p) => p.id === item.productId)?.productTypeId
        : item.productTypeId;
    return sheet.products.filter((p) => p.productTypeId === typeId);
  };

  const bought = sheet.items.filter((i) => rows[i.id]!.bought);
  const unbought = sheet.items.filter((i) => !rows[i.id]!.bought);
  const allLines: (Line & { itemId: string; text: boolean })[] = [
    ...bought.map((i) => ({ ...rows[i.id]!, itemId: i.id, text: i.kind === "text" })),
    ...extras.map((e) => ({ ...e, itemId: "", text: false })),
  ];
  const storeIds = [...new Set(allLines.map((l) => l.storeId).filter(Boolean))];
  const unmapped = new Set(sheet.unmappedTypeIds);
  const needsFallback = allLines.some(
    (l) =>
      l.text || unmapped.has(sheet.products.find((p) => p.id === l.productId)?.productTypeId ?? ""),
  );
  const total = allLines.reduce((a, l) => a + (parseMoney(l.amount) ?? 0), 0);
  const plannedTotal = useMemo(
    () => Object.values(sheet.planned).reduce((a, p) => a + p.priceMinor * p.packages, 0),
    [sheet.planned],
  );

  function setRow(id: string, patch: Partial<ItemLine>) {
    setRows((s) => {
      const cur = s[id]!;
      const { bought: b, ...rest } = patch;
      const next = Object.keys(rest).length ? { ...cur, ...withPrice(sheet, cur, rest) } : cur;
      return { ...s, [id]: { ...next, bought: b ?? cur.bought } };
    });
  }

  async function submit() {
    setBusy(true);
    const lineKeys = allLines.map((l, i) =>
      l.itemId ? `item:${l.itemId}` : `extra:${extras[i - bought.length]?.key}`,
    );
    const r = await completeShoppingAction(sheet.list.id, {
      date,
      lines: allLines.map((l) => ({
        itemId: l.itemId,
        productId: l.text || l.productId === GENERIC ? "" : l.productId,
        storeId: l.storeId,
        packages: l.text ? "1" : l.packages,
        amount: l.amount,
      })),
      stores: storeIds.map((id) => ({
        storeId: id,
        accountId: accounts[id] ?? defaultAccount(sheet, id),
        attachmentIds: (receipts[id] ?? []).map((a) => a.id),
      })),
      fallbackCategoryId: needsFallback ? fallback : "",
      leftover: unbought.length
        ? { action: leftover.action, targetListId: leftover.target, newListName: leftover.name }
        : { action: "drop" },
    });
    setBusy(false);
    if (r.ok) {
      toast.success(t.saved);
      router.push(`/alisveris/${sheet.list.id}`);
      return;
    }
    // Satır hatalarını satır anahtarına çevir.
    const mapped: Record<string, string | undefined> = {};
    for (const [k, msg] of Object.entries(r.fieldErrors ?? {})) {
      const m = /^lines\.(\d+)\.(\w+)$/.exec(k);
      if (m) mapped[`${lineKeys[Number(m[1])]}.${m[2]}`] = msg;
      else {
        const s = /^stores\.(\d+)\.(\w+)$/.exec(k);
        mapped[s ? `store:${storeIds[Number(s[1])]}` : k] = msg;
      }
    }
    setErrors({ ...mapped, root: r.error });
    toast.error(r.error);
  }

  const errs = (key: string) => ({
    productId: errors[`${key}.productId`],
    storeId: errors[`${key}.storeId`],
    packages: errors[`${key}.packages`],
    amount: errors[`${key}.amount`],
  });

  return (
    <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
        <Link href={`/alisveris/${sheet.list.id}`}>
          <ArrowLeft />
          {tr.shopping.actions.backToList}
        </Link>
      </Button>
      <div>
        <h1 className="text-xl font-semibold">
          {t.title}: {sheet.list.name}
        </h1>
        <p className="text-sm text-muted-foreground">{t.description}</p>
      </div>
      {sheet.stores.length === 0 ? (
        <p className="rounded-lg border border-dashed p-6 text-center text-sm">{t.noStores}</p>
      ) : null}
      <Field className="max-w-48" data-invalid={Boolean(errors.date)}>
        <FieldLabel htmlFor="sc-date">{t.date}</FieldLabel>
        <Input
          id="sc-date"
          type="date"
          value={date}
          max={sheet.today}
          onChange={(e) => setDate(e.target.value)}
        />
        {errors.date ? <FieldError>{errors.date}</FieldError> : null}
      </Field>

      <section aria-labelledby="sc-items" className="flex flex-col gap-2">
        <h2 id="sc-items" className="font-medium">
          {t.itemsTitle}
        </h2>
        <ul className="divide-y rounded-xl border bg-card">
          {sheet.items.map((item) => {
            const row = rows[item.id]!;
            const plan = sheet.planned[item.id];
            const planProduct = plan ? sheet.products.find((p) => p.id === plan.productId) : null;
            const planStore = plan ? sheet.stores.find((s) => s.id === plan.storeId) : null;
            const substitute =
              row.bought &&
              item.kind !== "text" &&
              (item.kind === "product"
                ? row.productId !== item.productId
                : plan && row.productId !== plan.productId);
            const key = `item:${item.id}`;
            return (
              <li
                key={item.id}
                className={cn("flex flex-col gap-3 p-3", !row.bought && "bg-muted/30")}
              >
                <div className="flex items-start gap-3">
                  <Checkbox
                    id={`b-${item.id}`}
                    checked={row.bought}
                    onCheckedChange={(x) => setRow(item.id, { bought: x === true })}
                    className="mt-0.5 size-5"
                  />
                  <label htmlFor={`b-${item.id}`} className="min-w-0 flex-1 cursor-pointer">
                    <span
                      className={cn("block font-medium", !row.bought && "text-muted-foreground")}
                    >
                      {item.label}{" "}
                      {item.quantityLabel ? (
                        <span className="text-sm font-normal text-muted-foreground tabular-nums">
                          · {item.quantityLabel}
                        </span>
                      ) : null}
                    </span>
                    <span className="block text-xs text-muted-foreground">
                      {plan && planProduct && planStore
                        ? t.planned(
                            `${planProduct.label} · ${planStore.label} · ${formatMoney(plan.priceMinor * plan.packages)}`,
                          )
                        : item.kind === "text"
                          ? null
                          : t.noPlan}
                    </span>
                  </label>
                  {substitute ? <Badge variant="outline">{t.substitute}</Badge> : null}
                </div>
                {row.bought ? (
                  <LineFields
                    sheet={sheet}
                    line={row}
                    products={typeProducts(item)}
                    text={item.kind === "text"}
                    genericUnit={item.kind === "type" ? item.unit : undefined}
                    onChange={(patch) => setRow(item.id, patch)}
                    errors={errs(key)}
                    idPrefix={`l-${item.id}`}
                  />
                ) : null}
              </li>
            );
          })}
        </ul>
      </section>

      <section aria-labelledby="sc-extras" className="flex flex-col gap-2">
        <h2 id="sc-extras" className="font-medium">
          {t.extrasTitle}
        </h2>
        {extras.length ? (
          <ul className="divide-y rounded-xl border bg-card">
            {extras.map((e) => (
              <li key={e.key} className="flex items-start gap-2 p-3">
                <div className="min-w-0 flex-1">
                  <LineFields
                    sheet={sheet}
                    line={e}
                    products={sheet.products}
                    text={false}
                    onChange={(patch) =>
                      setExtras((s) =>
                        s.map((x) =>
                          x.key === e.key ? { ...x, ...withPrice(sheet, x, patch) } : x,
                        ),
                      )
                    }
                    errors={errs(`extra:${e.key}`)}
                    idPrefix={`e-${e.key}`}
                  />
                </div>
                <Button
                  size="icon-sm"
                  variant="ghost"
                  className="mt-6"
                  aria-label={t.removeExtra}
                  onClick={() => setExtras((s) => s.filter((x) => x.key !== e.key))}
                >
                  <Trash2 />
                </Button>
              </li>
            ))}
          </ul>
        ) : null}
        <Button
          variant="outline"
          size="sm"
          className="w-fit"
          onClick={() =>
            setExtras((s) => [
              ...s,
              {
                key: Date.now(),
                productId: "",
                storeId: storeIds[0] ?? defaultStore(sheet),
                packages: "1",
                amount: "",
                touched: false,
              },
            ])
          }
        >
          <Plus />
          {t.addExtra}
        </Button>
      </section>

      {storeIds.length ? (
        <section aria-labelledby="sc-stores" className="flex flex-col gap-2">
          <div>
            <h2 id="sc-stores" className="font-medium">
              {t.storesTitle}
            </h2>
            <p className="text-sm text-muted-foreground">{t.storesDescription}</p>
          </div>
          <ul className="grid gap-3 md:grid-cols-2">
            {storeIds.map((id) => {
              const store = sheet.stores.find((s) => s.id === id);
              const lines = allLines.filter((l) => l.storeId === id);
              const sum = lines.reduce((a, l) => a + (parseMoney(l.amount) ?? 0), 0);
              return (
                <li key={id} className="flex flex-col gap-3 rounded-xl border bg-card p-3">
                  <div className="flex items-center gap-2">
                    <span className="flex min-w-0 items-center font-medium">
                      <StoreDot slot={store?.slot ?? 1} />
                      <span className="truncate">{store?.label}</span>
                    </span>
                    <span className="ml-auto text-sm tabular-nums">
                      {t.subtotal(lines.length)} · {formatMoney(sum)}
                    </span>
                  </div>
                  <Field data-invalid={Boolean(errors[`store:${id}`])}>
                    <FieldLabel htmlFor={`acc-${id}`}>{t.account}</FieldLabel>
                    <Select
                      value={accounts[id] ?? defaultAccount(sheet, id)}
                      onValueChange={(x) => setAccounts((s) => ({ ...s, [id]: x }))}
                    >
                      <SelectTrigger id={`acc-${id}`} className="w-full">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {sheet.accounts.map((a) => (
                          <SelectItem key={a.id} value={a.id}>
                            {a.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    {errors[`store:${id}`] ? (
                      <FieldError>{errors[`store:${id}`]}</FieldError>
                    ) : null}
                  </Field>
                  <Field>
                    <FieldLabel>{t.receipts}</FieldLabel>
                    <AttachmentPicker
                      value={receipts[id] ?? []}
                      onChange={(items) => setReceipts((s) => ({ ...s, [id]: items }))}
                      allowedKinds={["image"]}
                      onBusyChange={(b) => setUploading((n) => n + (b ? 1 : -1))}
                      addLabel={t.addReceipt}
                      hint={t.receiptHint}
                    />
                  </Field>
                </li>
              );
            })}
          </ul>
        </section>
      ) : null}

      {needsFallback ? (
        <Field data-invalid={Boolean(errors.fallbackCategoryId)} className="max-w-md">
          <FieldLabel htmlFor="sc-fallback">{t.fallbackCategory}</FieldLabel>
          <Select value={fallback} onValueChange={setFallback}>
            <SelectTrigger id="sc-fallback" className="w-full">
              <SelectValue placeholder={t.fallbackCategory} />
            </SelectTrigger>
            <SelectContent className="max-h-72">
              {sheet.expenseCategories.map((c) => (
                <SelectItem key={c.id} value={c.id}>
                  {c.path}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <FieldDescription>{t.fallbackHint}</FieldDescription>
          {errors.fallbackCategoryId ? <FieldError>{errors.fallbackCategoryId}</FieldError> : null}
        </Field>
      ) : null}

      {unbought.length ? (
        <section aria-labelledby="sc-left" className="flex flex-col gap-2">
          <div>
            <h2 id="sc-left" className="font-medium">
              {t.leftoverTitle}
            </h2>
            <p className="text-sm text-muted-foreground">
              {t.leftoverDescription(unbought.length)} {unbought.map((i) => i.label).join(", ")}
            </p>
          </div>
          <div role="radiogroup" aria-labelledby="sc-left" className="flex flex-col gap-2">
            {(["move", "new", "drop"] as const)
              .filter((a) => a !== "move" || sheet.otherLists.length)
              .map((a) => (
                <label key={a} className="flex items-center gap-2 text-sm">
                  <input
                    type="radio"
                    name="leftover"
                    value={a}
                    checked={leftover.action === a}
                    onChange={() => setLeftover((s) => ({ ...s, action: a }))}
                    className="size-4 accent-primary"
                  />
                  {t.leftoverActions[a]}
                </label>
              ))}
          </div>
          {leftover.action === "move" ? (
            <Select
              value={leftover.target}
              onValueChange={(x) => setLeftover((s) => ({ ...s, target: x }))}
            >
              <SelectTrigger className="w-full max-w-md" aria-label={tr.shopping.moveTarget}>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {sheet.otherLists.map((l) => (
                  <SelectItem key={l.id} value={l.id}>
                    {l.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          ) : leftover.action === "new" ? (
            <Input
              aria-label={t.newListName}
              value={leftover.name}
              onChange={(e) => setLeftover((s) => ({ ...s, name: e.target.value }))}
              className="max-w-md"
            />
          ) : null}
          {errors["leftover.targetListId"] || errors["leftover.newListName"] ? (
            <FieldError>
              {errors["leftover.targetListId"] ?? errors["leftover.newListName"]}
            </FieldError>
          ) : null}
        </section>
      ) : null}

      <div className="sticky bottom-[calc(4rem+env(safe-area-inset-bottom))] z-10 -mx-4 border-t bg-background/95 backdrop-blur md:bottom-0 md:mx-0 md:rounded-xl md:border">
        <div className="flex items-center gap-3 px-4 py-3">
          <div className="min-w-0 flex-1 text-sm">
            <span className="font-medium tabular-nums">
              {t.total}: {formatMoney(total)}
            </span>
            {plannedTotal ? (
              <span className="text-muted-foreground tabular-nums">
                {" · "}
                {t.plannedTotal}: {formatMoney(plannedTotal)}
              </span>
            ) : null}
            {errors.root ? (
              <span className="block text-xs text-destructive">{errors.root}</span>
            ) : null}
          </div>
          <Button onClick={submit} disabled={busy || uploading > 0 || allLines.length === 0}>
            {t.submit}
          </Button>
        </div>
      </div>
    </div>
  );
}