'use client';

import { useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { LayersPanel } from '@/components/layers/layers-panel';
import { ColorPanel } from '@/components/colors';
import { FilterPanel } from '@/components/filters';
import { SelectionPanel } from '@/components/selection';
import { TransformPanel } from '@/components/transform';
import { ShapePanel } from '@/components/shapes';
import { HistoryPanel } from './history-panel';

interface CollapsibleSectionProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
}

function CollapsibleSection({ title, children, defaultOpen = true }: CollapsibleSectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className="border-b border-border">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between p-3 hover:bg-accent/50 transition-colors"
      >
        <h3 className="text-sm font-semibold text-card-foreground">{title}</h3>
        {isOpen ? (
          <ChevronDown className="h-4 w-4 text-muted-foreground" />
        ) : (
          <ChevronRight className="h-4 w-4 text-muted-foreground" />
        )}
      </button>
      {isOpen && <div className="pb-2">{children}</div>}
    </div>
  );
}

export function PanelDock() {
  const [activeTab, setActiveTab] = useState<'adjustments' | 'tools' | 'history'>('adjustments');

  return (
    <div className="w-[280px] border-l border-border bg-card flex flex-col overflow-hidden">
      {/* Always visible panels */}
      <div className="border-b border-border" style={{ height: '400px' }}>
        <LayersPanel />
      </div>

      <div className="border-b border-border" style={{ height: '200px' }}>
        <ColorPanel />
      </div>

      {/* Tabbed section */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* Tab buttons */}
        <div className="flex border-b border-border">
          <button
            onClick={() => setActiveTab('adjustments')}
            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'adjustments'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            Adjustments
          </button>
          <button
            onClick={() => setActiveTab('tools')}
            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'tools'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            Tools
          </button>
          <button
            onClick={() => setActiveTab('history')}
            className={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'history'
                ? 'bg-background text-foreground border-b-2 border-primary'
                : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
            }`}
          >
            History
          </button>
        </div>

        {/* Tab content */}
        <div className="flex-1 overflow-y-auto">
          {activeTab === 'adjustments' && (
            <div>
              <CollapsibleSection title="Filters">
                <FilterPanel />
              </CollapsibleSection>
              <CollapsibleSection title="Selection">
                <SelectionPanel />
              </CollapsibleSection>
              <CollapsibleSection title="Transform">
                <TransformPanel />
              </CollapsibleSection>
            </div>
          )}

          {activeTab === 'tools' && (
            <div>
              <CollapsibleSection title="Shape Settings">
                <ShapePanel />
              </CollapsibleSection>
            </div>
          )}

          {activeTab === 'history' && (
            <div className="h-full">
              <HistoryPanel />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}