"use client";

import {
  ArrowLeft,
  EllipsisVertical,
  Gift,
  HandCoins,
  Lock,
  Pencil,
  ShoppingBag,
  Trash2,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { toast } from "sonner";
import { PageHeader } from "@/components/page-header";
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 { Card, CardContent } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { tr } from "@/i18n/tr";
import { ASSETS, formatAssetQuantity } from "@/shared/assets";
import { formatDate, formatMoney } from "@/shared/format";
import { isInflow, type MovementKind } from "@/shared/portfolio";
import { deleteAssetAction, deleteMovementAction } from "../actions";
import type { AssetDetail, MovementRow } from "../service";
import { AssetFormDialog, MovementDialog } from "./asset-dialogs";
import { ProfitLoss, Stat } from "./assets-view";

const t = tr.assets;
const d = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);

type Pending =
  | { kind: "edit" }
  | { kind: "movement"; movement: MovementKind }
  | { kind: "deleteMovement"; row: MovementRow }
  | { kind: "deleteAsset" }
  | null;

/** /birikim/:id — özet, hareket ekleme ve hareket geçmişi. */
export function AssetDetailView({ data }: { data: AssetDetail }) {
  const router = useRouter();
  const [pending, setPending] = useState<Pending>(null);
  const close = () => setPending(null);
  const s = data.summary;
  const unit = ASSETS[data.assetKey].unit;

  return (
    <div className="flex flex-col gap-4">
      <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
        <Link href="/birikim">
          <ArrowLeft />
          {t.back}
        </Link>
      </Button>
      <PageHeader
        title={data.name}
        description={ASSETS[data.assetKey].label}
        actions={
          data.canWrite ? (
            <DropdownMenu modal={false}>
              <DropdownMenuTrigger asChild>
                <Button size="icon" variant="outline" aria-label={tr.recurring.actions.more}>
                  <EllipsisVertical />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onSelect={() => setPending({ kind: "edit" })}>
                  <Pencil />
                  {tr.common.edit}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  variant="destructive"
                  disabled={data.movementCount > 0}
                  onSelect={() => setPending({ kind: "deleteAsset" })}
                >
                  <Trash2 />
                  {t.delete}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : null
        }
      />
      {data.isPrivate ? (
        <Badge variant="outline" className="-mt-2 w-fit gap-1">
          <Lock className="size-3" />
          {t.privateBadge}
        </Badge>
      ) : null}

      <Card size="sm">
        <CardContent className="flex flex-col gap-3">
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
            <Stat label={t.stats.quantity}>{formatAssetQuantity(data.assetKey, s.quantity)}</Stat>
            <Stat label={t.stats.avgCost}>
              {s.avgCostMinor !== null
                ? `${formatMoney(s.avgCostMinor)} ${t.stats.perUnit(unit)}`
                : "—"}
            </Stat>
            <Stat label={t.stats.cost}>{formatMoney(s.costMinor)}</Stat>
            <Stat label={t.stats.currentValue}>
              {s.currentValueMinor !== null ? formatMoney(s.currentValueMinor) : t.stats.noPrice}
            </Stat>
            <Stat label={t.stats.unrealized}>
              <ProfitLoss minor={s.unrealizedMinor} bp={s.unrealizedBp} />
            </Stat>
            <Stat label={t.stats.realized}>
              <ProfitLoss minor={s.realizedMinor} />
            </Stat>
            <Stat label={t.stats.invested}>{formatMoney(s.investedMinor)}</Stat>
            <Stat label={t.stats.proceeds}>{formatMoney(s.proceedsMinor)}</Stat>
          </div>
          {data.price ? (
            <p className="text-xs text-muted-foreground">
              {t.stats.price(formatMoney(data.price.buyMinor), d(data.price.date))} ·{" "}
              <Link href="/fiyatlar" className="underline-offset-2 hover:underline">
                {t.prices}
              </Link>
            </p>
          ) : null}
          {data.storage ? (
            <p className="text-sm">
              <span className="text-muted-foreground">{t.movement.storage}:</span> {data.storage}
            </p>
          ) : null}
          {data.note ? <p className="text-sm text-muted-foreground">{data.note}</p> : null}
          {data.canWrite ? (
            <div className="flex flex-wrap justify-end gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={() => setPending({ kind: "movement", movement: "gift_in" })}
              >
                <Gift />
                {t.kinds.gift_in}
              </Button>
              {s.quantity > 0 ? (
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => setPending({ kind: "movement", movement: "sell" })}
                >
                  <HandCoins />
                  {t.kinds.sell}
                </Button>
              ) : null}
              <Button size="sm" onClick={() => setPending({ kind: "movement", movement: "buy" })}>
                <ShoppingBag />
                {t.kinds.buy}
              </Button>
            </div>
          ) : null}
        </CardContent>
      </Card>

      <section className="flex flex-col gap-2" aria-labelledby="movements-title">
        <h2 id="movements-title" className="text-base font-medium">
          {t.history}
        </h2>
        {data.movements.length === 0 ? (
          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
            {t.noMovements}
          </p>
        ) : (
          <ul className="divide-y rounded-xl border bg-card">
            {data.movements.map((row) => (
              <MovementItem
                key={row.id}
                row={row}
                data={data}
                canWrite={data.canWrite}
                onDelete={() => setPending({ kind: "deleteMovement", row })}
              />
            ))}
          </ul>
        )}
      </section>

      {pending?.kind === "edit" ? <AssetFormDialog item={data} onClose={close} /> : null}
      {pending?.kind === "movement" ? (
        <MovementDialog item={data} initialKind={pending.movement} onClose={close} />
      ) : null}
      <AlertDialog
        open={pending?.kind === "deleteMovement" || pending?.kind === "deleteAsset"}
        onOpenChange={(o) => !o && close()}
      >
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {pending?.kind === "deleteAsset" ? t.deleteTitle : t.deleteMovementTitle}
            </AlertDialogTitle>
            <AlertDialogDescription>
              {pending?.kind === "deleteAsset" ? t.deleteDescription : t.deleteMovementDescription}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tr.common.cancel}</AlertDialogCancel>
            <Button
              variant="destructive"
              onClick={async () => {
                if (pending?.kind === "deleteAsset") {
                  const r = await deleteAssetAction(data.id);
                  close();
                  if (r.ok) {
                    toast.success(t.toast.deleted);
                    router.push("/birikim");
                  } else toast.error(r.error);
                } else if (pending?.kind === "deleteMovement") {
                  const r = await deleteMovementAction(pending.row.id);
                  close();
                  if (r.ok) toast.success(t.toast.movementDeleted);
                  else toast.error(r.error);
                }
              }}
            >
              {pending?.kind === "deleteAsset" ? t.delete : t.deleteMovement}
            </Button>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

function MovementItem({
  row,
  data,
  canWrite,
  onDelete,
}: {
  row: MovementRow;
  data: AssetDetail;
  canWrite: boolean;
  onDelete: () => void;
}) {
  const inflow = isInflow(row.kind);
  const qty = formatAssetQuantity(data.assetKey, row.quantity);
  const unit = ASSETS[data.assetKey].unit;
  return (
    <li className="flex items-start gap-3 p-3">
      <div className="min-w-0 flex-1">
        <p className="flex flex-wrap items-center gap-x-2 text-sm font-medium">
          <span>{t.kinds[row.kind]}</span>
          <span className={inflow ? "text-income" : "text-expense"}>
            {inflow ? "+" : "−"}
            {qty}
          </span>
        </p>
        <p className="text-xs text-muted-foreground">
          {d(row.date)}
          {row.unitPriceMinor !== null
            ? ` · ${formatMoney(row.unitPriceMinor)} ${t.stats.perUnit(unit)}`
            : ""}
          {row.account ? ` · ${row.account}` : ""}
          {row.storage ? ` · ${row.storage}` : ""}
        </p>
        {row.note ? <p className="text-xs text-muted-foreground">{row.note}</p> : null}
        <p className="text-xs text-muted-foreground">
          {t.table.balance}: {formatAssetQuantity(data.assetKey, row.quantityAfter)}
        </p>
      </div>
      <div className="flex shrink-0 flex-col items-end text-sm">
        {row.kind !== "gift_out" ? (
          <span className="tabular-nums">{formatMoney(row.amountMinor)}</span>
        ) : (
          <span className="text-xs text-muted-foreground tabular-nums">
            {t.stats.cost} {formatMoney(row.costOutMinor)}
          </span>
        )}
        {row.kind === "sell" ? (
          <span className="text-xs">
            {t.table.result}: <ProfitLoss minor={row.realizedMinor} />
          </span>
        ) : null}
      </div>
      {canWrite && !row.fromInKind ? (
        <Button
          size="icon-sm"
          variant="ghost"
          aria-label={t.deleteMovement}
          onClick={onDelete}
          className="shrink-0"
        >
          <Trash2 />
        </Button>
      ) : null}
    </li>
  );
}