"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { ArrowLeft, MoreVertical, Package, Search, SlidersHorizontal, X } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

type CategoryRow = {
  id: string;
  name: string;
  description: string;
};

const CATEGORY_ROWS: CategoryRow[] = [
  { id: "1", name: "Gadgets", description: "This Content is dummy text that is used for UI Design." },
  { id: "2", name: "Home Accessories", description: "This Content is dummy text that is used for UI Design." },
  { id: "3", name: "Office Accessories", description: "This Content is dummy text that is used for UI Design." },
  { id: "4", name: "Kitchen Accessories", description: "This Content is dummy text that is used for UI Design." },
  { id: "5", name: "Machinery", description: "This Content is dummy text that is used for UI Design." },
  { id: "6", name: "Sport Accessories", description: "This Content is dummy text that is used for UI Design." },
];

type ManageCategoryPageBodyProps = {
  app: string;
};

export default function ManageCategoryPageBody({ app }: ManageCategoryPageBodyProps) {
  const [openCreateModal, setOpenCreateModal] = useState(false);
  const [categoryName, setCategoryName] = useState("");
  const [categoryDescription, setCategoryDescription] = useState("");

  const handleCloseModal = () => {
    setOpenCreateModal(false);
  };

  const handleAddCategory = () => {
    setOpenCreateModal(false);
    setCategoryName("");
    setCategoryDescription("");
  };

  return (
    <div className="min-h-0 space-y-6 bg-[#F4F5FA] p-5 md:p-6">
      {openCreateModal ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 px-4">
          <div className="w-full max-w-[560px] rounded-xl bg-white p-4 shadow-xl sm:p-5">
            <div className="flex items-start justify-between gap-4">
              <h3 className="text-lg font-semibold text-[#1C1D22]">Create Product Category</h3>
              <button
                type="button"
                onClick={handleCloseModal}
                className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-[#EDF2F7] text-[#1C1D22] hover:bg-[#e0e9f2]"
                aria-label="Close modal"
              >
                <X className="size-4" aria-hidden />
              </button>
            </div>

            <div className="mt-5 space-y-3">
              <Input
                value={categoryName}
                onChange={(event) => setCategoryName(event.target.value)}
                placeholder="Enter Product Category Name"
                className="h-10 border-0 bg-[#F7F9FC] text-sm text-[#1C1D22] placeholder:text-[#B0B3C2] focus-visible:ring-0"
              />
              <Textarea
                value={categoryDescription}
                onChange={(event) => setCategoryDescription(event.target.value)}
                placeholder="Description"
                rows={5}
                className="min-h-[130px] resize-none border-0 bg-[#F7F9FC] text-sm text-[#1C1D22] placeholder:text-[#B0B3C2] focus-visible:ring-0"
              />
            </div>

            <div className="mt-4 flex items-center justify-center gap-3">
              <Button
                type="button"
                onClick={handleCloseModal}
                className="h-8 min-w-[110px] rounded-md bg-[#F28B20] px-6 text-xs font-semibold text-white hover:bg-[#de7e1d]"
              >
                Cancel
              </Button>
              <Button
                type="button"
                onClick={handleAddCategory}
                className="h-8 min-w-[110px] rounded-md bg-[#074473] px-6 text-xs font-semibold text-white hover:bg-[#063861]"
              >
                Add
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <Button
            asChild
            type="button"
            variant="outline"
            className="size-9 rounded-md border-[#E5E7EB] p-0 text-[#074473] hover:bg-[#F7FAFC]"
          >
            <Link href={`/${app}/products`} aria-label="Back to products">
              <ArrowLeft className="size-4" aria-hidden />
            </Link>
          </Button>
          <h1 className="text-2xl font-semibold leading-[1.35] text-[#45464E]">Product Category</h1>
        </div>
        <Button
          type="button"
          onClick={() => setOpenCreateModal(true)}
          className="h-9 rounded-md bg-[#074473] px-5 text-xs font-semibold text-white hover:bg-[#063861]"
        >
          Create Category
        </Button>
      </div>

      <section className="rounded-xl border border-[#F1F3F9] bg-white p-5 shadow-[0_1px_2px_rgba(16,24,40,0.04)]">
        <div className="mb-4 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <h2 className="text-base font-semibold text-[#1C1D22]">Product Inventory Items</h2>
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex h-9 w-full items-center gap-2 rounded-md border border-[#F1F3F9] px-3 md:w-[220px]">
              <Search className="size-4 text-[#ABAFB1]" aria-hidden />
              <Input
                type="search"
                placeholder="Search"
                className="h-full border-0 p-0 text-xs text-[#45464E] placeholder:text-[#CFD3D4] focus-visible:ring-0"
                aria-label="Search categories"
              />
            </div>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#F1F3F9] bg-white px-3 text-xs font-medium text-[#CFD3D4] hover:bg-white"
            >
              <SlidersHorizontal className="size-4" aria-hidden />
              Filters
            </Button>
            <Button
              type="button"
              variant="outline"
              className="h-9 gap-1 rounded-md border-[#F1F3F9] bg-white px-3 text-xs font-medium text-[#CFD3D4] hover:bg-white"
            >
              <Package className="size-4" aria-hidden />
              filters
            </Button>
          </div>
        </div>

        <div className="overflow-x-auto rounded-md border border-[#F1F3F9]">
          <table className="w-full min-w-[760px]">
            <thead>
              <tr className="border-b border-[#F1F3F9] bg-white">
                <th className="px-3 py-2 text-left">
                  <input type="checkbox" className="size-3 rounded border border-[#B9C0D4]" />
                </th>
                <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Category Name</th>
                <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Description</th>
                <th className="px-3 py-2 text-left text-[11px] font-semibold text-[#1C1D22]">Action</th>
              </tr>
            </thead>
            <tbody>
              {CATEGORY_ROWS.map((row) => (
                <tr key={row.id} className="border-b border-[#F7F8FB]">
                  <td className="px-3 py-2">
                    <input type="checkbox" className="size-3 rounded border border-[#B9C0D4]" />
                  </td>
                  <td className="px-3 py-2 text-[11px] font-medium text-[#1C1D22]">{row.name}</td>
                  <td className="px-3 py-2 text-[11px] text-[#1C1D22]">{row.description}</td>
                  <td className="px-3 py-2">
                    <button
                      type="button"
                      className="inline-flex items-center justify-center rounded p-1 text-[#1C1D22] hover:bg-[#F5F7FA]"
                      aria-label="More actions"
                    >
                      <MoreVertical className="size-3.5" aria-hidden />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-3 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-4 text-[11px] font-medium text-[#8B8D97]"
          >
            Next
          </Button>
        </div>
      </section>
    </div>
  );
}