import Link from "next/link";
import { AlertTriangle, ClipboardList, Users } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { formatMoneyExact } from "@/lib/format/numbers";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import type {
  AdminDashboardQueueCustomer,
  AdminDashboardQueueOrder,
} from "../_lib/admin-dashboard-types";

function formatMoney(value: number) {
  return formatMoneyExact(value, "USD");
}

type AttentionQueuesProps = {
  pendingCustomers: AdminDashboardQueueCustomer[];
  recentOrdersNeedingAttention: AdminDashboardQueueOrder[];
};

export function AttentionQueues({
  pendingCustomers,
  recentOrdersNeedingAttention,
}: AttentionQueuesProps) {
  return (
    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 leading-none">
            <Users className="size-4 text-muted-foreground" />
            Pending customers
          </CardTitle>
          <CardDescription>Accounts waiting on confirm, activate, or review</CardDescription>
        </CardHeader>
        <CardContent>
          {pendingCustomers.length === 0 ? (
            <p className="py-6 text-center text-muted-foreground text-sm">No pending customers.</p>
          ) : (
            <ul className="divide-y">
              {pendingCustomers.map((customer) => (
                <li key={customer.id} className="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0">
                  <div className="min-w-0">
                    <Link
                      href={`/dashboard/customers?status=${encodeURIComponent(customer.status)}`}
                      className="truncate font-medium text-sm hover:underline"
                    >
                      {customer.name}
                    </Link>
                    <p className="truncate text-muted-foreground text-xs">{customer.email}</p>
                  </div>
                  <Badge variant="outline" className="shrink-0">
                    {customer.status}
                  </Badge>
                </li>
              ))}
            </ul>
          )}
          <div className="mt-3 border-t pt-3">
            <Link
              href="/dashboard/customers?status=pending-active"
              className="text-muted-foreground text-xs hover:text-foreground hover:underline"
            >
              Open customers with pending filters
            </Link>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 leading-none">
            <ClipboardList className="size-4 text-muted-foreground" />
            Orders needing attention
          </CardTitle>
          <CardDescription>Pending, incomplete, failed, or due orders</CardDescription>
        </CardHeader>
        <CardContent>
          {recentOrdersNeedingAttention.length === 0 ? (
            <p className="py-6 text-center text-muted-foreground text-sm">No orders need attention.</p>
          ) : (
            <ul className="divide-y">
              {recentOrdersNeedingAttention.map((order) => (
                <li key={order.id} className="flex items-start justify-between gap-3 py-3 first:pt-0 last:pb-0">
                  <div className="min-w-0">
                    <Link
                      href="/dashboard/plans-orders/orders"
                      className="truncate font-medium text-sm hover:underline"
                    >
                      #{order.id} · {order.customerName}
                    </Link>
                    <p className="truncate text-muted-foreground text-xs">{formatMoney(order.total)}</p>
                  </div>
                  <Badge variant="outline" className="shrink-0 gap-1">
                    <AlertTriangle className="size-3" />
                    {order.status}
                  </Badge>
                </li>
              ))}
            </ul>
          )}
          <div className="mt-3 border-t pt-3">
            <Link
              href="/dashboard/plans-orders/orders"
              className="text-muted-foreground text-xs hover:text-foreground hover:underline"
            >
              Open orders
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}