import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './style.css';
import { I18nProvider } from './providers/I18nProvider';
import { Button } from './components/Atoms/Button/Button';
import { StatCard } from './components/DataDisplay/StatCard/StatCard';
import { Card } from './components/DataDisplay/Card/Card';
import { AreaChart } from './components/DataDisplay/AreaChart/AreaChart';
import { Typography } from './components/Atoms/Typography/Typography';
import { Badge } from './components/Atoms/Badge/Badge';
import { Icon } from './components/Atoms/Icon/Icon';
import { Tooltip } from './components/Atoms/Tooltip/Tooltip';
import { Input } from './components/Inputs/Input/Input';
import { TabsLegacy } from './components/Layout/Tabs/TabsLegacy';
import { Modal } from './components/Layout/Modal/Modal';
import charlyImg from './assets/charly.png';

function App() {
  const [isBeeTraveling, setIsBeeTraveling] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleBeeClick = () => {
    if (isBeeTraveling) return;
    setIsBeeTraveling(true);

    // Duración total de la animación CSS de viaje (debe coincidir con bee-travel)
    setTimeout(() => {
      setIsBeeTraveling(false);
    }, 3600);
  };

  const handleExploreComponents = () => {
    const componentsSection = document.getElementById('components-section');
    if (componentsSection) {
      componentsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <I18nProvider>
      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
        {/* Bee viajera en capa superior */}
        {isBeeTraveling && (
          <div className="fixed inset-x-0 top-16 z-50 flex justify-center pointer-events-none">
            <div className="bee-travel">
              <div className="bee-travel-inner">
                <img
                  src={charlyImg}
                  alt="Bee viajando por Anima DS"
                  className="w-20 h-20 object-contain"
                />
              </div>
            </div>
          </div>
        )}
        {/* Header Premium */}
        <header className="bg-gradient-to-r from-[#003300] via-[#004d00] to-[#003300] shadow-2xl header-honeycomb">
          <div className="max-w-7xl mx-auto px-6 py-16">
            <div className="flex flex-col items-center text-center space-y-4">
              <div className="flex items-center space-x-3">
                <Tooltip
                  content="Soy Bee, la IA de Nucleus Labs, y te presento el Anima Design System"
                  position="right"
                >
                  <div
                    className={`w-20 h-20 rounded-lg flex items-center justify-center overflow-hidden cursor-pointer transition-opacity duration-200 ${
                      isBeeTraveling ? 'opacity-0' : 'opacity-100'
                    }`}
                    onClick={handleBeeClick}
                  >
                    <img
                      src={charlyImg}
                      alt="Bee, IA de Nucleus Labs"
                      className="w-18 h-18 object-contain charly-float"
                    />
                  </div>
                </Tooltip>
                <Typography variant="h1" className="text-white font-bold tracking-tight">
                  Anima Design System
                </Typography>
              </div>
              <Typography variant="body1" className="text-green-100 max-w-2xl">
                Sistema de diseño premium de Nucleus, con componentes modulares, documentación completa y 
                herramientas de desarrollo integradas para todos los proyectos de la empresa.
              </Typography>
              <Badge variant="success" size="large" className="bg-white/20 text-white border-white/30 mt-2">
                v1.0
              </Badge>
            </div>
          </div>
        </header>

        {/* Main Content */}
        <main className="max-w-7xl mx-auto px-6 py-12">
          {/* Welcome Section */}
          <section className="mb-16">
            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
              <div className="p-8">
                <div className="flex items-start justify-between mb-6">
                  <div>
                    <Typography variant="h2" className="text-gray-900 mb-3">
                      Bienvenido a Anima DS
                    </Typography>
                    <Typography variant="body1" className="text-gray-600 max-w-3xl leading-relaxed">
                      Tu librería de componentes está lista para usar. Explora más de 45 componentes 
                      cuidadosamente diseñados, todos documentados en Storybook y listos para integrarse 
                      en tus proyectos.
                    </Typography>
                  </div>
                  <div className="hidden md:block">
                    <div className="w-24 h-24 bg-gradient-to-br from-[#003300] to-[#006600] rounded-2xl flex items-center justify-center shadow-lg">
                      <Icon name="ChartBarIcon" className="h-12 w-12 text-white" />
                    </div>
                  </div>
                </div>

                <div className="flex flex-wrap gap-3 mt-6">
                  <Button 
                    variant="primary" 
                    className="bg-[#003300] hover:bg-[#004d00] border-[#003300]"
                    onClick={() => window.open('http://localhost:6006', '_blank')}
                  >
                    Ver Documentación
                  </Button>
                  <Button variant="outline" className="border-[#003300] text-[#003300] hover:bg-[#003300] hover:text-white" onClick={() => window.location.href = "http://192.168.229.21:4001 "}>
                    Explorar Componentes
                  </Button>
                </div>
              </div>
            </Card>
          </section>

          {/* Quick Install Section */}
          <section className="mb-16">
            <Card className="border-0 shadow-lg bg-gradient-to-br from-[#003300]/5 to-[#004d00]/5">
              <div className="p-6">
                <Typography variant="h3" className="text-gray-900 mb-4">
                  Instalación Rápida
                </Typography>
                <div className="bg-gray-900 rounded-lg p-4 mb-4">
                  <code className="text-green-400 text-sm">npm install anima-ds-nucleus</code>
                </div>
                <div className="bg-gray-50 rounded-lg p-4">
                  <Typography variant="body2" className="text-gray-700 mb-2 font-medium">
                    Ejemplo de uso:
                  </Typography>
                  <pre className="text-xs text-gray-600 overflow-x-auto">
{`import { Button, Card } from 'anima-ds-nucleus';

<Card title="Mi Card">
  <Button variant="Primary">Click aquí</Button>
</Card>`}
                  </pre>
                </div>
              </div>
            </Card>
          </section>

          {/* Stats Section */}
          <section className="mb-16">
            <Typography variant="h3" className="text-gray-900 mb-6">
              Estadísticas del Sistema
            </Typography>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <StatCard
                title="Componentes"
                value="45+"
                change="Todos documentados"
                changeType="positive"
                icon="ChartBarIcon"
                iconColor="green"
                className="border-l-4 border-[#003300]"
              />
              <StatCard
                title="Categorías"
                value="5"
                change="Organizados por tipo"
                changeType="positive"
                icon="Cog6ToothIcon"
                iconColor="green"
                className="border-l-4 border-[#003300]"
              />
              <StatCard
                title="Idiomas"
                value="2"
                change="ES-AR y PT-BR"
                changeType="positive"
                icon="UserIcon"
                iconColor="green"
                className="border-l-4 border-[#003300]"
              />
              <StatCard
                title="Gráficos"
                value="6"
                change="Con ApexCharts"
                changeType="positive"
                icon="ChartBarIcon"
                iconColor="green"
                className="border-l-4 border-[#003300]"
              />
            </div>
          </section>

          {/* Components Overview Section */}
          <section id="components-section" className="mb-16">
            <Typography variant="h3" className="text-gray-900 mb-6">
              Componentes Principales
            </Typography>
            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
              {[
                { name: 'Button', icon: 'ChartBarIcon', category: 'Atoms' },
                { name: 'Input', icon: 'Cog6ToothIcon', category: 'Inputs' },
                { name: 'Card', icon: 'ChartBarIcon', category: 'DataDisplay' },
                { name: 'Modal', icon: 'UserIcon', category: 'Layout' },
                { name: 'Tabs', icon: 'Cog6ToothIcon', category: 'Layout' },
                { name: 'Badge', icon: 'ChartBarIcon', category: 'Atoms' },
                { name: 'Select', icon: 'Cog6ToothIcon', category: 'Inputs' },
                { name: 'DBGrid', icon: 'ChartBarIcon', category: 'DataDisplay' },
                { name: 'AreaChart', icon: 'ChartBarIcon', category: 'DataDisplay' },
                { name: 'LoginForm', icon: 'UserIcon', category: 'Views' },
              ].map((comp, idx) => (
                <Card key={idx} className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow text-center p-4">
                  <div className="w-10 h-10 bg-gradient-to-br from-[#003300] to-[#006600] rounded-lg flex items-center justify-center mx-auto mb-2">
                    <Icon name={comp.icon} className="h-5 w-5 text-white" />
                  </div>
                  <Typography variant="body2" className="text-gray-900 font-medium mb-1">
                    {comp.name}
                  </Typography>
                  <Typography variant="body2" className="text-gray-500 text-xs">
                    {comp.category}
                  </Typography>
                </Card>
              ))}
            </div>
          </section>

          {/* Requirements Section */}
          <section className="mb-16">
            <Card className="border-l-4 border-[#003300] shadow-md">
              <div className="p-6">
                <Typography variant="h4" className="text-gray-900 mb-4">
                  Requisitos Técnicos
                </Typography>
                <div className="space-y-2">
                  <div className="flex items-center gap-2">
                    <Badge variant="primary" className="bg-[#003300] text-white">React 18+</Badge>
                    <Typography variant="body2" className="text-gray-600">
                      Versión mínima requerida
                    </Typography>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant="success">Tailwind CSS</Badge>
                    <Typography variant="body2" className="text-gray-600">
                      Sistema de estilos recomendado
                    </Typography>
                  </div>
                  <div className="flex items-center gap-2 flex-wrap">
                    <Badge variant="warning">Opcional</Badge>
                    <Typography variant="body2" className="text-gray-600">
                      i18next, MUI, ApexCharts (según componentes usados)
                    </Typography>
                  </div>
                </div>
              </div>
            </Card>
          </section>

          {/* Button Variants Section - Para probar todas las variantes */}
          <section className="mb-16">
            <Typography variant="h3" className="text-gray-900 mb-6">
              Variantes del Botón
            </Typography>
            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
              <div className="p-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
                  {/* Columna izquierda: Variantes de botón */}
                  <div>
                    {/* Primary Row */}
                    <div className="mb-8">
                      <Typography variant="h4" className="text-gray-700 mb-4">Primary</Typography>
                      <div className="flex items-center gap-6 flex-wrap">
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Small</span>
                          <Button texto="Button" tipo="Primary" tamaño="Small" onClick={() => alert('Primary Small clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Default</span>
                          <Button texto="Button" tipo="Primary" tamaño="Default" onClick={() => alert('Primary Default clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Large</span>
                          <Button texto="Button" tipo="Primary" tamaño="Large" onClick={() => alert('Primary Large clicked!')} />
                        </div>
                      </div>
                    </div>

                    {/* Secondary Row */}
                    <div className="mb-8">
                      <Typography variant="h4" className="text-gray-700 mb-4">Secondary</Typography>
                      <div className="flex items-center gap-6 flex-wrap">
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Small</span>
                          <Button texto="Button" tipo="Secondary" tamaño="Small" onClick={() => alert('Secondary Small clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Default</span>
                          <Button texto="Button" tipo="Secondary" tamaño="Default" onClick={() => alert('Secondary Default clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Large</span>
                          <Button texto="Button" tipo="Secondary" tamaño="Large" onClick={() => alert('Secondary Large clicked!')} />
                        </div>
                      </div>
                    </div>

                    {/* Ghost Row */}
                    <div className="mb-8">
                      <Typography variant="h4" className="text-gray-700 mb-4">Ghost</Typography>
                      <div className="flex items-center gap-6 flex-wrap">
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Small</span>
                          <Button texto="Button" tipo="Ghost" tamaño="Small" onClick={() => alert('Ghost Small clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Default</span>
                          <Button texto="Button" tipo="Ghost" tamaño="Default" onClick={() => alert('Ghost Default clicked!')} />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Large</span>
                          <Button texto="Button" tipo="Ghost" tamaño="Large" onClick={() => alert('Ghost Large clicked!')} />
                        </div>
                      </div>
                    </div>

                    {/* Disabled Row */}
                    <div>
                      <Typography variant="h4" className="text-gray-700 mb-4">Disabled</Typography>
                      <div className="flex items-center gap-6 flex-wrap">
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Small</span>
                          <Button texto="Button" tipo="Disabled" tamaño="Small" />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Default</span>
                          <Button texto="Button" tipo="Disabled" tamaño="Default" />
                        </div>
                        <div className="flex flex-col items-center gap-2">
                          <span className="text-xs text-gray-500">Large</span>
                          <Button texto="Button" tipo="Disabled" tamaño="Large" />
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Columna derecha: otros componentes de ejemplo */}
                  <div className="space-y-6">
                    <Typography variant="h4" className="text-gray-700 mb-2">
                      Otros componentes en acción
                    </Typography>
                    <Card className="border border-gray-100 shadow-md">
                      <div className="p-5 space-y-3">
                        <Typography variant="body1" className="text-gray-800 font-medium">
                          Card + StatCard
                        </Typography>
                        <StatCard
                          title="Sesiones activas"
                          value="128"
                          change="+12% esta semana"
                          changeType="positive"
                          icon="UserIcon"
                          iconColor="green"
                        />
                        <Button 
                          variant="outline" 
                          tamaño="Small"
                          onClick={() => setIsModalOpen(true)}
                          className="w-full mt-2"
                        >
                          Ver Modal
                        </Button>
                      </div>
                    </Card>

                    <Card className="border border-gray-100 shadow-md">
                      <div className="p-5 space-y-3">
                        <Typography variant="body1" className="text-gray-800 font-medium">
                          Input y Tabs
                        </Typography>
                        <Input
                          label="Email"
                          type="email"
                          placeholder="tu@email.com"
                          helperText="Campo de ejemplo"
                        />
                        <div className="mt-4">
                          <TabsLegacy
                            items={[
                              { label: 'Tab 1', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 1</div> },
                              { label: 'Tab 2', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 2</div> },
                              { label: 'Tab 3', content: <div className="p-2 text-sm text-gray-600">Contenido Tab 3</div> },
                            ]}
                          />
                        </div>
                      </div>
                    </Card>
                  </div>
                </div>
              </div>
            </Card>
          </section>

          {/* Features Section */}
          <section>
            <Typography variant="h3" className="text-gray-900 mb-6">
              Características Principales
            </Typography>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
                <div className="p-6">
                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
                    <Icon name="Cog6ToothIcon" className="h-7 w-7 text-white" />
                  </div>
                  <Typography variant="h4" className="text-gray-900 mb-2">
                    Componentes Modulares
                  </Typography>
                  <Typography variant="body2" className="text-gray-600">
                    Estructura organizada por tipo: Atoms, Inputs, Layout, DataDisplay y Views.
                  </Typography>
                </div>
              </Card>

              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
                <div className="p-6">
                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
                    <Icon name="ChartBarIcon" className="h-7 w-7 text-white" />
                  </div>
                  <Typography variant="h4" className="text-gray-900 mb-2">
                    Storybook Integrado
                  </Typography>
                  <Typography variant="body2" className="text-gray-600">
                    Cada componente incluye historias interactivas para visualización y pruebas.
                  </Typography>
                </div>
              </Card>

              <Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-white to-gray-50">
                <div className="p-6">
                  <div className="w-14 h-14 bg-gradient-to-br from-[#003300] to-[#006600] rounded-xl flex items-center justify-center mb-4 shadow-md">
                    <Icon name="UserIcon" className="h-7 w-7 text-white" />
                  </div>
                  <Typography variant="h4" className="text-gray-900 mb-2">
                    Internacionalización
                  </Typography>
                  <Typography variant="body2" className="text-gray-600">
                    Soporte completo para español (AR) y portugués (BR) con i18n.
                  </Typography>
                </div>
              </Card>
            </div>
          </section>

          {/* Footer */}
          <footer className="mt-16 bg-gradient-to-r from-[#003300] via-[#004d00] to-[#003300]">
            <div className="max-w-7xl mx-auto px-6 py-8 border-t border-white/10">
              <div className="flex flex-col md:flex-row items-center justify-between gap-4">
                <Typography variant="body2" className="text-green-100 text-center md:text-left">
                  © 2025 Anima Design System. Creado por Equipo Nucleus Labs. Todos los derechos reservados.
                </Typography>
                <div className="flex items-center gap-4">
                  <a
                    href="https://github.com/NucleusNova/anima-ds"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-green-100 hover:text-white transition-colors text-sm underline"
                  >
                    GitHub
                  </a>
                </div>
              </div>
            </div>
          </footer>

          {/* Modal Example */}
          <Modal
            isOpen={isModalOpen}
            onClose={() => setIsModalOpen(false)}
            title="Ejemplo de Modal"
          >
            <Typography variant="body1" className="text-gray-600 mb-4">
              Este es un ejemplo del componente Modal de Anima DS.
            </Typography>
            <Button variant="primary" onClick={() => setIsModalOpen(false)}>
              Cerrar
            </Button>
          </Modal>
        </main>
      </div>
    </I18nProvider>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
