'use client';

import { useQuery } from '@tanstack/react-query';
import api from '@/lib/api-client';
import Link from 'next/link';

export function PendingReviewDeliveriesPanel() {
  const { data, isLoading } = useQuery({
    queryKey: ['deliveries', 'pending-review'],
    queryFn: async () => {
      const res = await api.get('/deliveries', {
        params: { review_status: 'PENDING_REVIEW', page: 1, per_page: 5 },
      });
      return res.data;
    },
    refetchInterval: 30_000,
  });

  const rows = data?.data ?? [];

  return (
    <section className="mt-10 rounded-3xl border border-slate-100 bg-white p-8 shadow-lg">
      <div className="flex items-center justify-between gap-4">
        <div>
          <p className="text-xs uppercase tracking-[0.4em] text-slate-500">Pending Review</p>
          <h2 className="mt-3 text-2xl font-bold text-slate-900">Flagged deliveries</h2>
          <p className="mt-2 text-sm text-slate-500">Records accepted from the field but requiring Coordinator review.</p>
        </div>
        <Link
          href="/super-admin/deliveries"
          className="rounded-full bg-brand/10 px-4 py-2 text-sm font-semibold text-brand"
        >
          View all
        </Link>
      </div>

      <div className="mt-6">
        {isLoading ? (
          <div className="h-20 animate-pulse rounded-2xl bg-slate-50" />
        ) : rows.length === 0 ? (
          <p className="text-sm text-slate-500">No pending review deliveries right now.</p>
        ) : (
          <div className="divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-100">
            {rows.map((row: any) => (
              <div key={row.id} className="flex flex-wrap items-center justify-between gap-3 bg-white px-4 py-3">
                <div>
                  <p className="text-sm font-semibold text-slate-900">{row.school_name} · {row.commodity_name}</p>
                  <p className="text-xs text-slate-500">{row.delivery_date} · {row.user_name}</p>
                </div>
                <span className="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
                  Pending review
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}