"use client";

import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import {
  CalendarDays,
  ChevronDown,
  MoreVertical,
  Plus,
  Search,
  SlidersHorizontal,
  UserRound,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useState } from "react";
import avatarImage from "@/assets/images/avatar.jpeg";

type SupplierStatus = "completed" | "pending";

type SupplierRow = {
  id: string;
  name: string;
  referenceId: string;
  fromWarehouse: string;
  toWarehouse: string;
  status: SupplierStatus;
};

const SUPPLIER_ROWS: SupplierRow[] = [
  {
    id: "1",
    name: "Angela Carter",
    referenceId: "#123d22",
    fromWarehouse: "Warehouse 01",
    toWarehouse: "Warehouse 03",
    status: "completed",
  },
  {
    id: "2",
    name: "Victor James",
    referenceId: "#f35g315",
    fromWarehouse: "Warehouse 05",
    toWarehouse: "Warehouse 007",
    status: "completed",
  },
  {
    id: "3",
    name: "Jhon Ronan",
    referenceId: "#51fe53c",
    fromWarehouse: "Warehouse 007",
    toWarehouse: "Warehouse 01",
    status: "pending",
  },
  {
    id: "4",
    name: "David Rock",
    referenceId: "#6sdf8sd1",
    fromWarehouse: "Warehouse 03",
    toWarehouse: "Warehouse 04",
    status: "completed",
  },
  {
    id: "5",
    name: "Sharp Camela",
    referenceId: "#f13ad5f1",
    fromWarehouse: "Warehouse 08",
    toWarehouse: "Warehouse 01",
    status: "pending",
  },
  {
    id: "6",
    name: "James Labron",
    referenceId: "#f645g86",
    fromWarehouse: "Warehouse 007",
    toWarehouse: "Warehouse 04",
    status: "pending",
  },
  {
    id: "7",
    name: "Michael Jorden",
    referenceId: "#f4d68f6",
    fromWarehouse: "Warehouse 04",
    toWarehouse: "Warehouse 05",
    status: "completed",
  },
];

function StatusBadge({ status }: { status: SupplierStatus }) {
  const isCompleted = status === "completed";
  return (
    <button
      type="button"
      className={`inline-flex items-center gap-1 rounded-md border px-2.5 py-1 text-[12px] font-medium ${
        isCompleted
          ? "border-[#039855] text-[#039855] hover:bg-[#ECFDF3]"
          : "border-[#F04438] text-[#F04438] hover:bg-[#FEF3F2]"
      }`}
    >
      {isCompleted ? "Completed" : "Pending"}
      <ChevronDown className="size-3.5 shrink-0" aria-hidden />
    </button>
  );
}

export default function SuppliersPage() {
  const params = useParams<{ app: string }>();
  const app = params.app ?? "";
  const hasSuppliers = SUPPLIER_ROWS.length > 0;
  const [isAddSupplierOpen, setIsAddSupplierOpen] = useState(false);
  const [addAddress, setAddAddress] = useState(true);

  return (
    <div className="min-h-0 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Supplier Summary">
        <Button
          className="h-9 rounded-md bg-[#003E6B] px-5 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
          onClick={() => setIsAddSupplierOpen(true)}
        >
          <Plus className="mr-1.5 size-3.5" aria-hidden />
          Add New Supplier
        </Button>
      </MainTitle>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4 md:p-5">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-[26px] font-semibold text-[#101828]">All Suppliers</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 supplier"
              />
            </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>

        {hasSuppliers ? (
          <>
            <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 supplier rows"
                      />
                    </th>
                    <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Image</th>
                    <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Supplier Name</th>
                    <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Reference ID</th>
                    <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">From Warehouse</th>
                    <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">To 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]">Action</th>
                  </tr>
                </thead>
                <tbody>
                  {SUPPLIER_ROWS.map((row) => (
                    <tr key={row.id} className="border-b border-[#F3F4F6] last:border-b-0">
                      <td className="px-3 py-2.5">
                        <input
                          type="checkbox"
                          className="size-3.5 rounded border border-[#9CA3AF]"
                          aria-label={`Select ${row.name}`}
                        />
                      </td>
                      <td className="px-3 py-2.5">
                        <Image
                          src={avatarImage}
                          alt={row.name}
                          width={36}
                          height={36}
                          className="size-9 rounded-full object-cover"
                        />
                      </td>
                      <td className="px-3 py-2.5 text-[12px] text-[#111827]">
                        <Link
                          href={`/${app}/suppliers/${row.id}`}
                          className="hover:text-[#003E6B] hover:underline"
                        >
                          {row.name}
                        </Link>
                      </td>
                      <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.referenceId}</td>
                      <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.fromWarehouse}</td>
                      <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.toWarehouse}</td>
                      <td className="px-3 py-2.5">
                        <StatusBadge status={row.status} />
                      </td>
                      <td className="px-3 py-2.5">
                        <button
                          type="button"
                          className="inline-flex items-center justify-center rounded p-1 text-[#111827] hover:bg-[#F3F4F6]"
                          aria-label={`More actions for ${row.name}`}
                        >
                          <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>
          </>
        ) : (
          <div className="flex min-h-[320px] flex-col items-center justify-center text-center">
            <div className="mb-3 flex size-[84px] items-center justify-center rounded-full border border-[#EAECF0] bg-[#F9FAFB] text-[#98A2B3]">
              <UserRound className="size-8" aria-hidden />
            </div>
            <p className="text-[28px] font-semibold text-[#101828]">No Supplier Yet?</p>
            <p className="mt-1 text-[20px] text-[#667085]">Add More Supplier</p>
            <Button
              className="mt-4 h-10 rounded-md bg-[#003E6B] px-6 text-sm font-semibold text-white shadow-none hover:bg-[#003256]"
              onClick={() => setIsAddSupplierOpen(true)}
            >
              <Plus className="mr-1.5 size-4" aria-hidden />
              Add New Supplier
            </Button>
          </div>
        )}
      </section>

      <Dialog
        open={isAddSupplierOpen}
        onOpenChange={(open) => {
          setIsAddSupplierOpen(open);
          if (!open) setAddAddress(true);
        }}
      >
        <DialogContent className="max-w-[560px] gap-0 rounded-xl border-0 bg-white p-0 shadow-2xl [&>button]:right-4 [&>button]:top-4 [&>button]:inline-flex [&>button]:h-8 [&>button]:w-8 [&>button]:items-center [&>button]:justify-center [&>button]:rounded-md [&>button]:border-0 [&>button]:bg-[#EEF1F4] [&>button]:p-0 [&>button]:opacity-100 [&>button]:shadow-none [&>button]:hover:bg-[#E3E7EC] [&>button]:hover:opacity-100 [&>button]:focus:ring-0 [&>button]:focus:ring-offset-0 [&>button>svg]:size-4 [&>button>svg]:text-[#667085]">
          <DialogHeader className="px-6 pb-0 pt-6">
            <DialogTitle className="text-left text-[20px] font-semibold text-[#111827]">New Supplier</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 px-6 pb-6 pt-4">
            <div className="grid gap-3 md:grid-cols-2">
              <Input
                placeholder="Full Name"
                className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
              />
              <Input
                placeholder="Email"
                className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
              />
            </div>

            <div className="grid grid-cols-[88px_1fr] gap-2">
              <button
                type="button"
                className="flex h-10 items-center justify-between rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-2 text-[12px] text-[#111827]"
              >
                🇺🇸 +1
                <ChevronDown className="size-3.5 shrink-0 text-[#667085]" aria-hidden />
              </button>
              <Input
                placeholder="000 000 0000"
                className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
              />
            </div>

            <button
              type="button"
              className="flex h-10 w-full items-center justify-between rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#9CA3AF]"
            >
              Product
              <ChevronDown className="size-4 text-[#667085]" aria-hidden />
            </button>

            <div className="flex h-10 items-center justify-between rounded-md px-0.5">
              <span className="text-[13px] text-[#111827]">Add Address</span>
              <Switch
                checked={addAddress}
                onCheckedChange={setAddAddress}
                className="data-[state=checked]:bg-[#1570EF] data-[state=unchecked]:bg-[#D0D5DD]"
              />
            </div>

            {addAddress ? (
              <>
                <textarea
                  placeholder="Address"
                  className="min-h-[120px] w-full resize-y rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 py-2.5 text-[13px] text-[#111827] outline-none placeholder:text-[#9CA3AF]"
                />
                <Input
                  placeholder="City"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
                <div className="grid gap-3 md:grid-cols-2">
                  <button
                    type="button"
                    className="flex h-10 w-full items-center justify-between rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#9CA3AF]"
                  >
                    Country
                    <ChevronDown className="size-4 text-[#667085]" aria-hidden />
                  </button>
                  <button
                    type="button"
                    className="flex h-10 w-full items-center justify-between rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#9CA3AF]"
                  >
                    State
                    <ChevronDown className="size-4 text-[#667085]" aria-hidden />
                  </button>
                </div>
              </>
            ) : null}

            <div className="flex items-center justify-center gap-4 pt-1">
              <Button
                type="button"
                className="h-8 min-w-[110px] rounded-md bg-[#EF7D00] text-[12px] font-semibold text-white hover:bg-[#D46F00]"
                onClick={() => setIsAddSupplierOpen(false)}
              >
                Cancel
              </Button>
              <Button
                type="button"
                className="h-8 min-w-[110px] rounded-md bg-[#003E6B] text-[12px] font-semibold text-white hover:bg-[#003256]"
                onClick={() => setIsAddSupplierOpen(false)}
              >
                Add
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}