"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { CalendarDays, MoreVertical, Search, SlidersHorizontal } from "lucide-react";
import { useParams, useRouter } from "next/navigation";

type QuotationStatus = "completed";

type QuotationRow = {
  id: string;
  date: string;
  customer: string;
  warehouse: string;
  totalItems: string;
  total: string;
  status: QuotationStatus;
};

const QUOTATION_ROWS: QuotationRow[] = [
  { id: "1", date: "02/15/2024", customer: "Warren Smith", warehouse: "Warehouse 002", totalItems: "05", total: "$120.00", status: "completed" },
  { id: "2", date: "02/13/2024", customer: "Victor James", warehouse: "Warehouse 008", totalItems: "07", total: "$142.00", status: "completed" },
  { id: "3", date: "02/10/2024", customer: "Jenifer Smith", warehouse: "Warehouse 005", totalItems: "01", total: "$122.00", status: "completed" },
  { id: "4", date: "02/09/2024", customer: "Angela Jolly", warehouse: "Warehouse 003", totalItems: "14", total: "$432.00", status: "completed" },
  { id: "5", date: "02/08/2024", customer: "Jane Ronan", warehouse: "Warehouse 007", totalItems: "15", total: "$200.00", status: "completed" },
  { id: "6", date: "02/08/2024", customer: "Jenifer Smith", warehouse: "Warehouse 009", totalItems: "04", total: "$100.00", status: "completed" },
  { id: "7", date: "02/06/2024", customer: "Michael James", warehouse: "Warehouse 006", totalItems: "06", total: "$150.00", status: "completed" },
];

function StatusBadge({ status }: { status: QuotationStatus }) {
  const label = status === "completed" ? "Completed" : status;

  return (
    <span className="inline-flex items-center rounded-[4px] border border-[#12B76A] px-2 py-0.5 text-[11px] font-medium leading-none text-[#039855]">
      {label}
    </span>
  );
}

export default function QuotationsPage() {
  const params = useParams<{ app: string }>();
  const router = useRouter();

  return (
    <div className="min-h-0 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Quotation List">
        <Button
          onClick={() => router.push(`/${params.app}/quotations/new`)}
          className="h-9 rounded-md bg-[#003E6B] px-5 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
        >
          Create Quotation
        </Button>
      </MainTitle>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
        <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-[26px] font-semibold text-[#101828]">Created Expense List</h2>

          <div className="flex w-full flex-wrap items-center justify-end gap-2 md:w-auto">
            <div className="flex h-9 w-full items-center gap-1.5 rounded-md border border-[#E5E7EB] bg-white px-2 md:w-[220px]">
              <Search className="size-4 shrink-0 text-[#98A2B3]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 bg-transparent p-0 text-xs text-[#111827] placeholder:text-[#D1D5DB] focus-visible:ring-0"
                aria-label="Search quotation"
              />
            </div>

            <Button type="button" variant="outline" className="h-9 rounded-md border-[#E5E7EB] px-3 text-xs text-[#667085]">
              <SlidersHorizontal className="mr-1.5 size-3.5" aria-hidden />
              Filters
            </Button>
            <Button type="button" variant="outline" className="h-9 rounded-md border-[#E5E7EB] px-3 text-xs text-[#667085]">
              <CalendarDays className="mr-1.5 size-3.5" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        <div className="overflow-x-auto rounded-md border border-[#E5E7EB]">
          <table className="w-full min-w-[980px]">
            <thead>
              <tr className="border-b border-[#E5E7EB] bg-white">
                <th className="w-10 px-3 py-2 text-left">
                  <input type="checkbox" className="size-3.5 rounded border border-[#9CA3AF]" aria-label="Select all quotation rows" />
                </th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Date</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Customer</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Warehouse</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Total Items</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Total</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Status</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Action</th>
              </tr>
            </thead>
            <tbody>
              {QUOTATION_ROWS.map((row) => (
                <tr key={row.id} className="border-b border-[#F3F4F6] last:border-b-0">
                  <td className="px-3 py-3">
                    <input type="checkbox" className="size-3.5 rounded border border-[#9CA3AF]" aria-label={`Select row ${row.id}`} />
                  </td>
                  <td className="px-3 py-3 text-[12px] text-[#111827]">{row.date}</td>
                  <td className="px-3 py-3 text-[12px] text-[#111827]">{row.customer}</td>
                  <td className="px-3 py-3 text-[12px] text-[#111827]">{row.warehouse}</td>
                  <td className="px-3 py-3 text-[12px] text-[#111827]">{row.totalItems}</td>
                  <td className="px-3 py-3 text-[12px] text-[#111827]">{row.total}</td>
                  <td className="px-3 py-3">
                    <StatusBadge status={row.status} />
                  </td>
                  <td className="px-3 py-3">
                    <button
                      type="button"
                      className="inline-flex items-center justify-center rounded p-1 text-[#111827] hover:bg-[#F3F4F6]"
                      aria-label={`More actions for ${row.customer}`}
                    >
                      <MoreVertical className="size-4" aria-hidden />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-2 flex items-center justify-between">
          <Button
            type="button"
            variant="outline"
            className="h-7 rounded-md border-[#E5E7EB] px-3 text-[10px] font-medium text-[#6B7280]"
          >
            Previous
          </Button>
          <p className="text-[10px] text-[#9CA3AF]">page 1 of 10</p>
          <Button
            type="button"
            variant="outline"
            className="h-7 rounded-md border-[#E5E7EB] px-5 text-[10px] font-medium text-[#6B7280]"
          >
            Next
          </Button>
        </div>
      </section>
    </div>
  );
}