"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  CalendarDays,
  ChevronDown,
  Clock3,
  ImageIcon,
  ImageUp,
  Italic,
  Link2,
  Minus,
  Plus,
  Underline,
  X,
} from "lucide-react";
import { useState } from "react";

function TinyStepper() {
  return (
    <div className="flex h-10 w-9 flex-col overflow-hidden rounded-r-md border-l border-[#E8ECF4]">
      <button type="button" className="grid h-1/2 place-items-center bg-[#EFF2F7] text-[#9AA3B2]" aria-label="Increase value">
        <Plus className="size-3" aria-hidden />
      </button>
      <button type="button" className="grid h-1/2 place-items-center bg-[#EFF2F7] text-[#9AA3B2]" aria-label="Decrease value">
        <Minus className="size-3" aria-hidden />
      </button>
    </div>
  );
}

function FakeSwitch() {
  return (
    <button type="button" className="relative h-4 w-8 rounded-full bg-[#E9EEF9]" aria-label="Toggle option">
      <span className="absolute left-0.5 top-0.5 size-3 rounded-full bg-[#BEC6D4]" />
    </button>
  );
}

export default function AddNewProductPageBody() {
  const [openCategoryModal, setOpenCategoryModal] = useState(false);
  const [categoryName, setCategoryName] = useState("");
  const [categoryDescription, setCategoryDescription] = useState("");

  const closeCategoryModal = () => setOpenCategoryModal(false);

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

  return (
    <div className="min-h-0 space-y-4 bg-[#F4F5FA] p-4 md:p-5">
      {openCategoryModal ? (
        <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={closeCategoryModal}
                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] w-full resize-none rounded-md border-0 bg-[#F7F9FC] px-3 py-2 text-sm text-[#1C1D22] placeholder:text-[#B0B3C2] outline-none"
              />
            </div>

            <div className="mt-4 flex items-center justify-center gap-3">
              <Button
                type="button"
                onClick={closeCategoryModal}
                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 flex-wrap items-center justify-between gap-3">
        <h1 className="text-[34px] font-semibold leading-[1.2] text-[#2C3340]">Create New Product</h1>
        <div className="flex items-center gap-2">
          <Button
            type="button"
            onClick={() => setOpenCategoryModal(true)}
            className="h-10 rounded-md bg-[#F28B20] px-6 text-sm font-semibold text-white hover:bg-[#de7e1d]"
          >
            Create Category
          </Button>
          <Button type="button" className="h-10 rounded-md bg-[#074473] px-6 text-sm font-semibold text-white hover:bg-[#063861]">
            Save &amp; Publish
          </Button>
        </div>
      </div>

      <div className="grid gap-4 xl:grid-cols-[1fr_300px]">
        <section className="rounded-xl bg-white p-4 shadow-[0_1px_2px_rgba(16,24,40,0.04)]">
          <div className="grid gap-4 lg:grid-cols-2">
            <div className="space-y-3">
              <Input placeholder="Enter Product Name" className="h-11 border-0 bg-[#F7F9FC] text-sm placeholder:text-[#9CA3AF]" />
              <button type="button" className="flex h-11 w-full items-center justify-between rounded-md bg-[#F7F9FC] px-3 text-sm text-[#9CA3AF]">
                Select Product Category
                <ChevronDown className="size-4" aria-hidden />
              </button>
              <button type="button" className="flex h-11 w-full items-center justify-between rounded-md bg-[#F7F9FC] px-3 text-sm text-[#9CA3AF]">
                Select Currency
                <ChevronDown className="size-4" aria-hidden />
              </button>
              <div className="grid grid-cols-2 gap-3">
                <Input placeholder="Selling Price" className="h-11 border-0 bg-[#F7F9FC] text-sm placeholder:text-[#9CA3AF]" />
                <Input placeholder="Cost Price" className="h-11 border-0 bg-[#F7F9FC] text-sm placeholder:text-[#9CA3AF]" />
              </div>
              <Input placeholder="Qunity In Stock" className="h-11 border-0 bg-[#F7F9FC] text-sm placeholder:text-[#9CA3AF]" />
              <div className="flex h-11 items-center rounded-md bg-[#F7F9FC]">
                <Input placeholder="Length" className="h-11 border-0 bg-transparent text-sm placeholder:text-[#9CA3AF] focus-visible:ring-0" />
                <TinyStepper />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="flex h-11 items-center rounded-md bg-[#F7F9FC]">
                  <Input placeholder="Width" className="h-11 border-0 bg-transparent text-sm placeholder:text-[#9CA3AF] focus-visible:ring-0" />
                  <TinyStepper />
                </div>
                <div className="flex h-11 items-center rounded-md bg-[#F7F9FC]">
                  <Input placeholder="Height" className="h-11 border-0 bg-transparent text-sm placeholder:text-[#9CA3AF] focus-visible:ring-0" />
                  <TinyStepper />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="flex h-11 items-center rounded-md bg-[#F7F9FC]">
                  <Input placeholder="Weight" className="h-11 border-0 bg-transparent text-sm placeholder:text-[#9CA3AF] focus-visible:ring-0" />
                  <TinyStepper />
                </div>
                <button type="button" className="flex h-11 items-center justify-between rounded-md bg-[#F7F9FC] px-3 text-sm text-[#9CA3AF]">
                  Unit
                  <ChevronDown className="size-4" aria-hidden />
                </button>
              </div>
              <button type="button" className="flex h-11 w-full items-center justify-between rounded-md bg-[#F7F9FC] px-3 text-sm text-[#9CA3AF]">
                Order Type
                <ChevronDown className="size-4" aria-hidden />
              </button>
              <div className="flex h-11 items-center rounded-md bg-[#F7F9FC]">
                <Input placeholder="Stock Alert" className="h-11 border-0 bg-transparent text-sm placeholder:text-[#9CA3AF] focus-visible:ring-0" />
                <TinyStepper />
              </div>
              <div className="flex items-center justify-between text-[28px] text-[#8B95A5]">
                <span>Discount</span>
                <div className="flex items-center gap-3">
                  <span>Add Discount</span>
                  <FakeSwitch />
                </div>
              </div>
              <div className="flex items-center justify-between text-[28px] text-[#8B95A5]">
                <span>Expiry Date</span>
                <div className="flex items-center gap-3">
                  <span>Add Expiry Date</span>
                  <FakeSwitch />
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <Input placeholder="Code Product" className="h-11 border-0 bg-[#F7F9FC] text-sm placeholder:text-[#9CA3AF]" />
              <div className="space-y-1">
                <p className="text-[26px] font-semibold text-[#2F3747]">Product Long Description</p>
                <div className="rounded-md border border-[#E8ECF4]">
                  <div className="flex items-center gap-2 border-b border-[#E8ECF4] px-2 py-1.5 text-[#768295]">
                    <button type="button" className="rounded border border-[#E4E9F2] bg-[#F7F9FC] px-2 py-0.5 text-xs">Roboto</button>
                    <button type="button" className="rounded border border-[#E4E9F2] bg-[#F7F9FC] px-2 py-0.5 text-xs">Paragrh</button>
                    <Bold className="size-3.5" />
                    <Underline className="size-3.5" />
                    <Italic className="size-3.5" />
                    <AlignLeft className="size-3.5" />
                    <AlignCenter className="size-3.5" />
                    <AlignRight className="size-3.5" />
                    <Link2 className="size-3.5" />
                  </div>
                  <div className="h-[130px] px-3 py-2 text-sm text-[#9CA3AF]">Your Text Goes Here</div>
                </div>
                <p className="text-[18px] text-[#8B95A5]">add a log description for your product</p>
              </div>
              <div className="flex items-center justify-between text-[28px] text-[#8B95A5]">
                <span>Return Policy</span>
                <div className="flex items-center gap-3">
                  <span>Add Discount</span>
                  <FakeSwitch />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="flex h-11 items-center rounded-md bg-[#F7F9FC] px-3 text-sm text-[#8B95A5]">
                  12/12/2020
                  <CalendarDays className="ml-auto size-4" aria-hidden />
                </div>
                <div className="flex h-11 items-center rounded-md bg-[#F7F9FC] px-3 text-sm text-[#8B95A5]">
                  12:00 PM
                  <Clock3 className="ml-auto size-4" aria-hidden />
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="rounded-xl bg-white p-4 shadow-[0_1px_2px_rgba(16,24,40,0.04)]">
          <div className="rounded-xl border border-[#E8ECF4] bg-[#F7F9FC] p-4 text-center">
            <div className="mx-auto mb-2 grid size-8 place-items-center rounded-full bg-white text-[#074473]">
              <ImageUp className="size-4" aria-hidden />
            </div>
            <p className="text-[24px] font-semibold text-[#074473]">Upload Image</p>
            <p className="mt-1 text-[15px] text-[#8B95A5]">upload 4 image image for your product.</p>
            <p className="text-[14px] text-[#8B95A5]">File Format jpeg, png Recommeded Size 600x600 (1:1)</p>
          </div>

          <div className="mt-4">
            <p className="mb-2 text-[28px] text-[#2F3747]">Additional Images</p>
            <div className="grid grid-cols-2 gap-3">
              {[1, 2].map((item) => (
                <button
                  type="button"
                  key={item}
                  className="flex h-[120px] flex-col items-center justify-center rounded-xl border border-[#E8ECF4] bg-[#F7F9FC] text-[#074473]"
                >
                  <ImageIcon className="size-8 text-[#B8C1D1]" />
                  <span className="mt-1 text-sm font-semibold">Upload Image</span>
                </button>
              ))}
              <div className="h-[120px] rounded-xl border border-dashed border-[#C8D1E3] bg-white" />
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}