"use client";

import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { MoreVertical } from "lucide-react";
import { useState } from "react";

type BillingRow = {
  id: string;
  date: string;
  time: string;
  customer: string;
  quantity: string;
  total: string;
  paid: string;
  due: string;
  orderStatus: "pending" | "received" | "ordered";
  paymentStatus: "partial" | "paid" | "due";
};

const REPORT_TABS = ["Sale", "Payment", "Quotation", "Return"] as const;

const BILLING_ROWS: BillingRow[] = [
  {
    id: "1",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Jane Ronan",
    quantity: "01",
    total: "$120.00",
    paid: "$12.00",
    due: "$0.00",
    orderStatus: "pending",
    paymentStatus: "partial",
  },
  {
    id: "2",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Victor James",
    quantity: "03",
    total: "$40.00",
    paid: "$300.00",
    due: "$300.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
  {
    id: "3",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Anda Smith",
    quantity: "07",
    total: "$110.00",
    paid: "$700.00",
    due: "$700.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
  {
    id: "4",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Angel Carter",
    quantity: "12",
    total: "$210.00",
    paid: "$1,000.00",
    due: "$1,000.00",
    orderStatus: "ordered",
    paymentStatus: "due",
  },
  {
    id: "5",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Jonathon Ronan",
    quantity: "02",
    total: "$500.00",
    paid: "$500.00",
    due: "$500.00",
    orderStatus: "pending",
    paymentStatus: "partial",
  },
  {
    id: "6",
    date: "11 Feb 2024",
    time: "11:08pm",
    customer: "Jeniffer Loe",
    quantity: "04",
    total: "$200.00",
    paid: "$5,000.00",
    due: "$5,000.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
];

function StatusBadge({
  status,
}: {
  status: BillingRow["orderStatus"] | BillingRow["paymentStatus"];
}) {
  const map = {
    pending: "border-[#F97066] text-[#F04438]",
    partial: "border-[#2E90FA] text-[#175CD3]",
    received: "border-[#47CD89] text-[#039855]",
    paid: "border-[#47CD89] text-[#039855]",
    ordered: "border-[#2E90FA] text-[#175CD3]",
    due: "border-[#F97066] text-[#F04438]",
  } as const;

  return (
    <span
      className={cn(
        "inline-flex min-w-[64px] items-center justify-center rounded-[4px] border px-2 py-0.5 text-[11px] font-medium leading-none capitalize",
        map[status]
      )}
    >
      {status}
    </span>
  );
}

export default function BillingsPageBody() {
  const [activeTab, setActiveTab] = useState<(typeof REPORT_TABS)[number]>("Sale");

  return (
    <div className="min-h-0 space-y-6 bg-[#F8F9FA] p-5 md:p-6">
      <div className="space-y-4">
        <h1 className="text-xl font-semibold leading-[1.35] text-[#45464E]">Billing Report</h1>
        <section className="rounded-xl border border-[#F1F3F9] bg-white p-4 shadow-[0_1px_2px_rgba(16,24,40,0.04)] md:p-5">
          <div className="flex flex-col gap-4">
            <div className="flex flex-col justify-between gap-3 md:flex-row md:items-start">
              <div className="space-y-2">
                <h2 className="text-[20px] font-semibold text-[#111827]">Suplier Payment Report</h2>
                <div className="flex flex-wrap items-center border-b border-[#E5E7EB]">
                  {REPORT_TABS.map((tab) => (
                    <button
                      key={tab}
                      type="button"
                      onClick={() => setActiveTab(tab)}
                      className={cn(
                        "relative px-4 py-2 text-[13px] font-semibold",
                        activeTab === tab ? "text-[#D97706]" : "text-[#344054]"
                      )}
                    >
                      {activeTab === tab ? (
                        <span className="absolute inset-x-0 bottom-0 h-[2px] rounded-full bg-[#D97706]" />
                      ) : null}
                      {tab}
                    </button>
                  ))}
                </div>
              </div>
              <div className="flex w-full flex-col gap-2 md:w-[214px]">
                <Select defaultValue="supplier-payment">
                  <SelectTrigger className="h-10 rounded-md border-[#EAECF0] bg-white px-3 text-xs text-[#344054]">
                    <SelectValue placeholder="Supplier Payment" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="supplier-payment">Supplier Payment</SelectItem>
                    <SelectItem value="customer-payment">Customer Payment</SelectItem>
                    <SelectItem value="all">All Payments</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all-warehouses">
                  <SelectTrigger className="h-10 rounded-md border-[#EAECF0] bg-white px-3 text-xs text-[#344054]">
                    <SelectValue placeholder="Select Warehouse" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all-warehouses">Select Warehouse</SelectItem>
                    <SelectItem value="warehouse-1">Warehouse 001</SelectItem>
                    <SelectItem value="warehouse-2">Warehouse 002</SelectItem>
                    <SelectItem value="warehouse-3">Warehouse 003</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="overflow-x-auto rounded-md border border-[#F1F3F9]">
              <table className="w-full min-w-[980px]">
                <thead>
                  <tr className="border-b border-[#F1F3F9] bg-white">
                    <th className="w-10 px-3 py-3 text-left">
                      <input
                        type="checkbox"
                        className="size-3.5 rounded border border-[#B9C0D4]"
                        aria-label="Select all billing rows"
                      />
                    </th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Order Date</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Customer</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Quantity</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Total</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Paid</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Due</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Status</th>
                    <th className="px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Status</th>
                    <th className="w-16 px-2 py-3 text-left text-[13px] font-semibold text-[#101828]">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {BILLING_ROWS.map((row) => (
                    <tr key={row.id} className="border-b border-[#F7F8FB] last:border-b-0">
                      <td className="px-3 py-3 align-top">
                        <input
                          type="checkbox"
                          className="size-3.5 rounded border border-[#B9C0D4]"
                          aria-label={`Select billing row ${row.id}`}
                        />
                      </td>
                      <td className="px-2 py-2.5 text-[13px] leading-[1.2] text-[#111827]">
                        <p>{row.date}</p>
                        <p className="mt-1 text-[12px] text-[#111827]">{row.time}</p>
                      </td>
                      <td className="px-2 py-3 text-[13px] text-[#111827]">{row.customer}</td>
                      <td className="px-2 py-3 text-[13px] text-[#111827]">{row.quantity}</td>
                      <td className="px-2 py-3 text-[13px] text-[#111827]">{row.total}</td>
                      <td className="px-2 py-3 text-[13px] text-[#111827]">{row.paid}</td>
                      <td className="px-2 py-3 text-[13px] text-[#111827]">{row.due}</td>
                      <td className="px-2 py-3">
                        <StatusBadge status={row.orderStatus} />
                      </td>
                      <td className="px-2 py-3">
                        <StatusBadge status={row.paymentStatus} />
                      </td>
                      <td className="px-2 py-3">
                        <button
                          type="button"
                          className="inline-flex items-center justify-center rounded p-1 text-[#1C1D22] hover:bg-[#F5F7FA]"
                          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-8 rounded-md border-[#E5E7EB] px-4 text-[11px] font-medium text-[#8B8D97]"
              >
                Previous
              </Button>
              <p className="text-[11px] text-[#CFD3D4]">page 1 of 10</p>
              <Button
                type="button"
                variant="outline"
                className="h-8 rounded-md border-[#E5E7EB] px-5 text-[11px] font-medium text-[#8B8D97]"
              >
                Next
              </Button>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}