"use client";

import { ArrowLeftRight, CheckCheck, Copy, Pencil, Scale, Split, Trash2 } from "lucide-react";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import { IconBadge } from "@/components/appearance/swatch";
import { useQuickAdd } from "@/components/layout/quick-add";
import { ResponsiveDialog } from "@/components/responsive-dialog";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { AttachmentStrip } from "@/features/attachments/components/attachment-strip";
import { tr } from "@/i18n/tr";
import { cn } from "@/lib/utils";
import { formatDate, formatDateTime, formatMoney } from "@/shared/format";
import type { TransactionType } from "@/shared/transactions";
import { getTransactionAction, setTransactionDeletedAction } from "../actions";
import type { TransactionDetail, TransactionListItem } from "../service";

/** İşlem listesi, ayrıntı ve hesap ekstresinin paylaştığı parçalar. */

const t = tr.transactions;
const weekday = new Intl.DateTimeFormat("tr-TR", { weekday: "long", timeZone: "Europe/Istanbul" });

/** "2026-11-05" → "05.11.2026 · Perşembe" */
export function dayLabel(ymd: string) {
  const d = new Date(`${ymd}T12:00:00+03:00`);
  return `${formatDate(d)} · ${weekday.format(d)}`;
}

export function signed(type: TransactionType, amountMinor: number) {
  return type === "income" ? amountMinor : type === "expense" ? -amountMinor : 0;
}

export function Amount({
  type,
  amountMinor,
  className,
}: {
  type: TransactionType;
  amountMinor: number;
  className?: string;
}) {
  const text =
    type === "income"
      ? `+${formatMoney(amountMinor)}`
      : type === "expense"
        ? `−${formatMoney(amountMinor)}`
        : formatMoney(amountMinor);
  return (
    <span
      className={cn(
        "font-semibold whitespace-nowrap tabular-nums",
        type === "income" && "text-income",
        type === "expense" && "text-expense",
        type === "transfer" && "text-muted-foreground",
        className,
      )}
    >
      {text}
    </span>
  );
}

export function RowIcon({ item }: { item: TransactionListItem }) {
  if (item.type === "transfer") {
    return (
      <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
        <ArrowLeftRight className="size-4.5" />
      </span>
    );
  }
  if (item.isAdjustment) {
    return (
      <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
        <Scale className="size-4.5" />
      </span>
    );
  }
  if (item.splitCount) {
    return (
      <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-budget/15 text-budget">
        <Split className="size-4.5" />
      </span>
    );
  }
  return item.category ? (
    <IconBadge icon={item.category.icon} color={item.category.color} />
  ) : (
    <IconBadge icon="tag" color="slate" />
  );
}

export function rowTitle(item: TransactionListItem) {
  if (item.isAdjustment) return t.adjustment;
  if (item.payeeName) return item.payeeName;
  if (item.description) return item.description;
  if (item.type === "transfer") return t.types.transfer;
  return item.category?.name ?? t.types[item.type];
}

export function rowSubtitle(item: TransactionListItem) {
  if (item.type === "transfer")
    return t.list.transfer(item.account.name, item.toAccount?.name ?? "—");
  const what = item.isAdjustment
    ? item.description
    : item.splitCount
      ? t.list.split(item.splitCount)
      : (item.category?.path ?? "—");
  return `${what} · ${item.account.name}`;
}

function DetailDialog({
  detail,
  loading,
  canWrite,
  onOpenChange,
  onEdit,
  onCopy,
  onDelete,
}: {
  detail: TransactionDetail | null;
  loading: boolean;
  canWrite: boolean;
  onOpenChange: (o: boolean) => void;
  onEdit: (d: TransactionDetail) => void;
  onCopy: (d: TransactionDetail) => void;
  onDelete: (d: TransactionDetail) => void;
}) {
  const d = t.detail;
  const row = (label: string, value: React.ReactNode) => (
    <div className="flex items-start justify-between gap-4 py-2 text-sm">
      <dt className="text-muted-foreground">{label}</dt>
      <dd className="text-right">{value}</dd>
    </div>
  );
  return (
    <ResponsiveDialog
      open={loading || Boolean(detail)}
      onOpenChange={onOpenChange}
      title={d.title}
      footer={
        detail && canWrite ? (
          <>
            <Button variant="destructive" onClick={() => onDelete(detail)}>
              <Trash2 />
              {t.actions.delete}
            </Button>
            {/* Mutabakat düzeltmesi düzenlenemez/kopyalanamaz; yalnızca silinebilir. */}
            {detail.isAdjustment ? null : (
              <>
                <Button variant="outline" onClick={() => onCopy(detail)}>
                  <Copy />
                  {t.actions.copy}
                </Button>
                <Button onClick={() => onEdit(detail)}>
                  <Pencil />
                  {t.actions.edit}
                </Button>
              </>
            )}
          </>
        ) : null
      }
    >
      {!detail ? (
        <div className="flex flex-col gap-3" role="status" aria-label={tr.common.loading}>
          <Skeleton className="h-10 w-1/2" />
          <Skeleton className="h-32 w-full" />
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          <div className="flex items-center gap-3">
            <RowIcon item={detail} />
            <div className="min-w-0 flex-1">
              <p className="truncate font-medium">{rowTitle(detail)}</p>
              <p className="text-xs text-muted-foreground">{dayLabel(detail.date)}</p>
            </div>
            <Amount type={detail.type} amountMinor={detail.amountMinor} className="text-lg" />
          </div>
          <dl className="divide-y border-y">
            {row(t.filters.type, <Badge variant="secondary">{t.types[detail.type]}</Badge>)}
            {detail.status !== "posted" ? row(t.filters.status, t.statuses[detail.status]) : null}
            {row(
              detail.type === "transfer" ? t.fields.fromAccount : t.fields.account,
              detail.account.name,
            )}
            {detail.toAccount ? row(t.fields.toAccount, detail.toAccount.name) : null}
            {detail.category ? row(t.fields.category, detail.category.path) : null}
            {detail.isAdjustment ? row(t.fields.category, t.adjustment) : null}
            {detail.payeeName ? row(t.fields.payee, detail.payeeName) : null}
            {detail.description ? row(t.fields.description, detail.description) : null}
            {detail.tags.length
              ? row(
                  t.fields.tags,
                  <span className="flex flex-wrap justify-end gap-1">
                    {detail.tags.map((tag) => (
                      <Badge key={tag} variant="outline">
                        #{tag}
                      </Badge>
                    ))}
                  </span>,
                )
              : null}
            {detail.attachments.length
              ? row(
                  tr.attachments.title,
                  <span className="flex justify-end">
                    <AttachmentStrip items={detail.attachments} />
                  </span>,
                )
              : null}
            {detail.reconciledAccountIds.length
              ? row(
                  tr.statement.reconcile.title,
                  <span className="inline-flex items-center gap-1 text-income">
                    <CheckCheck className="size-4" aria-hidden />
                    {t.reconciled}
                  </span>,
                )
              : null}
            {row(d.createdBy, `${detail.createdBy.name} · ${formatDateTime(detail.createdAt)}`)}
            {new Date(detail.updatedAt).getTime() - new Date(detail.createdAt).getTime() > 1000
              ? row(d.updatedBy, `${detail.updatedBy.name} · ${formatDateTime(detail.updatedAt)}`)
              : null}
          </dl>
          {detail.splits.length ? (
            <section aria-labelledby="tx-lines">
              <h3 id="tx-lines" className="mb-1 text-sm font-medium">
                {d.lines}
              </h3>
              <ul className="divide-y rounded-lg border">
                {detail.splits.map((s, i) => (
                  <li key={i} className="flex items-center gap-3 p-2 text-sm">
                    <IconBadge icon={s.icon} color={s.color} size="sm" />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate">{s.path}</span>
                      {s.note ? (
                        <span className="block truncate text-xs text-muted-foreground">
                          {s.note}
                        </span>
                      ) : null}
                    </span>
                    <span className="tabular-nums">{formatMoney(s.amountMinor)}</span>
                  </li>
                ))}
              </ul>
            </section>
          ) : null}
        </div>
      )}
    </ResponsiveDialog>
  );
}

/**
 * Ayrıntı penceresi + silme onayı + geri al bildirimi. Liste ve ekstre aynı davranışı kullanır;
 * düzenle/kopyala uygulama genelindeki işlem formunu açar.
 */
export function useTransactionDetail(canWrite: boolean) {
  const { openTransactionForm } = useQuickAdd();
  const [detail, setDetail] = useState<TransactionDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [deleting, setDeleting] = useState<TransactionDetail | null>(null);
  const [, startTransition] = useTransition();

  async function openDetail(id: string) {
    setLoading(true);
    setDetail(null);
    const res = await getTransactionAction(id);
    setLoading(false);
    if (res.ok) setDetail(res.data);
    else toast.error(res.error);
  }

  function close() {
    setDetail(null);
    setLoading(false);
  }

  function remove(d: TransactionDetail) {
    setDeleting(null);
    close();
    startTransition(async () => {
      const res = await setTransactionDeletedAction(d.id, true);
      if (!res.ok) return void toast.error(res.error);
      toast.success(t.toast.deleted, {
        duration: 10_000,
        action: {
          label: t.actions.restore,
          onClick: async () => {
            const r = await setTransactionDeletedAction(d.id, false);
            if (r.ok) toast.success(t.toast.restored);
            else toast.error(r.error);
          },
        },
      });
    });
  }

  const element = (
    <>
      <DetailDialog
        detail={detail}
        loading={loading}
        canWrite={canWrite}
        onOpenChange={(o) => !o && close()}
        onEdit={(d) => {
          close();
          openTransactionForm({ kind: "edit", transaction: d });
        }}
        onCopy={(d) => {
          close();
          openTransactionForm({ kind: "copy", transaction: d });
        }}
        onDelete={setDeleting}
      />
      <AlertDialog open={Boolean(deleting)} onOpenChange={(o) => !o && setDeleting(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
            <AlertDialogDescription>{t.deleteDescription}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
            <Button variant="destructive" onClick={() => deleting && remove(deleting)}>
              {t.actions.delete}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
  return { openDetail, element };
}