import { ClipboardCheck, Clock } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { tr } from "@/i18n/tr";
import { formatStock } from "@/shared/stock";
import { getStock } from "../service";

const t = tr.stock;
const LIMIT = 5;

/** Dashboard: eşiğin altındaki ürünler, SKT'si yaklaşan partiler, sayımı gelen kategoriler. */
export async function LowStockCard({
  userId,
  householdId,
}: {
  userId: string;
  householdId: string;
}) {
  const data = await getStock(userId, householdId);
  if (!data || (!data.suggestions.length && !data.expiring.length && !data.countDue.length))
    return null;
  const low = data.suggestions.slice(0, LIMIT);
  const expiring = data.expiring.slice(0, Math.max(0, LIMIT - low.length) || 2);
  return (
    <Card size="sm">
      <CardHeader>
        <CardTitle className="text-base">{t.dashboard.title}</CardTitle>
        <CardDescription>
          {t.dashboard.description(
            data.suggestions.length,
            data.expiring.length,
            data.countDue.length,
          )}
        </CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <ul className="divide-y text-sm">
          {low.map((i) => (
            <li key={i.id} className="flex items-center justify-between gap-3 py-1.5">
              <Link href={`/stok/${i.id}`} className="min-w-0 truncate hover:underline">
                {i.name}
              </Link>
              <span className="shrink-0 text-xs tabular-nums">
                <span className="text-expense">{formatStock(Math.max(0, i.current), i.unit)}</span>
                <span className="text-muted-foreground">
                  {" · "}
                  {t.suggestions.suggested(formatStock(i.suggestedQuantity, i.unit))}
                </span>
              </span>
            </li>
          ))}
          {expiring.map(({ item, lot }) => (
            <li
              key={`${item.id}-${lot.index}`}
              className="flex items-center justify-between gap-3 py-1.5"
            >
              <Link href={`/stok/${item.id}`} className="min-w-0 truncate hover:underline">
                {item.name}
              </Link>
              <span
                className={
                  lot.status === "expired"
                    ? "flex shrink-0 items-center gap-1 text-xs text-expense"
                    : "flex shrink-0 items-center gap-1 text-xs text-amber-700 dark:text-amber-400"
                }
              >
                <Clock className="size-3" />
                {t.expiring.on(
                  new Intl.DateTimeFormat("tr-TR", { day: "numeric", month: "short" }).format(
                    new Date(`${lot.expiryDate}T12:00:00+03:00`),
                  ),
                )}
              </span>
            </li>
          ))}
          {data.countDue.slice(0, 3).map((g) => (
            <li
              key={`count-${g.categoryId}`}
              className="flex items-center justify-between gap-3 py-1.5"
            >
              <Link
                href={`/stok/sayim?kategori=${g.categoryId}`}
                className="min-w-0 truncate hover:underline"
              >
                {g.path}
              </Link>
              <span className="flex shrink-0 items-center gap-1 text-xs text-amber-700 dark:text-amber-400">
                <ClipboardCheck className="size-3" />
                {t.count.dueBadge(g.overdueDays)}
              </span>
            </li>
          ))}
        </ul>
        {data.suggestions.length > low.length ? (
          <p className="text-xs text-muted-foreground">
            {t.dashboard.more(data.suggestions.length - low.length)}
          </p>
        ) : null}
        <Button size="sm" variant="outline" className="w-fit" asChild>
          <Link href="/stok">{t.dashboard.open}</Link>
        </Button>
      </CardContent>
    </Card>
  );
}