"use client";
import { useState } from "react";
import type React from "react";

import FilterContent from "./filter-content";

interface FilterSidebarProps {
  selectedFilters?: string[];
  setSelectedFilters?: (filters: string[]) => void;
}

export default function Page({
  selectedFilters: externalSelectedFilters = [],
  setSelectedFilters: externalSetSelectedFilters,
}: FilterSidebarProps) {
  const [selectedSize, setSelectedSize] = useState("businesscard_square");
  const [selectedPaper, setSelectedPaper] = useState("cotton");
  const [cornerType, setCornerType] = useState("square");
  const [expandedSections, setExpandedSections] = useState<string[]>([]);
  const [filters, setFilters] = useState({
    addImage: false,
    orientation: [],
  });
  const [isOpen, setIsOpen] = useState(false);
  const [selectedFilters, setSelectedFilters] = useState(
    externalSelectedFilters
  );

  const toggleSection = (section: string) => {
    setExpandedSections((prev) =>
      prev.includes(section)
        ? prev.filter((s) => s !== section)
        : [...prev, section]
    );
  };

  const toggleFilter = (filter: string) => {
    const newFilters = selectedFilters.includes(filter)
      ? selectedFilters.filter((f) => f !== filter)
      : [...selectedFilters, filter];
    setSelectedFilters(newFilters);
    externalSetSelectedFilters?.(newFilters);
  };

  const handleApply = () => {
    setIsOpen(false);
  };

  const handleCancel = () => {
    setIsOpen(false);
  };

  const handleFilterChange = (key: string, value: boolean) => {
    setFilters((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  return (
    <>
      {/* Desktop Sidebar - all sections expanded, no chevrons */}
      <aside className="hidden md:block md:w-1/3 lg:w-1/4 lg:max-w-xs shrink-0">
        <div className="top-6 space-y-6 p-1 bg-card rounded-lg">
          <FilterContent
            selectedSize={selectedSize}
            onSizeChange={setSelectedSize}
            selectedPaper={selectedPaper}
            onPaperChange={setSelectedPaper}
            cornerType={cornerType}
            onCornerChange={setCornerType}
            filters={filters}
            onFilterChange={handleFilterChange}
            selectedFilters={selectedFilters}
            onToggleFilter={toggleFilter}
          />
        </div>
      </aside>

      <div
        className="md:hidden flex justify-center mb-4 w-[60%] relative"
        style={{ margin: "8px 20% 16px" }}
      >
        <button
          onClick={() => setIsOpen(true)}
          className="flex items-center justify-center gap-2 border border-gray-400 text-gray-800 w-full py-2.5 rounded-md hover:bg-gray-100 transition-colors"
        >
          {/* Filter SVG Icon */}
          <svg
            viewBox="0 0 48 48"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
            className="w-5 h-5"
          >
            <path d="M13.989 31.011a4 4 0 0 0-3.861 3H4v2h6.128a3.985 3.985 0 0 0 7.723 0H44v-2H17.851a4 4 0 0 0-3.862-3zm0 6A2 2 0 0 1 12 35.155v-.289a1.994 1.994 0 0 1 3.979 0v.289a2 2 0 0 1-1.99 1.856zM44 11.989H17.848a3.98 3.98 0 0 0-7.717 0H4v2h6.131a3.98 3.98 0 0 0 7.717 0H44zm-30.011 3A2 2 0 0 1 12 13.1v-.213a1.992 1.992 0 0 1 3.979 0v.213a2 2 0 0 1-1.99 1.893zM44 23.019h-6.131a3.981 3.981 0 0 0-7.716 0H4v2h26.153a3.981 3.981 0 0 0 7.716 0H44zm-9.989 3a2 2 0 0 1-1.99-1.894v-.213a1.992 1.992 0 0 1 3.979 0v.213a2 2 0 0 1-1.989 1.894z"></path>
          </svg>

          <span className="font-medium">Filter options</span>
        </button>
      </div>

      {/* Mobile Filter Drawer - full screen with collapsible sections */}
      <div
        className={`fixed inset-0 z-50 md:hidden transition-all duration-300 ${
          isOpen
            ? "opacity-100 pointer-events-auto"
            : "opacity-0 pointer-events-none"
        }`}
      >
        <div
          className="absolute inset-0 bg-black/50"
          onClick={() => setIsOpen(false)}
        />

        <div className="absolute inset-0 bg-background flex flex-col">
          {/* Header */}
          <div className="border-b border-border px-6 py-4 flex items-center justify-between shrink-0">
            <h2 className="text-center flex-1 text-lg font-semibold text-foreground">
              Filter options
            </h2>
            <button
              onClick={() => setIsOpen(false)}
              className="text-muted-foreground hover:text-foreground"
            >
              ✕
            </button>
          </div>

          {/* Scrollable Content */}
          <div className="flex-1 overflow-y-auto">
            <FilterContent
              isMobile
              expandedSections={expandedSections}
              onToggleSection={toggleSection}
              selectedSize={selectedSize}
              onSizeChange={setSelectedSize}
              selectedPaper={selectedPaper}
              onPaperChange={setSelectedPaper}
              cornerType={cornerType}
              onCornerChange={setCornerType}
              filters={filters}
              onFilterChange={handleFilterChange}
              selectedFilters={selectedFilters}
              onToggleFilter={toggleFilter}
            />
          </div>

          {/* Footer Buttons */}
          <div className="border-t border-border px-6 py-4 space-y-3 bg-card shrink-0">
            <div className="grid grid-cols-2 gap-4">
              <button
                onClick={handleCancel}
                className="px-6 py-3 bg-gray-100 text-foreground rounded-lg font-medium hover:bg-gray-200 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleApply}
                className="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary transition-colors"
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}