import React from 'react'
import { ThemeProvider } from './theme'
import { Header, Card, Button, Logo } from './components'
import { colors, gradients } from './theme'

const ColorSwatch = ({ color, name }) => (
  <div style={{ 
    display: 'flex', 
    alignItems: 'center', 
    gap: '12px',
    marginBottom: '8px'
  }}>
    <div style={{
      width: '32px',
      height: '32px',
      backgroundColor: color,
      borderRadius: '6px',
      border: '1px solid rgba(0,0,0,0.1)'
    }} />
    <div>
      <div style={{ fontWeight: '600', fontSize: '14px' }}>{name}</div>
      <div style={{ fontSize: '12px', color: '#666', fontFamily: 'monospace' }}>{color}</div>
    </div>
  </div>
)

const GradientSwatch = ({ gradient, name }) => (
  <div style={{ 
    display: 'flex', 
    alignItems: 'center', 
    gap: '12px',
    marginBottom: '8px'
  }}>
    <div style={{
      width: '64px',
      height: '32px',
      background: gradient,
      borderRadius: '6px',
      border: '1px solid rgba(0,0,0,0.1)'
    }} />
    <div>
      <div style={{ fontWeight: '600', fontSize: '14px' }}>{name}</div>
    </div>
  </div>
)

const DemoSection = ({ title, children }) => (
  <div style={{ marginBottom: '32px' }}>
    <h2 style={{ 
      fontSize: '20px', 
      fontWeight: '700', 
      marginBottom: '16px',
      color: 'var(--theme-text)'
    }}>
      {title}
    </h2>
    {children}
  </div>
)

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <div style={{ 
        minHeight: '100vh',
        backgroundColor: 'var(--theme-background)',
        transition: 'all 0.3s ease'
      }}>
        <Header 
          title="GestorEasy Theme Demo"
          actions={
            <Button variant="primary" size="small">
              Entrar
            </Button>
          }
        />
        
        <main style={{ 
          padding: '32px',
          maxWidth: '1200px',
          margin: '0 auto'
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
            gap: '24px'
          }}>
            
            {/* Paleta de Cores */}
            <Card title="Paleta de Cores" subtitle="Cores principais do sistema">
              <ColorSwatch color={colors.black} name="Preto" />
              <ColorSwatch color={colors.orange[500]} name="Laranja" />
              <ColorSwatch color={colors.olive[500]} name="Verde Oliva" />
              <ColorSwatch color={colors.white} name="Branco" />
            </Card>
            
            {/* Gradientes */}
            <Card title="Gradientes" subtitle="Gradientes disponíveis">
              <GradientSwatch gradient={gradients.primary} name="Primary" />
              <GradientSwatch gradient={gradients.warm} name="Warm" />
              <GradientSwatch gradient={gradients.olive} name="Olive" />
              <GradientSwatch gradient={gradients.dark} name="Dark" />
            </Card>
            
            {/* Botões */}
            <Card title="Componentes" subtitle="Botões com diferentes variantes">
              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                <Button variant="primary">Botão Primário</Button>
                <Button variant="secondary">Botão Secundário</Button>
                <Button variant="outline">Botão Outline</Button>
                <Button variant="ghost">Botão Ghost</Button>
                <Button variant="primary" disabled>Botão Desabilitado</Button>
              </div>
            </Card>
            
            {/* Logo */}
            <Card title="Logo" subtitle="Logo que se adapta ao tema">
              <div style={{ 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                padding: '24px'
              }}>
                <Logo size={80} />
              </div>
              <p style={{ 
                textAlign: 'center', 
                fontSize: '14px', 
                color: 'var(--theme-textSecondary)',
                margin: '16px 0 0 0'
              }}>
                A logo muda automaticamente baseada no tema atual
              </p>
            </Card>
            
            {/* Informações */}
            <Card 
              title="Como Usar" 
              subtitle="Instruções para implementar o tema"
              padding="large"
            >
              <div style={{ fontSize: '14px', lineHeight: '1.6' }}>
                <p><strong>1. Instalar dependências:</strong></p>
                <code style={{ 
                  display: 'block', 
                  padding: '8px', 
                  backgroundColor: 'var(--theme-surface)', 
                  borderRadius: '4px',
                  marginBottom: '12px',
                  fontFamily: 'monospace'
                }}>
                  npm install
                </code>
                
                <p><strong>2. Usar ThemeProvider:</strong></p>
                <code style={{ 
                  display: 'block', 
                  padding: '8px', 
                  backgroundColor: 'var(--theme-surface)', 
                  borderRadius: '4px',
                  marginBottom: '12px',
                  fontFamily: 'monospace',
                  fontSize: '12px'
                }}>
                  {`<ThemeProvider defaultTheme="light">
  <App />
</ThemeProvider>`}
                </code>
                
                <p><strong>3. Usar componentes:</strong></p>
                <code style={{ 
                  display: 'block', 
                  padding: '8px', 
                  backgroundColor: 'var(--theme-surface)', 
                  borderRadius: '4px',
                  fontFamily: 'monospace',
                  fontSize: '12px'
                }}>
                  {`import { Button, Card, Header } from './components'`}
                </code>
              </div>
            </Card>
            
            {/* Tema Atual */}
            <Card title="Controle de Tema" subtitle="Alterne entre os temas disponíveis">
              <p style={{ 
                fontSize: '14px', 
                color: 'var(--theme-textSecondary)',
                marginBottom: '16px'
              }}>
                Use o botão no header para alternar entre os temas: Light, Dark e Gradient.
                Cada tema aplica automaticamente as cores e a variante correta da logo.
              </p>
              
              <div style={{ 
                display: 'flex', 
                gap: '8px',
                flexWrap: 'wrap'
              }}>
                <Button variant="outline" size="small">☀️ Light</Button>
                <Button variant="outline" size="small">🌙 Dark</Button>
                <Button variant="outline" size="small">🎨 Gradient</Button>
              </div>
            </Card>
            
          </div>
        </main>
      </div>
    </ThemeProvider>
  )
}

export default App