"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Copy, PackageCheck, Search, ShoppingCart, SlidersHorizontal } from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import Image from "next/image";
import avatarImage from "@/assets/images/avatar.jpeg";

type PurchaseOrdersPageBodyProps = {
  app: string;
};

type PurchaseOrderStatus = "pending" | "received" | "ordered";
type PaymentStatus = "partial" | "paid" | "due";

type PurchaseOrderRow = {
  id: string;
  image: typeof avatarImage;
  supplier: string;
  date: string;
  warehouse: string;
  supplierId: string;
  total: string;
  due: string;
  orderStatus: PurchaseOrderStatus;
  paymentStatus: PaymentStatus;
};

const PURCHASE_ORDER_ROWS: PurchaseOrderRow[] = [
  {
    id: "1",
    image: avatarImage,
    supplier: "Janet Adebayo",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 006",
    supplierId: "9348fj73",
    total: "$ 3,000.00",
    due: "$ 100.00",
    orderStatus: "pending",
    paymentStatus: "partial",
  },
  {
    id: "2",
    image: avatarImage,
    supplier: "Samuel Johnson",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 009",
    supplierId: "9348fj73",
    total: "$ 800.00",
    due: "$ 30.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
  {
    id: "3",
    image: avatarImage,
    supplier: "Francis Doe",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 005",
    supplierId: "9348fj73",
    total: "$ 1,000.00",
    due: "$ 60.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
  {
    id: "4",
    image: avatarImage,
    supplier: "Christian Dior",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 026",
    supplierId: "9348fj73",
    total: "$ 600.00",
    due: "$ 200.00",
    orderStatus: "ordered",
    paymentStatus: "due",
  },
  {
    id: "5",
    image: avatarImage,
    supplier: "Janet Adebayo",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 096",
    supplierId: "9348fj73",
    total: "$ 3,000.00",
    due: "$ 500.00",
    orderStatus: "pending",
    paymentStatus: "partial",
  },
  {
    id: "6",
    image: avatarImage,
    supplier: "Francis Doe",
    date: "11 Feb 2024 - 11:08pm",
    warehouse: "Warehouse 015",
    supplierId: "9348fj73",
    total: "$ 4,300.00",
    due: "$ 300.00",
    orderStatus: "received",
    paymentStatus: "paid",
  },
];

export default function PurchaseOrdersPageBody({ app }: PurchaseOrdersPageBodyProps) {
  const hasData = PURCHASE_ORDER_ROWS.length > 0;

  const orderStatusClass: Record<PurchaseOrderStatus, string> = {
    pending: "border-[#F04438] text-[#F04438] bg-[#FFF6F5]",
    received: "border-[#12B76A] text-[#12B76A] bg-[#ECFDF3]",
    ordered: "border-[#1570EF] text-[#1570EF] bg-[#EFF8FF]",
  };

  const paymentStatusClass: Record<PaymentStatus, string> = {
    partial: "border-[#175CD3] text-[#175CD3] bg-[#EFF8FF]",
    paid: "border-[#12B76A] text-[#12B76A] bg-[#ECFDF3]",
    due: "border-[#F04438] text-[#F04438] bg-[#FFF6F5]",
  };

  return (
    <div className="min-h-0 space-y-4 bg-[#F3F3F4] p-4 md:p-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-[30px] font-semibold leading-tight text-[#45464E]">
          Purchased Order History
        </h1>
        <Button
          asChild
          className="h-9 rounded-lg bg-[#003E6B] px-5 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
        >
          <Link href={`/${app}/purchase-orders/new`}>Create New Purchase</Link>
        </Button>
      </div>

      <section className="rounded-xl border border-[#E8EAEE] bg-white p-4">
        <div className="grid gap-4 lg:grid-cols-3 lg:divide-x lg:divide-[#E8EAEE]">
          <div className="space-y-3 lg:px-3">
            <div className="flex items-center justify-between">
              <div className="flex size-7 items-center justify-center rounded-lg bg-[#EEF1F4] text-[#667085]">
                <PackageCheck className="size-3.5" />
              </div>
              <Button
                type="button"
                variant="ghost"
                className="h-6 rounded px-2 text-[10px] font-medium text-[#BEC0CA] hover:bg-transparent"
              >
                This Week
              </Button>
            </div>
            <div className="grid grid-cols-3 gap-2">
              <div>
                <p className="text-[11px] text-[#6C727F]">All Orders</p>
                <p className="text-xl font-bold text-[#1C1D22]">344</p>
              </div>
              <div>
                <p className="text-[11px] text-[#6C727F]">Pending</p>
                <p className="text-xl font-bold text-[#1C1D22]">5</p>
              </div>
              <div>
                <p className="text-[11px] text-[#6C727F]">Completed</p>
                <p className="text-xl font-bold text-[#1C1D22]">320</p>
              </div>
            </div>
          </div>

          <div className="space-y-3 lg:px-5">
            <div className="flex items-center justify-between">
              <div className="flex size-7 items-center justify-center rounded-lg bg-[#EEF1F4] text-[#667085]">
                <PackageCheck className="size-3.5" />
              </div>
              <Button
                type="button"
                variant="ghost"
                className="h-6 rounded px-2 text-[10px] font-medium text-[#BEC0CA] hover:bg-transparent"
              >
                This Week
              </Button>
            </div>
            <div className="grid grid-cols-3 gap-2">
              <div>
                <p className="text-[11px] text-[#6C727F]">Canceled</p>
                <p className="text-xl font-bold text-[#1C1D22]">
                  20 <span className="text-[10px] font-semibold text-[#F04438]">-20%</span>
                </p>
              </div>
              <div>
                <p className="text-[11px] text-[#6C727F]">Returned</p>
                <p className="text-xl font-bold text-[#1C1D22]">20</p>
              </div>
              <div>
                <p className="text-[11px] text-[#6C727F]">Damaged</p>
                <p className="text-xl font-bold text-[#1C1D22]">5</p>
              </div>
            </div>
          </div>

          <div className="space-y-3 lg:px-5">
            <div className="flex items-center justify-between">
              <div className="flex size-7 items-center justify-center rounded-lg bg-[#EEF1F4] text-[#667085]">
                <ShoppingCart className="size-3.5" />
              </div>
              <Button
                type="button"
                variant="ghost"
                className="h-6 rounded px-2 text-[10px] font-medium text-[#BEC0CA] hover:bg-transparent"
              >
                This Week
              </Button>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <p className="text-[11px] text-[#F04438]">Abandoned Cart</p>
                <p className="text-xl font-bold text-[#1C1D22]">
                  20% <span className="text-[10px] font-semibold text-[#12B76A]">0.00%</span>
                </p>
              </div>
              <div>
                <p className="text-[11px] text-[#6C727F]">Customers</p>
                <p className="text-xl font-bold text-[#1C1D22]">30</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="rounded-xl border border-[#E8EAEE] bg-white p-4">
        <div
          className={`flex flex-col gap-4 md:flex-row md:items-center md:justify-between ${hasData ? "mb-4" : "mb-8"}`}
        >
          <h2 className={`text-lg font-semibold ${hasData ? "text-[#1C1D22]" : "text-[#CFD3D4]"}`}>
            Janat Order`s
          </h2>
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex h-10 w-full items-center gap-2 rounded-md border border-[#D4D7E1] px-3 md:w-[260px]">
              <Search className="size-4 shrink-0 text-[#ABAFB1]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-[11px] text-[#45464E] placeholder:text-[#CFD3D4] focus-visible:ring-0"
                aria-label="Search purchase orders"
              />
            </div>
            <Button
              type="button"
              variant="outline"
              className="h-10 gap-1 rounded-md border-[#D4D7E1] bg-white px-3 text-[11px] font-medium text-[#6C727F] hover:bg-white"
            >
              <SlidersHorizontal className="size-4" aria-hidden />
              Filters
            </Button>
            <Button
              type="button"
              variant="outline"
              className="h-10 gap-1 rounded-md border-[#D4D7E1] bg-white px-3 text-[11px] font-medium text-[#6C727F] hover:bg-white"
            >
              <PackageCheck className="size-4" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        {hasData ? (
          <div className="overflow-x-auto rounded-md border border-[#E8EAEE]">
            <table className="w-full min-w-[1120px]">
              <thead>
                <tr className="border-b border-[#F1F3F9] bg-white">
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">Image</th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    Supplier Name
                  </th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">Date</th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    Warehouse
                  </th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    Supplier ID
                  </th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">Total</th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">Due</th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    Order Status
                  </th>
                  <th className="px-3 py-2.5 text-left text-[13px] font-semibold text-[#343A46]">
                    Payment Status
                  </th>
                </tr>
              </thead>
              <tbody>
                {PURCHASE_ORDER_ROWS.map((row) => (
                  <tr key={row.id} className="border-b border-[#F7F8FB]">
                    <td className="px-3 py-2">
                      <Image
                        src={row.image}
                        alt={row.supplier}
                        width={32}
                        height={32}
                        className="size-8 rounded-md object-cover"
                      />
                    </td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{row.supplier}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{row.date}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{row.warehouse}</td>
                    <td className="px-3 py-2">
                      <div className="flex items-center gap-1.5">
                        <span className="font-mono text-[12px] text-[#272833]">{row.supplierId}</span>
                        <button
                          type="button"
                          className="text-[#6C727F] hover:text-[#272833]"
                          aria-label={`Copy supplier id ${row.supplierId}`}
                        >
                          <Copy className="size-3.5" />
                        </button>
                      </div>
                    </td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{row.total}</td>
                    <td className="px-3 py-2 text-[13px] text-[#272833]">{row.due}</td>
                    <td className="px-3 py-2">
                      <Select defaultValue={row.orderStatus}>
                        <SelectTrigger
                          className={cn(
                            "h-7 w-[120px] rounded-md border px-2 text-[12px] font-medium shadow-none [&>svg]:size-3.5",
                            orderStatusClass[row.orderStatus]
                          )}
                        >
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent align="end">
                          <SelectItem value="pending">Pending</SelectItem>
                          <SelectItem value="received">Received</SelectItem>
                          <SelectItem value="ordered">Ordered</SelectItem>
                        </SelectContent>
                      </Select>
                    </td>
                    <td className="px-3 py-2">
                      <Select defaultValue={row.paymentStatus}>
                        <SelectTrigger
                          className={cn(
                            "h-7 w-[110px] rounded-md border px-2 text-[12px] font-medium shadow-none [&>svg]:size-3.5",
                            paymentStatusClass[row.paymentStatus]
                          )}
                        >
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent align="end">
                          <SelectItem value="partial">Partial</SelectItem>
                          <SelectItem value="paid">Paid</SelectItem>
                          <SelectItem value="due">Due</SelectItem>
                        </SelectContent>
                      </Select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <div className="flex min-h-[360px] flex-col items-center justify-center gap-5 py-10">
            <div className="flex size-[112px] items-center justify-center rounded-full border border-[#E1E2E9] bg-[#F4F5FA]">
              <PackageCheck className="size-10 text-[#BEC0CA]" strokeWidth={1.35} aria-hidden />
            </div>
            <div className="max-w-md space-y-1.5 text-center">
              <p className="text-[22px] font-bold leading-[1.35] text-[#1C1D22]">
                No Purchase Orders Yet?
              </p>
              <p className="text-sm font-normal leading-relaxed text-[#8B8D97]">
                Create your first purchase order to start tracking supplier purchases and stock
                restocking.
              </p>
            </div>
            <Button
              asChild
              className="h-11 rounded-lg bg-[#003E6B] px-8 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
            >
              <Link href={`/${app}/purchase-orders/new`}>Create Purchase Order</Link>
            </Button>
          </div>
        )}

        {hasData ? (
          <div className="mt-3 flex items-center justify-between">
            <Button
              type="button"
              variant="outline"
              className="h-8 rounded-md border-[#E5E7EB] px-4 text-[10px] font-medium text-[#8B8D97]"
            >
              Previous
            </Button>
            <p className="text-[10px] text-[#CFD3D4]">page 1 of 10</p>
            <Button
              type="button"
              variant="outline"
              className="h-8 rounded-md border-[#E5E7EB] px-4 text-[10px] font-medium text-[#8B8D97]"
            >
              Next
            </Button>
          </div>
        ) : null}
      </section>
    </div>
  );
}