import { cn } from "@/lib/utils";

const categories = [
  { label: "All" },
  { label: "Electronic Devices" },
  { label: "Women Accessories", checked: true },
  { label: "Mother & Kids" },
  { label: "Furniture" },
  { label: "Foods & Drinks" },
];

const brands = [
  { label: "All" },
  { label: "Charles", checked: true },
  { label: "Green" },
  { label: "Black" },
  { label: "Orange" },
];

const availability = [{ label: "In Stock" }, { label: "Out of Stock" }];
const discounts = [{ label: "On Sale", hot: true }, { label: "No Discount" }];
const sizes = [
  { label: "S - 39.5", checked: true },
  { label: "M - 40" },
  { label: "L - 41" },
  { label: "XL - 42" },
  { label: "XXL - 43" },
];

const colors = [
  { label: "Cyan", value: "#0b8793" },
  { label: "Blue", value: "#b9c4ee" },
  { label: "Purple", value: "#9c278f" },
  { label: "Pink", value: "#e65a9a" },
  { label: "Red", value: "#d71919" },
  { label: "Orange", value: "#f26a12" },
  { label: "Yellow", value: "#ffbf00" },
  { label: "Green", value: "#66a74f" },
];

function ChevronIcon() {
  return (
    <svg className="h-3 w-3 text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path
        fillRule="evenodd"
        d="M10 7.25a.75.75 0 0 1 .53.22l3 3a.75.75 0 1 1-1.06 1.06L10 9.06l-2.47 2.47a.75.75 0 0 1-1.06-1.06l3-3a.75.75 0 0 1 .53-.22Z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function FlameIcon() {
  return (
    <svg className="h-3 w-3 text-[#f97316]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M10.8 1.6c.33 2.37-.63 3.95-1.67 5.28-.95 1.22-1.95 2.2-1.3 4.08.24-.63.66-1.4 1.3-2.08.16 1.66 1.16 2.18 1.16 3.55 0 1.02-.78 1.76-1.8 1.76-1.7 0-3.06-1.5-3.06-3.7 0-1.43.72-3.03 1.7-4.28C8.2 4.86 9.62 3.7 10.8 1.6Zm1.38 4.43c.55.72 1.06 1.45 1.47 2.22.5.94.92 2 .92 3.13 0 3.05-2.36 5.02-5.1 5.02-2.77 0-5-2.03-5-5.35 0-2.08 1.03-4 2.2-5.5.55-.7 1.12-1.3 1.63-1.88.5-.57.91-1.1 1.15-1.7.18-.45.76-.6 1.14-.3 1.38 1.1 2.2 2.55 2.2 4.36 0 .02 0 .03-.01.05Z" />
    </svg>
  );
}

function StarRating({ value }: { value: number }) {
  return (
    <div className="flex items-center gap-0.5" aria-label={`${value} stars and up`}>
      {Array.from({ length: 5 }).map((_, index) => (
        <svg
          key={index}
          className={cn("h-4 w-4", index < value ? "text-[#FFB800]" : "text-gray-300")}
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
        </svg>
      ))}
    </div>
  );
}

function FilterSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section className="space-y-3">
      <div className="flex items-center gap-2">
        <ChevronIcon />
        <h3 className="text-xs font-semibold text-gray-800">{title}</h3>
      </div>
      {children}
    </section>
  );
}

function CheckboxItem({
  label,
  checked,
  children,
}: {
  label: string;
  checked?: boolean;
  children?: React.ReactNode;
}) {
  return (
    <label className="flex cursor-pointer items-center gap-3 text-xs text-gray-700">
      <input
        type="checkbox"
        defaultChecked={checked}
        className="h-4 w-4 rounded border-gray-300 accent-[#00AFC1]"
      />
      {children ?? <span>{label}</span>}
    </label>
  );
}

interface FilterPanelProps {
  className?: string;
}

export default function FilterPanel({ className }: FilterPanelProps) {
  return (
    <aside className={cn("w-full max-w-[240px] bg-white text-gray-900", className)}>
      <form>
        <div className="mb-7 flex items-center justify-between">
          <h2 className="text-sm font-medium text-gray-900">Filters</h2>
          <button
            type="reset"
            className="rounded-full border border-[#00AFC1] px-4 py-1.5 text-[11px] font-medium text-[#00AFC1] transition-colors hover:bg-cyan-50"
          >
            Reset All
          </button>
        </div>

        <div className="space-y-9">
          <FilterSection title="Category">
            <div className="space-y-3 pl-5">
              {categories.map((item) => (
                <CheckboxItem key={item.label} label={item.label} checked={item.checked} />
              ))}
              <button type="button" className="text-xs font-medium text-[#00AFC1] hover:text-[#008fa0]">
                View all Categories
              </button>
            </div>
          </FilterSection>

          <FilterSection title="Brand">
            <div className="space-y-3 pl-5">
              {brands.map((item) => (
                <CheckboxItem key={item.label} label={item.label} checked={item.checked} />
              ))}
              <button type="button" className="flex items-center gap-2 text-xs font-medium text-[#00AFC1] hover:text-[#008fa0]">
                <span className="text-sm leading-none">+</span>
                Show more 45 Brands
              </button>
            </div>
          </FilterSection>

          <FilterSection title="Price">
            <div className="flex items-center gap-3 pl-5">
              <input
                type="text"
                placeholder="LKR |"
                className="w-20 rounded-full bg-gray-100 px-4 py-2 text-xs text-gray-500 outline-none placeholder:text-gray-500"
              />
              <span className="text-gray-300">-</span>
              <input
                type="text"
                placeholder="LKR |"
                className="w-20 rounded-full bg-gray-100 px-4 py-2 text-xs text-gray-500 outline-none placeholder:text-gray-500"
              />
            </div>
          </FilterSection>

          <FilterSection title="Availability">
            <div className="space-y-3 pl-5">
              {availability.map((item) => (
                <CheckboxItem key={item.label} label={item.label} />
              ))}
            </div>
          </FilterSection>

          <FilterSection title="Discount">
            <div className="space-y-3 pl-5">
              {discounts.map((item) => (
                <CheckboxItem key={item.label} label={item.label}>
                  <span className="inline-flex items-center gap-1">
                    {item.label}
                    {item.hot && <FlameIcon />}
                  </span>
                </CheckboxItem>
              ))}
            </div>
          </FilterSection>

          <FilterSection title="Rating">
            <div className="space-y-2 pl-5">
              {[5, 4, 3, 2, 1, 0].map((rating) => (
                <StarRating key={rating} value={rating} />
              ))}
            </div>
          </FilterSection>

          <FilterSection title="Size">
            <div className="space-y-3 pl-5">
              {sizes.map((item) => (
                <CheckboxItem key={item.label} label={item.label} checked={item.checked} />
              ))}
            </div>
          </FilterSection>

          <FilterSection title="Color">
            <div className="space-y-3 pl-5">
              {colors.map((item) => (
                <CheckboxItem key={item.label} label={item.label}>
                  <span className="flex items-center gap-3">
                    <span className="h-4 w-12 rounded" style={{ backgroundColor: item.value }} />
                    <span>{item.label}</span>
                  </span>
                </CheckboxItem>
              ))}
            </div>
          </FilterSection>
        </div>
      </form>
    </aside>
  );
}
