"use client";

import Link from "next/link";
import { StockLevel } from "@/lib/types";

interface Props {
  levels: StockLevel[];
}

/** Current stock per branch at a glance, with anything low or out listed first. */
export default function StockSummaryCard({ levels }: Props) {
  const totalsByBranch = new Map<string, { name: string; units: number; alerts: number }>();
  for (const l of levels) {
    const entry = totalsByBranch.get(l.branchId) ?? { name: l.branchName, units: 0, alerts: 0 };
    entry.units += Math.max(l.quantity, 0);
    if (l.status !== "OK") entry.alerts += 1;
    totalsByBranch.set(l.branchId, entry);
  }
  const alerts = levels.filter((l) => l.status !== "OK").sort((a, b) => a.quantity - b.quantity);

  return (
    <section className="rounded-xl2 bg-white p-4 shadow-soft">
      <div className="mb-3 flex items-center justify-between">
        <h2 className="font-display font-semibold text-depth-900">Stock on hand</h2>
        <Link href="/admin/stock" className="text-sm font-medium text-flow-600 underline underline-offset-2">
          Manage stock
        </Link>
      </div>
      {levels.length === 0 ? (
        <p className="text-sm text-depth-500">No stock recorded yet.</p>
      ) : (
        <>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {Array.from(totalsByBranch.entries()).map(([id, b]) => (
              <div key={id} className="rounded-xl bg-sand-50 px-3 py-2">
                <p className="truncate text-xs text-depth-500">{b.name}</p>
                <p className="font-display text-lg font-bold text-depth-900">{b.units.toLocaleString()} units</p>
                {b.alerts > 0 && <p className="text-xs font-medium text-cash-700">{b.alerts} low/out</p>}
              </div>
            ))}
          </div>
          {alerts.length > 0 && (
            <ul className="mt-3 space-y-1 text-sm">
              {alerts.slice(0, 6).map((l) => (
                <li key={l.branchId + l.productId} className="flex justify-between gap-3">
                  <span className="truncate text-depth-700">
                    {l.productLabel} · {l.branchName}
                  </span>
                  <span className={"shrink-0 font-mono " + (l.status === "OUT" ? "text-alert-600" : "text-cash-700")}>
                    {l.quantity}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </section>
  );
}