'use client';

/**
 * Lab Sidebar - Filter Panel
 *
 * Narrow left sidebar for filtering lab content.
 * Clean, work-focused design with Lucide icons and slate palette.
 * Uses Shadcn UI Collapsible for expandable sections.
 *
 * Features:
 * - Multiple filter groups (Status, Date Range, Source Type)
 * - Collapsible sections with Shadcn UI and Lucide icons
 * - Checkbox/radio button controls (Shadcn components)
 * - Slate color palette (blue-tinted gray)
 */

import { useState, type ElementType } from 'react';
import { Activity, Calendar, Palette, ChevronRight, RotateCcw, Layers, Sliders, Tag, Folder, Star, Clock } from 'lucide-react';
import { FilterPlaceholder } from '@/components/lab/FilterPlaceholder';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';

type FilterGroupProps = {
  id: string;
  label: string;
  icon: ElementType;
  options: Array<{ id: string; label: string; count?: number }>;
  multiSelect?: boolean;
};

const filterGroups: FilterGroupProps[] = [
  {
    id: 'status',
    label: 'Status',
    icon: Activity,
    options: [
      { id: 'all', label: 'All', count: 127 },
      { id: 'completed', label: 'Completed', count: 98 },
      { id: 'pending', label: 'Pending', count: 23 },
      { id: 'failed', label: 'Failed', count: 6 },
    ],
    multiSelect: false,
  },
  {
    id: 'date',
    label: 'Date Range',
    icon: Calendar,
    options: [
      { id: 'today', label: 'Today', count: 12 },
      { id: 'week', label: 'Last 7 days', count: 45 },
      { id: 'month', label: 'Last 30 days', count: 89 },
      { id: 'all-time', label: 'All time', count: 127 },
    ],
    multiSelect: false,
  },
  {
    id: 'source',
    label: 'Source Type',
    icon: Palette,
    options: [
      { id: 'text', label: 'Text-to-Image', count: 78 },
      { id: 'upload', label: 'Uploads', count: 34 },
      { id: 'reference', label: 'Reference Images', count: 15 },
    ],
    multiSelect: true,
  },
  {
    id: 'model',
    label: 'Model',
    icon: Layers,
    options: [
      { id: 'gemini-2', label: 'Gemini 2.0', count: 45 },
      { id: 'gemini-1.5', label: 'Gemini 1.5', count: 62 },
      { id: 'imagen-3', label: 'Imagen 3', count: 20 },
    ],
    multiSelect: false,
  },
  {
    id: 'quality',
    label: 'Quality',
    icon: Sliders,
    options: [
      { id: 'high', label: 'High (1024px)', count: 34 },
      { id: 'medium', label: 'Medium (768px)', count: 56 },
      { id: 'low', label: 'Low (512px)', count: 37 },
    ],
    multiSelect: false,
  },
  {
    id: 'tags',
    label: 'Tags',
    icon: Tag,
    options: [
      { id: 'portrait', label: 'Portrait', count: 23 },
      { id: 'landscape', label: 'Landscape', count: 31 },
      { id: 'product', label: 'Product', count: 18 },
      { id: 'abstract', label: 'Abstract', count: 12 },
      { id: 'architecture', label: 'Architecture', count: 9 },
    ],
    multiSelect: true,
  },
  {
    id: 'folder',
    label: 'Folder',
    icon: Folder,
    options: [
      { id: 'default', label: 'Default', count: 89 },
      { id: 'favorites', label: 'Favorites', count: 15 },
      { id: 'archive', label: 'Archive', count: 23 },
    ],
    multiSelect: false,
  },
  {
    id: 'rating',
    label: 'Rating',
    icon: Star,
    options: [
      { id: '5star', label: '5 Stars', count: 12 },
      { id: '4star', label: '4 Stars', count: 28 },
      { id: '3star', label: '3 Stars', count: 45 },
      { id: 'unrated', label: 'Unrated', count: 42 },
    ],
    multiSelect: true,
  },
  {
    id: 'duration',
    label: 'Generation Time',
    icon: Clock,
    options: [
      { id: 'fast', label: '< 5 seconds', count: 67 },
      { id: 'medium', label: '5-15 seconds', count: 43 },
      { id: 'slow', label: '> 15 seconds', count: 17 },
    ],
    multiSelect: false,
  },
];

export const LabSidebar = () => {
  const [expandedSections, setExpandedSections] = useState<string[]>(['status', 'date', 'source']);

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

  const isExpanded = (id: string) => expandedSections.includes(id);

  return (
    <aside className="h-full bg-slate-950 border-r border-slate-800" aria-label="Lab filters">
      {/* Header */}
      <div className="p-4 border-b border-slate-800">
        <h2 className="text-sm font-semibold text-white">Filters</h2>
        <p className="text-xs text-slate-500 mt-0.5">Refine your results</p>
      </div>

      {/* Filter Groups */}
      <div className="p-3 space-y-3">
        {filterGroups.map((group) => {
          const expanded = isExpanded(group.id);
          const Icon = group.icon;

          return (
            <Collapsible
              key={group.id}
              open={expanded}
              onOpenChange={() => toggleSection(group.id)}
              className="border-b border-slate-800 pb-3 last:border-b-0"
            >
              {/* Section Header */}
              <CollapsibleTrigger asChild>
                <button
                  className="w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-sm transition-colors text-slate-400 hover:text-white hover:bg-slate-800/50"
                >
                  <span className="flex items-center gap-2">
                    <Icon className="w-4 h-4" />
                    <span className="font-medium">{group.label}</span>
                  </span>
                  <ChevronRight
                    className={`w-4 h-4 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
                  />
                </button>
              </CollapsibleTrigger>

              {/* Filter Options */}
              <CollapsibleContent>
                <FilterPlaceholder
                  options={group.options}
                  multiSelect={group.multiSelect}
                  groupId={group.id}
                />
              </CollapsibleContent>
            </Collapsible>
          );
        })}
      </div>

      {/* Bottom Actions */}
      <div className="mt-auto p-3 border-t border-slate-800">
        <Button
          variant="ghost"
          className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-sm text-slate-500 hover:text-slate-300 hover:bg-slate-800/50"
          aria-label="Reset all filters"
        >
          <RotateCcw className="w-3.5 h-3.5" />
          Reset Filters
        </Button>
      </div>
    </aside>
  );
};
