"use client";

import { MoreVertical, Search, SlidersHorizontal } from "lucide-react";
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 { useState } from "react";

type WarehouseRow = {
  id: string;
  imageSeed: string;
  name: string;
  phoneNumber: string;
  email: string;
  country: string;
  city: string;
};

const WAREHOUSE_ROWS: WarehouseRow[] = [
  {
    id: "1",
    imageSeed: "from-[#7B4A33] to-[#4B2E21]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "Los Angles",
  },
  {
    id: "2",
    imageSeed: "from-[#B8C4A9] to-[#6D7A61]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "New York",
  },
  {
    id: "3",
    imageSeed: "from-[#4777A8] to-[#1F4061]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "California",
  },
  {
    id: "4",
    imageSeed: "from-[#B94D3E] to-[#7D2A1F]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "Los Angles",
  },
  {
    id: "5",
    imageSeed: "from-[#9DA7AF] to-[#59626B]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "California",
  },
  {
    id: "6",
    imageSeed: "from-[#F26E2A] to-[#8A2F12]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "New York",
  },
  {
    id: "7",
    imageSeed: "from-[#F3A83B] to-[#AA6512]",
    name: "App Store",
    phoneNumber: "+1 234 567 890",
    email: "abc@gmail.com",
    country: "United State",
    city: "Los Angles",
  },
];

export default function WarehousesPage() {
  const [editingWarehouse, setEditingWarehouse] = useState<WarehouseRow | null>(null);
  const [isAddWarehouseOpen, setIsAddWarehouseOpen] = useState(false);

  return (
    <div className="min-h-0 bg-[#F3F4F6] p-2 md:p-3">
      <MainTitle title="Manage Warehouse">
        <Button
          className="h-9 rounded-md bg-[#003E6B] px-5 text-xs font-semibold text-white shadow-none hover:bg-[#003256]"
          onClick={() => setIsAddWarehouseOpen(true)}
        >
          Add New Warehouse
        </Button>
      </MainTitle>

      <section className="rounded-lg border border-[#E5E7EB] bg-white p-4">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
          <h2 className="text-[18px] font-semibold text-[#374151]">All Warehouses</h2>

          <div className="flex w-full flex-wrap items-center justify-end gap-2 md:w-auto">
            <div className="flex h-8 w-full items-center gap-1.5 rounded-md border border-[#E5E7EB] bg-white px-2 md:w-[180px]">
              <Search className="size-3.5 shrink-0 text-[#9CA3AF]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-[11px] text-[#111827] placeholder:text-[#D1D5DB] focus-visible:ring-0"
                aria-label="Search warehouse"
              />
            </div>

            <Button type="button" variant="outline" className="h-8 rounded-md border-[#E5E7EB] px-3 text-[11px] text-[#9CA3AF]">
              <SlidersHorizontal className="mr-1 size-3.5" aria-hidden />
              Filters
            </Button>
            <Button type="button" variant="outline" className="h-8 rounded-md border-[#E5E7EB] px-3 text-[11px] text-[#9CA3AF]">
              <SlidersHorizontal className="mr-1 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-[#F9FAFB]">
                <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 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]">Warehouse Name</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Phone Number</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Email</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Country</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">City</th>
                <th className="px-3 py-2 text-left text-[12px] font-semibold text-[#111827]">Action</th>
              </tr>
            </thead>
            <tbody>
              {WAREHOUSE_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">
                    <div className={`size-8 rounded-md bg-gradient-to-br ${row.imageSeed}`} />
                  </td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.name}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.phoneNumber}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.email}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.country}</td>
                  <td className="px-3 py-2.5 text-[12px] text-[#111827]">{row.city}</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}`}
                      onClick={() => setEditingWarehouse(row)}
                    >
                      <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>

      <Dialog open={Boolean(editingWarehouse)} onOpenChange={(open) => !open && setEditingWarehouse(null)}>
        <DialogContent className="max-w-[860px] 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-[22px] font-semibold text-[#111827]">Edit Warehouse</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 px-6 pb-6 pt-4">
            <div className="flex items-center justify-center gap-4 rounded-lg p-2">
              <div
                className={`flex size-[56px] items-center justify-center rounded-full bg-gradient-to-br ${editingWarehouse?.imageSeed ?? "from-[#6E6E6E] to-[#BEBEBE]"}`}
              />
              <div className="space-y-0.5 text-center">
                <p className="text-[12px] text-[#98A2B3]">Drag image here</p>
                <p className="text-[12px] text-[#98A2B3]">or</p>
                <button type="button" className="inline-flex items-center gap-1 text-[12px] font-medium text-[#1570EF]">
                  Browse image
                </button>
              </div>
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Enter Warehouse Name</label>
                <Input
                  defaultValue={editingWarehouse?.name === "App Store" ? "Warehouse 01" : editingWarehouse?.name}
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Email</label>
                <Input
                  defaultValue={editingWarehouse?.email === "abc@gmail.com" ? "lisy@gmail.com" : editingWarehouse?.email}
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Phone Number</label>
              <div className="grid grid-cols-[88px_1fr] gap-2">
                <div className="flex h-10 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-2 text-[12px] text-[#111827]">
                  🇺🇸 +1
                </div>
                <Input
                  defaultValue="802 345 6789"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Address</label>
              <textarea
                defaultValue="123 main sfreel near post office, building number 13D, floor number 08, room number 12."
                className="min-h-[120px] w-full resize-none rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 py-2.5 text-[13px] text-[#111827] outline-none"
              />
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">State</label>
                <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#111827]">
                  California
                </div>
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Zip Code</label>
                <Input
                  defaultValue="10006"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Country</label>
              <div className="flex h-10 items-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 text-[13px] text-[#111827]">
                United State
              </div>
            </div>

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

      <Dialog open={isAddWarehouseOpen} onOpenChange={setIsAddWarehouseOpen}>
        <DialogContent className="max-w-[860px] 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-[22px] font-semibold text-[#111827]">Add New Warehouse</DialogTitle>
          </DialogHeader>

          <div className="space-y-4 px-6 pb-6 pt-4">
            <div className="flex items-center justify-center gap-4 rounded-lg p-2">
              <div className="flex size-[56px] items-center justify-center rounded-full border border-dashed border-[#98A2B3] text-[#98A2B3]" />
              <div className="space-y-0.5 text-center">
                <p className="text-[12px] text-[#98A2B3]">Drag image here</p>
                <p className="text-[12px] text-[#98A2B3]">or</p>
                <button type="button" className="inline-flex items-center gap-1 text-[12px] font-medium text-[#1570EF]">
                  Browse image
                </button>
              </div>
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Enter Warehouse Name</label>
                <Input
                  placeholder="Warehouse 01"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Email</label>
                <Input
                  placeholder="lisy@gmail.com"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Phone Number</label>
              <div className="grid grid-cols-[88px_1fr] gap-2">
                <div className="flex h-10 items-center justify-center rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-2 text-[12px] text-[#111827]">
                  🇺🇸 +1
                </div>
                <Input
                  placeholder="802 345 6789"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Address</label>
              <textarea
                placeholder="Enter warehouse address"
                className="min-h-[120px] w-full resize-none rounded-md border border-[#E5E7EB] bg-[#F5F7FA] px-3 py-2.5 text-[13px] text-[#111827] outline-none placeholder:text-[#9CA3AF]"
              />
            </div>

            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">State</label>
                <Input
                  placeholder="California"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
              </div>
              <div className="space-y-1.5">
                <label className="text-[11px] text-[#667085]">Zip Code</label>
                <Input
                  placeholder="10006"
                  className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
                />
              </div>
            </div>

            <div className="space-y-1.5">
              <label className="text-[11px] text-[#667085]">Country</label>
              <Input
                placeholder="United State"
                className="h-10 border-[#E5E7EB] bg-[#F5F7FA] text-[13px] text-[#111827] placeholder:text-[#9CA3AF] focus-visible:ring-0"
              />
            </div>

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