import React, { useState } from 'react';
import { StatusBadge } from './StatusBadge';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Rocket, FlaskConical } from 'lucide-react';

/**
 * DEBUG VERSION
 * This version contains additional controls and visualizations for development purposes.
 * It strictly wraps or modifies the Production version to test it.
 */
const StatusBadgeDebug = (props) => {
  const [currentStatus, setCurrentStatus] = useState(props.status || 'active');
  const [useMockLabel, setUseMockLabel] = useState(false);

  const statuses = ['active', 'inactive', 'warning', 'error'];

  return (
    <div className="flex gap-4 p-4 border border-dashed border-purple-500/30 rounded-xl bg-purple-500/5">
      
      {/* Container Esquerdo - Controles de Debug */}
      <Card className="p-4 w-64 space-y-4 bg-purple-950/10 border-purple-500/20">
        <div className="flex items-center gap-2 text-purple-400 mb-2">
            <FlaskConical size={16} />
            <span className="text-xs font-bold uppercase tracking-widest">Debug Controls</span>
        </div>
        
        <div className="space-y-2">
            <label className="text-[10px] uppercase text-purple-300 font-bold">Status State</label>
            <div className="grid grid-cols-2 gap-2">
                {statuses.map(s => (
                    <button 
                        key={s}
                        onClick={() => setCurrentStatus(s)}
                        className={`text-[10px] px-2 py-1 rounded border transition-all uppercase font-semibold ${currentStatus === s ? 'bg-purple-500 text-white border-purple-500' : 'text-purple-400 border-purple-500/30 hover:bg-purple-500/20'}`}
                    >
                        {s}
                    </button>
                ))}
            </div>
        </div>

        <div className="space-y-2">
            <label className="text-[10px] uppercase text-purple-300 font-bold">Mods</label>
            <Button 
                size="sm" 
                variant="outline" 
                className="w-full text-xs h-8 border-purple-500/30 text-purple-300 hover:text-purple-100 hover:bg-purple-500/20"
                onClick={() => setUseMockLabel(!useMockLabel)}
            >
                {useMockLabel ? 'Reset Label' : 'Inject Long Label'}
            </Button>
        </div>
      </Card>

      {/* Container Direito - Preview Real do Componente */}
      <div className="flex-1 flex flex-col gap-4">
        <div className="flex items-center gap-2 text-emerald-500 mb-2 px-4">
            <Rocket size={16} />
            <span className="text-xs font-bold uppercase tracking-widest">Production Render</span>
        </div>
        
        <div className="flex-1 bg-black/20 rounded-xl flex items-center justify-center border border-white/5 relative overflow-hidden">
            {/* Grid Background para facilitar alinhamento */}
            <div className="absolute inset-0 opacity-10 pointer-events-none" 
                 style={{ backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`, backgroundSize: '10px 10px' }} 
            />
            
            {/* O Componente Real sendo testado */}
            <StatusBadge 
                {...props} 
                status={currentStatus} 
                label={useMockLabel ? "Status Extremamente Longo para Teste de Quebra" : undefined}
            />
        </div>
        
        <div className="px-4 py-2 bg-black/40 rounded-lg border border-white/5 font-mono text-[10px] text-slate-400">
            Current Props: {JSON.stringify({ status: currentStatus, label: useMockLabel ? "Long String..." : "undefined" })}
        </div>
      </div>
    </div>
  );
};

export default StatusBadgeDebug;
