import React, { useState } from 'react';
import { Database, Activity, Shield, DollarSign, BarChart3, Brain, Lock, Beaker, Users, Repeat, ChevronDown, ChevronUp } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { Button } from './ui/button';

const Modules = () => {
  const [expandedModule, setExpandedModule] = useState(null);

  const modules = [
    {
      id: 1,
      title: 'Módulo de Integração e Normalização de Dados',
      subtitle: 'Core da Plataforma',
      description: 'Coração técnico da IAsis. Sem troca de sistema, sem barreiras.',
      icon: Database,
      color: 'bg-blue-500',
      category: 'Core',
      functions: [
        'Conexão com sistemas legados (HIS, APS, CNES, e-SUS, SIVEP, etc.)',
        'Leitura de APIs, CSVs, bancos de dados e arquivos desestruturados (PDF, XML)',
        'Mapeamento de códigos, tabelas e identificação semântica (CID, DRG, procedimentos, etc.)',
        'Criação do repositório longitudinal por CPF/Cartão SUS',
      ],
      technologies: ['Spark', 'NiFi', 'Databricks', 'Lakehouse', 'Apache Camel', 'REST/SOAP APIs'],
      benefits: [
        'Integração sem troca de sistemas',
        'Dados unificados em tempo real',
        'Redução de retrabalho manual',
        'Base sólida para outros módulos',
      ],
    },
    {
      id: 2,
      title: 'Módulo de Linha do Cuidado e Gestão Populacional',
      subtitle: 'Jornadas Clínicas Acionáveis',
      description: 'Transforma dados desconectados em jornadas clínicas acionáveis.',
      icon: Activity,
      color: 'bg-green-500',
      category: 'Cuidado',
      functions: [
        'Construção de jornadas específicas (ex.: câncer de mama, diabetes, gestante, puericultura)',
        'Identificação de vazios assistenciais e pacientes perdidos na rede',
        'Painel de rastreio e continuidade de cuidado',
        'Regras clínicas adaptáveis (ex.: diretrizes SUS, ANS)',
      ],
      technologies: ['Motor de regras clínicas', 'APIs de notificação', 'Dashboards interativos'],
      benefits: [
        'Redução de mortalidade evitável',
        'Aumento de cobertura e adesão',
        'Qualificação para programas de incentivo (Previne Brasil, Rede Cegonha, etc.)',
        'Melhoria na continuidade do cuidado',
      ],
    },
    {
      id: 3,
      title: 'Módulo de Regulação Inteligente e Auditoria Ativa',
      subtitle: 'Organização do Caos Regulatório',
      description: 'O módulo que organiza o caos regulatório.',
      icon: Shield,
      color: 'bg-purple-500',
      category: 'Regulação',
      functions: [
        'Classificação automatizada de OTMs (ordens de internação)',
        'Auditoria por IA (glosas, DRG, inconsistências)',
        'Visualização de filas reguladas por tempo, complexidade e risco',
        'Compatível com SISREG, SUSFácil, plataformas próprias',
      ],
      technologies: ['NLP para CID/DRG', 'Motores de regras clínicas', 'Automação com RPA'],
      benefits: [
        'Redução de tempo de regulação',
        'Diminuição de glosas',
        'Melhoria na gestão de filas',
        'Auditoria preventiva automatizada',
      ],
    },
    {
      id: 4,
      title: 'Módulo de Receita Pública e Incentivos Federais',
      subtitle: 'Ponte para Verbas Federais',
      description: 'A ponte entre operação local e verbas federais.',
      icon: DollarSign,
      color: 'bg-yellow-500',
      category: 'Financeiro',
      functions: [
        'Geração e validação de bases e-SUS, CNES, SIVEP, e-Gestor',
        'Correção de duplicidade de cadastros (e.g. CPF em múltiplas bases)',
        'Consolidação e padronização para envio mensal',
        'Estimativa e simulação de receita com diferentes estratégias',
      ],
      technologies: ['APIs governamentais', 'Validadores automáticos', 'Simuladores de receita'],
      benefits: [
        'Aumento da captação federal',
        'Redução de retrabalho das secretarias',
        'Conformidade com prazos e exigências do MS',
        'Maximização de incentivos disponíveis',
      ],
    },
    {
      id: 5,
      title: 'Módulo de Produtos de Dados e Visualizações Estratégicas',
      subtitle: 'Do Dado ao Insight',
      description: 'Do dado cru ao insight estratégico.',
      icon: BarChart3,
      color: 'bg-indigo-500',
      category: 'Analytics',
      functions: [
        'Dashboards customizados por perfil de usuário (gestor, clínico, regulador, auditor)',
        'Alertas inteligentes por email, sistema ou API',
        'Ferramentas de exploração de dados para tomada de decisão',
        'Consolidação por território, grupo populacional ou condição clínica',
      ],
      technologies: ['Power BI', 'Metabase', 'APIs de alertas', 'Ferramentas de BI'],
      benefits: [
        'Decisões baseadas em dados',
        'Visibilidade em tempo real',
        'Alertas proativos',
        'Relatórios personalizados',
      ],
    },
    {
      id: 6,
      title: 'Módulo de Inteligência Artificial e Automatização',
      subtitle: 'IA Aplicada a Problemas Reais',
      description: 'IA leve e aplicada a problemas reais.',
      icon: Brain,
      color: 'bg-pink-500',
      category: 'IA',
      functions: [
        'Classificação automática de CID, DRG e complexidade',
        'Matching de pacientes entre sistemas',
        'IA para triagem de filas (por tempo, risco e urgência)',
        'Previsão de abandono ou complicação',
      ],
      technologies: ['Machine Learning', 'NLP', 'Computer Vision', 'Algoritmos preditivos'],
      benefits: [
        'IA transparente e auditável (explainable AI)',
        'Treinada em dados públicos e dados reais da rede',
        'Automação de processos manuais',
        'Predição de riscos e complicações',
      ],
    },
    {
      id: 7,
      title: 'Módulo de Governança de Dados e LGPD',
      subtitle: 'Segurança e Confiança',
      description: 'Segurança, rastreabilidade e confiança.',
      icon: Lock,
      color: 'bg-red-500',
      category: 'Segurança',
      functions: [
        'Controle federado de acesso por papel e órgão',
        'Logs de acesso, uso e edição',
        'Consentimento e pseudonimização conforme LGPD',
        'Relatórios de auditoria para corregedorias e CGUs',
      ],
      technologies: ['Blockchain (opcional)', 'Zero-trust security', 'Criptografia avançada'],
      benefits: [
        'Conformidade total com LGPD',
        'Rastreabilidade completa',
        'Segurança de dados garantida',
        'Auditoria transparente',
      ],
    },
    {
      id: 8,
      title: 'Módulo de Laboratório de Dados e Configuração Avançada',
      subtitle: 'Para Maior Maturidade Técnica',
      description: 'Para municípios, operadoras ou estados com maior maturidade técnica.',
      icon: Beaker,
      color: 'bg-teal-500',
      category: 'Avançado',
      functions: [
        'Ambiente sandbox para criar e testar regras clínicas ou pipelines',
        'Simulação de políticas públicas e estimativas de impacto',
        'Publicação de produtos de dados em APIs internas',
        'Suporte à pesquisa e inovação (ex.: universidades, laboratórios clínicos)',
      ],
      technologies: ['Sandbox environments', 'API management', 'Simuladores', 'Ferramentas de pesquisa'],
      benefits: [
        'Experimentação segura',
        'Inovação contínua',
        'Suporte à pesquisa',
        'Customização avançada',
      ],
    },
    {
      id: 9,
      title: 'Módulo de Implantação e Squad Integrado',
      subtitle: 'Serviço + Produto',
      description: 'Serviço técnico + produto = entrega garantida.',
      icon: Users,
      color: 'bg-orange-500',
      category: 'Serviços',
      functions: [
        'Time de engenharia para integração local',
        'Time de interoperabilidade semântica',
        'Especialistas em vigilância, atenção primária, saúde suplementar',
        'Templates, cronogramas e documentação compartilhada',
      ],
      technologies: ['Metodologias ágeis', 'Ferramentas de gestão', 'Templates de implementação'],
      benefits: [
        'Implementação garantida',
        'Suporte especializado',
        'Transferência de conhecimento',
        'Sucesso do cliente assegurado',
      ],
    },
    {
      id: 10,
      title: 'Módulo de Replicação e Escalonamento Territorial',
      subtitle: 'Expansão Territorial',
      description: 'Acelerador para expansão estadual ou multicliente.',
      icon: Repeat,
      color: 'bg-cyan-500',
      category: 'Escala',
      functions: [
        'Estados que integram múltiplos municípios',
        'Operadoras com múltiplas redes',
        'Criação de hubs regionais de interoperabilidade',
        'Suporte ao desenho de contratos e repasse com base em dados',
      ],
      technologies: ['Arquitetura federada', 'Multi-tenancy', 'APIs de integração'],
      benefits: [
        'Escalabilidade territorial',
        'Gestão centralizada',
        'Economia de escala',
        'Padronização regional',
      ],
    },
  ];

  const categories = ['Todos', 'Core', 'Cuidado', 'Regulação', 'Financeiro', 'Analytics', 'IA', 'Segurança', 'Avançado', 'Serviços', 'Escala'];
  const [selectedCategory, setSelectedCategory] = useState('Todos');

  const filteredModules = selectedCategory === 'Todos' 
    ? modules 
    : modules.filter(module => module.category === selectedCategory);

  const toggleModule = (moduleId) => {
    setExpandedModule(expandedModule === moduleId ? null : moduleId);
  };

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="section-padding bg-gradient-to-br from-blue-50 to-indigo-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              Módulos da <span className="gradient-text">Plataforma IAsis</span>
            </h1>
            <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
              Cada módulo da IAsis é projetado como uma unidade autônoma de valor, 
              mas que se conecta de forma integrada ao ecossistema de dados e ao 
              repositório longitudinal da saúde de cada cliente.
            </p>
          </div>
        </div>
      </section>

      {/* Category Filter */}
      <section className="py-8 bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap gap-2 justify-center">
            {categories.map((category) => (
              <Button
                key={category}
                variant={selectedCategory === category ? "default" : "outline"}
                onClick={() => setSelectedCategory(category)}
                className="mb-2"
              >
                {category}
              </Button>
            ))}
          </div>
        </div>
      </section>

      {/* Modules Grid */}
      <section className="section-padding bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {filteredModules.map((module) => (
              <Card key={module.id} className="border-0 shadow-lg card-hover">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="flex items-start space-x-4">
                      <div className={`w-12 h-12 ${module.color} rounded-lg flex items-center justify-center flex-shrink-0`}>
                        <module.icon className="h-6 w-6 text-white" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <Badge variant="secondary">{module.category}</Badge>
                        </div>
                        <CardTitle className="text-xl mb-2">{module.title}</CardTitle>
                        <CardDescription className="text-primary font-medium mb-2">
                          {module.subtitle}
                        </CardDescription>
                        <CardDescription className="text-gray-600">
                          {module.description}
                        </CardDescription>
                      </div>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => toggleModule(module.id)}
                      className="flex-shrink-0"
                    >
                      {expandedModule === module.id ? (
                        <ChevronUp className="h-4 w-4" />
                      ) : (
                        <ChevronDown className="h-4 w-4" />
                      )}
                    </Button>
                  </div>
                </CardHeader>
                
                {expandedModule === module.id && (
                  <CardContent className="pt-0">
                    <div className="space-y-6">
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Principais Funcionalidades:</h4>
                        <ul className="space-y-2">
                          {module.functions.map((func, index) => (
                            <li key={index} className="flex items-start">
                              <div className="w-1.5 h-1.5 bg-primary rounded-full mt-2 mr-3 flex-shrink-0"></div>
                              <span className="text-gray-600 text-sm">{func}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                      
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Tecnologias:</h4>
                        <div className="flex flex-wrap gap-2">
                          {module.technologies.map((tech, index) => (
                            <Badge key={index} variant="outline" className="text-xs">
                              {tech}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      
                      <div>
                        <h4 className="font-semibold text-gray-900 mb-3">Benefícios:</h4>
                        <ul className="space-y-2">
                          {module.benefits.map((benefit, index) => (
                            <li key={index} className="flex items-start">
                              <div className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></div>
                              <span className="text-gray-600 text-sm">{benefit}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </CardContent>
                )}
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Commercial Model */}
      <section className="section-padding bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Modelo Comercial Modular
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              A IAsis trabalha por módulo e por impacto, com licenças e serviços 
              escaláveis conforme necessidade.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg">Município Pequeno</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-600">
                  <li>• Integração + Receita Pública</li>
                  <li>• Linha do cuidado básica</li>
                  <li>• Dashboards essenciais</li>
                </ul>
              </CardContent>
            </Card>
            
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg">Município Médio</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-600">
                  <li>• Módulos básicos +</li>
                  <li>• Regulação inteligente</li>
                  <li>• Produtos de dados avançados</li>
                </ul>
              </CardContent>
            </Card>
            
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg">Estado</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-600">
                  <li>• Todos os módulos</li>
                  <li>• Replicação territorial</li>
                  <li>• Governança federada</li>
                </ul>
              </CardContent>
            </Card>
            
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="text-lg">Operadora</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-gray-600">
                  <li>• Linha do cuidado</li>
                  <li>• Regulação + Auditoria</li>
                  <li>• Gestão de risco populacional</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="section-padding gradient-bg">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            Interessado em módulos específicos?
          </h2>
          <p className="text-xl text-white/90 mb-8">
            Converse com nossos especialistas para entender qual combinação 
            de módulos é ideal para sua organização.
          </p>
          <Button size="lg" asChild className="bg-white text-primary hover:bg-white/90">
            <a href="/contato">
              Falar com Especialista
            </a>
          </Button>
        </div>
      </section>
    </div>
  );
};

export default Modules;

