import React, { useState } from 'react';
import { Sidebar } from './Sidebar';
import { Card } from '@/components/ui/card';
import { Label } from '@/components/ui/label';

const Switch = ({ checked, onCheckedChange, id }) => (
  <button
    id={id}
    onClick={() => onCheckedChange(!checked)}
    className={`
      relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 
      transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50
      ${checked ? 'bg-emerald-500' : 'bg-zinc-700'}
    `}
  >
    <span
      className={`
        pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 
        transition-transform duration-200 ease-in-out
        ${checked ? 'translate-x-4' : 'translate-x-0'}
      `}
    />
  </button>
);

export const SidebarDebug = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [theme, setTheme] = useState('dark');

  return (
    <div className={`p-8 min-h-screen ${theme === 'dark' ? 'bg-zinc-950 text-white' : 'bg-slate-50 text-slate-900'}`}>
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-8">
        {/* Controls */}
        <div className="lg:col-span-1 space-y-6">
          <Card className="p-6 bg-zinc-900 border-zinc-800">
            <h3 className="text-lg font-bold mb-4 text-white">Controles de Debug</h3>
            
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <Label htmlFor="collapse-toggle" className="text-zinc-400">Recolhido</Label>
                <Switch 
                  id="collapse-toggle" 
                  checked={isCollapsed} 
                  onCheckedChange={setIsCollapsed} 
                />
              </div>

              <div className="flex items-center justify-between">
                <Label htmlFor="theme-toggle" className="text-zinc-400">Tema Escuro</Label>
                <Switch 
                  id="theme-toggle" 
                  checked={theme === 'dark'} 
                  onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')} 
                />
              </div>
            </div>
          </Card>

          <Card className="p-6 bg-zinc-900 border-zinc-800">
            <h4 className="text-sm font-bold uppercase tracking-widest text-zinc-500 mb-4">Notas de Implementação</h4>
            <ul className="text-xs text-zinc-400 space-y-2 list-disc pl-4">
              <li>Reprodução fiel do layout Angular</li>
              <li>Estrutura de árvore com linhas conectoras</li>
              <li>Sistema de busca em tempo real</li>
              <li>Suporte a estados desabilitados/bloqueados</li>
              <li>Acentos cromáticos em Ouro (#f1c232)</li>
            </ul>
          </Card>
        </div>

        {/* Preview Area */}
        <div className="lg:col-span-3 relative bg-zinc-900/50 rounded-2xl border border-zinc-800 min-h-[800px] overflow-hidden">
          <div className="absolute top-4 left-4 z-10 text-[10px] font-mono text-zinc-500 bg-zinc-950/50 px-2 py-1 rounded">
            VIEWPORT: SIDEBAR_CONTAINER
          </div>
          
          <div className="flex justify-center items-start pt-12 h-full">
             <div className="w-full max-w-[260px] h-[700px] relative">
                <Sidebar isCollapsed={isCollapsed} />
             </div>
          </div>
        </div>
      </div>
    </div>
  );
};
