"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { FileText, Plus } from "lucide-react"

import { rfqsApi } from "@/lib/api/rfqs"
import { errorMessage } from "@/lib/error-map"
import { RfqSummary } from "@/types/procurement"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { RfqStatusBadge } from "@/components/procurement/status-badges"

export default function RfqsListPage() {
  const [rfqs, setRfqs] = useState<RfqSummary[] | null>(null)
  const [error, setError] = useState<string | null>(null)

  // Vendors are no longer fetched here: the "invited vendors" column is gone because that
  // list is not persisted (docs/11 §3.2), so there is nothing to resolve names for.
  useEffect(() => {
    rfqsApi
      .list()
      .then((r) => setRfqs(r.items))
      .catch((err) => setError(errorMessage(err)))
  }, [])

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">RFQs</h1>
          <p className="text-base text-muted-foreground">Request quotations from vendors and compare pricing (FR-PROC-02).</p>
        </div>
        <Link href="/dashboard/procurement/rfqs/new" className={cn(buttonVariants({ size: "lg" }))}>
          <Plus className="size-5" />
          New RFQ
        </Link>
      </div>

      {error && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
      )}

      {!error && rfqs === null && (
        <div className="flex flex-col gap-3">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-14 w-full" />
          ))}
        </div>
      )}

      {!error && rfqs !== null && rfqs.length === 0 && (
        <div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
          <FileText className="size-12 text-muted-foreground" />
          <p className="text-base text-muted-foreground">No RFQs yet.</p>
          <Link href="/dashboard/procurement/rfqs/new" className={cn(buttonVariants({ variant: "outline", size: "lg" }))}>
            <Plus className="size-5" />
            New RFQ
          </Link>
        </div>
      )}

      {!error && rfqs !== null && rfqs.length > 0 && (
        <Table className="text-base">
          <TableHeader>
            <TableRow>
              <TableHead className="h-12 px-3 text-sm">Doc No</TableHead>
              <TableHead className="h-12 px-3 text-sm">Requisition</TableHead>
              {/* "Vendors invited" is gone: the invite list is validated on create but not
                  persisted (docs/11 §3.2). Quotations received is the fact that survives. */}
              <TableHead className="h-12 px-3 text-sm">Lines</TableHead>
              <TableHead className="h-12 px-3 text-sm">Quotations</TableHead>
              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rfqs.map((r) => (
              <TableRow key={r.rfqId}>
                <TableCell className="px-3 py-3.5">
                  <Link href={`/dashboard/procurement/rfqs/${r.rfqId}`} className="font-medium text-foreground hover:underline">
                    {r.docNo}
                  </Link>
                </TableCell>
                <TableCell className="px-3 py-3.5">{r.requisitionId ? `#${r.requisitionId}` : <span className="text-muted-foreground">—</span>}</TableCell>
                <TableCell className="px-3 py-3.5">{r.lineCount}</TableCell>
                <TableCell className="px-3 py-3.5">{r.quotationCount}</TableCell>
                <TableCell className="px-3 py-3.5">
                  <RfqStatusBadge status={r.status} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </div>
  )
}
