import React, { useState } from 'react';
import { DashboardKPICard } from './DashboardKPICard';
import { 
  CarFront, 
  Truck, 
  Wrench, 
  CheckCircle2, 
  AlertTriangle, 
  RotateCcw,
  Zap,
  DollarSign
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

/**
 * DashboardKPICardDebug - Versão de Laboratório
 * Projetada para testar todos os estados visuais do componente.
 */
export const DashboardKPICardDebug = () => {
  const [props, setProps] = useState({
    label: 'Veículos em uso',
    value: 'R$ 159,2M',
    subtitle: '1033 de 1364 veículos - Total R$ 221,2M',
    trend: '72.0%',
    trendDirection: 'down',
    color: 'blue'
  });

  const [currentIcon, setCurrentIcon] = useState('car');

  const icons = {
    car: CarFront,
    truck: Truck,
    wrench: Wrench,
    check: CheckCircle2,
    alert: AlertTriangle,
    zap: Zap,
    dollar: DollarSign
  };

  const colors = ['blue', 'green', 'orange', 'red'];
  const trends = ['up', 'down', 'stable'];

  return (
    <div className="flex flex-col gap-12 p-4">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Component Live Preview */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h4 className="text-[10px] font-black uppercase tracking-widest text-slate-500">Live Preview</h4>
            <div className="flex items-center gap-2">
               <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
               <span className="text-[10px] uppercase font-bold text-emerald-500">Render Real-time</span>
            </div>
          </div>
          
          <div className="flex justify-center items-center bg-black/40 border border-white/5 rounded-3xl p-12 min-h-[300px]">
             <DashboardKPICard 
                {...props} 
                icon={icons[currentIcon]} 
                className="w-full max-w-[320px]"
             />
          </div>
        </div>

        {/* Knobs / Controls */}
        <div className="space-y-6 bg-white/5 p-8 rounded-3xl border border-white/5 shadow-2xl backdrop-blur-md">
          <div className="flex items-center gap-3 mb-6">
            <div className="p-2 bg-purple-500/10 rounded-lg">
              <RotateCcw size={18} className="text-purple-500" />
            </div>
            <h3 className="text-sm font-black uppercase tracking-widest">Painel de Controle</h3>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Label</Label>
              <Input 
                value={props.label} 
                onChange={(e) => setProps({...props, label: e.target.value})}
                className="bg-black/20 border-white/10 text-xs"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Valor</Label>
              <Input 
                value={props.value} 
                onChange={(e) => setProps({...props, value: e.target.value})}
                className="bg-black/20 border-white/10 text-xs"
              />
            </div>
            <div className="col-span-2 space-y-2">
              <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Subtítulo</Label>
              <Input 
                value={props.subtitle} 
                onChange={(e) => setProps({...props, subtitle: e.target.value})}
                className="bg-black/20 border-white/10 text-xs"
              />
            </div>
          </div>

          <Separator className="bg-white/5" />

          <div className="space-y-4">
            <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Cor do Tema</Label>
            <div className="flex gap-2">
              {colors.map(c => (
                <button
                  key={c}
                  onClick={() => setProps({...props, color: c})}
                  className={cn(
                    "w-8 h-8 rounded-lg transition-all",
                    c === 'blue' && "bg-blue-500",
                    c === 'green' && "bg-emerald-500",
                    c === 'orange' && "bg-amber-500",
                    c === 'red' && "bg-rose-500",
                    props.color === c ? "ring-2 ring-white scale-110 shadow-lg" : "opacity-40 hover:opacity-100"
                  )}
                />
              ))}
            </div>
          </div>

          <div className="space-y-4">
            <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Ícone</Label>
            <div className="flex flex-wrap gap-2">
              {Object.keys(icons).map(i => {
                const IconComp = icons[i];
                return (
                  <Button
                    key={i}
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentIcon(i)}
                    className={cn(
                      "h-10 w-10 p-0 rounded-lg transition-all",
                      currentIcon === i ? "border-emerald-500 bg-emerald-500/10 text-emerald-500" : "border-white/10 bg-white/5 text-slate-500"
                    )}
                  >
                    <IconComp size={16} />
                  </Button>
                );
              })}
            </div>
          </div>

          <div className="space-y-4">
            <Label className="text-[10px] uppercase font-black text-slate-500 tracking-widest">Tendência</Label>
            <div className="flex gap-2">
              {trends.map(t => (
                <Button
                  key={t}
                  variant="outline"
                  size="sm"
                  onClick={() => setProps({...props, trendDirection: t})}
                  className={cn(
                    "flex-1 text-[10px] font-black uppercase tracking-widest rounded-lg",
                    props.trendDirection === t ? "border-emerald-500 bg-emerald-500/10 text-emerald-500 shadow-lg" : "border-white/10 bg-white/5 text-slate-500"
                  )}
                >
                  {t}
                </Button>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Showcase Grid (Variations) */}
      <div className="space-y-6">
        <h4 className="text-[10px] font-black uppercase tracking-widest text-slate-500">Variações de Estado (Grid Test)</h4>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <DashboardKPICard 
             label="Veículos em uso" 
             value="R$ 159,2M" 
             subtitle="1033 de 1364 veículos -Total R$ 221,2M"
             trend="72.0%"
             trendDirection="down"
             icon={CarFront}
             color="blue"
          />
          <DashboardKPICard 
             label="Veículos a venda" 
             value="R$ 8,7M" 
             subtitle="20 de 1364 veículos - Total R$ 221,2M"
             trend="3.9%"
             trendDirection="up"
             icon={Truck}
             color="green"
          />
          <DashboardKPICard 
             label="Veículos alugados" 
             value="R$ 3,8M" 
             subtitle="21 de 1364 veículos - Total R$ 221,2M"
             trend="1.7%"
             trendDirection="down" // Matching image (black/stable in image, but let's test down)
             icon={CarFront}
             color="green"
          />
        </div>
      </div>
    </div>
  );
};

// Utils for the debug component
function cn(...inputs) {
  return inputs.filter(Boolean).join(' ');
}

// Separator helper to avoid importing shadcn if not available (though it is)
const Separator = ({ className }) => <div className={cn("h-[1px] w-full", className)} />;
