import React, { useState } from 'react';
import { BookOpen, Video, FileText, Download, ChevronRight, Search, Lock, Eye, EyeOff, PlayCircle } from 'lucide-react';

export default function PlataformaCursos() {
  const [paginaAtual, setPaginaAtual] = useState('basicos');
  const [senhaDigitada, setSenhaDigitada] = useState('');
  const [empresaSelecionadaLogin, setEmpresaSelecionadaLogin] = useState('');
  const [empresasAutenticadas, setEmpresasAutenticadas] = useState([]);
  const [mostrarSenha, setMostrarSenha] = useState(false);
  const [abaAtiva, setAbaAtiva] = useState('Bunge');
  const [cursoSelecionado, setCursoSelecionado] = useState(null);
  const [materialSelecionado, setMaterialSelecionado] = useState(null);
  const [busca, setBusca] = useState('');
  const [erroSenha, setErroSenha] = useState(false);

  const SENHAS = {
    Bunge: 'bunge123',
    Pepsico: 'pepsi123',
    Alcon: 'alcon123',
    'Apanha Aves': 'aves123',
    'Gestão de Contratos': 'contratos123'
  };

  const ABAS = ['Bunge', 'Pepsico', 'Alcon', 'Apanha Aves', 'Gestão de Contratos'];

  const criarMaterial = (tipo, titulo, info, url = "https://www.youtube.com/embed/dQw4w9WgXcQ") => {
    const obj = { tipo, titulo, url: tipo === 'pdf' ? '#' : url };
    if (tipo === 'video') {
      obj.duracao = info;
    } else {
      obj.paginas = info;
    }
    return obj;
  };

  const criarProcedimento = (id, titulo, descricao, materiais, imagem = null) => ({
    id,
    titulo,
    descricao,
    materiais,
    imagem
  });

  const PROCEDIMENTOS = {
    basicos: {
      Bunge: [
        criarProcedimento(
          1,
          "Procedimento Básico de Recepção",
          "Processo padrão para recepção de mercadorias",
          [
            criarMaterial('video', "Recepção de Mercadorias", "10:30"),
            criarMaterial('pdf', "Checklist de Recepção", 5)
          ],
          "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=800&h=600&fit=crop"
        ),
        criarProcedimento(
          2,
          "Controle de Qualidade Inicial",
          "Verificações básicas de qualidade",
          [
            criarMaterial('video', "Inspeção Visual", "8:15"),
            criarMaterial('pdf', "Padrões de Qualidade", 8)
          ],
          "https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?w=800&h=600&fit=crop"
        )
      ],
      Pepsico: [
        criarProcedimento(3, "Organização de Estoque", "Procedimentos básicos de organização", [
          criarMaterial('video', "Sistema FIFO", "12:20"),
          criarMaterial('pdf', "Manual de Armazenagem", 12)
        ])
      ],
      Alcon: [
        criarProcedimento(4, "Segurança no Manuseio", "Procedimentos de segurança básicos", [
          criarMaterial('video', "EPIs Obrigatórios", "7:45"),
          criarMaterial('pdf', "Normas de Segurança", 6)
        ])
      ],
      'Apanha Aves': [
        criarProcedimento(5, "Procedimento de Captura", "Técnicas básicas de captura de aves", [
          criarMaterial('video', "Técnicas de Captura", "15:00"),
          criarMaterial('pdf', "Guia de Bem-Estar Animal", 10)
        ])
      ],
      'Gestão de Contratos': [
        criarProcedimento(6, "Introdução aos Contratos", "Conceitos básicos de gestão contratual", [
          criarMaterial('video', "Tipos de Contratos", "18:30"),
          criarMaterial('pdf', "Glossário Jurídico", 15)
        ])
      ]
    },
    restritos: {
      Bunge: [
        criarProcedimento(101, "Negociação de Preços Estratégicos", "Procedimentos avançados de negociação comercial", [
          criarMaterial('video', "Estratégias de Precificação", "25:30"),
          criarMaterial('pdf', "Dados Confidenciais de Mercado", 30)
        ])
      ],
      Pepsico: [
        criarProcedimento(103, "Análise de Performance Financeira", "Relatórios e KPIs confidenciais", [
          criarMaterial('video', "Dashboard Financeiro", "22:40"),
          criarMaterial('pdf', "Resultados Trimestrais", 25)
        ])
      ],
      Alcon: [
        criarProcedimento(104, "Procedimentos de Auditoria Interna", "Protocolos de compliance e auditoria", [
          criarMaterial('video', "Processo de Auditoria", "28:00"),
          criarMaterial('pdf', "Checklist de Conformidade", 18)
        ])
      ],
      'Apanha Aves': [
        criarProcedimento(105, "Gestão de Fornecedores Críticos", "Avaliação e contratos estratégicos", [
          criarMaterial('video', "Avaliação de Fornecedores", "19:45"),
          criarMaterial('pdf', "Contratos Confidenciais", 35)
        ])
      ],
      'Gestão de Contratos': [
        criarProcedimento(106, "Negociação de Cláusulas Complexas", "Estratégias avançadas de negociação contratual", [
          criarMaterial('video', "Táticas de Negociação", "30:20"),
          criarMaterial('pdf', "Modelos de Contratos Estratégicos", 40)
        ])
      ]
    }
  };

  const procedimentosAtuais = PROCEDIMENTOS[paginaAtual][abaAtiva] || [];
  const procedimentosFiltrados = procedimentosAtuais.filter(p =>
    p.titulo.toLowerCase().includes(busca.toLowerCase()) ||
    p.descricao.toLowerCase().includes(busca.toLowerCase())
  );

  const tentarLogin = () => {
    if (senhaDigitada === SENHAS[empresaSelecionadaLogin]) {
      setEmpresasAutenticadas([...empresasAutenticadas, empresaSelecionadaLogin]);
      setAbaAtiva(empresaSelecionadaLogin);
      setErroSenha(false);
      setSenhaDigitada('');
      setEmpresaSelecionadaLogin('');
    } else {
      setErroSenha(true);
      setTimeout(() => setErroSenha(false), 3000);
    }
  };

  const sairDaEmpresa = (empresa) => {
    const novasEmpresas = empresasAutenticadas.filter(e => e !== empresa);
    setEmpresasAutenticadas(novasEmpresas);
    if (abaAtiva === empresa) {
      setAbaAtiva(novasEmpresas[0] || 'Bunge');
      if (novasEmpresas.length === 0) setPaginaAtual('basicos');
    }
  };

  const mudarAba = (aba) => {
    if (paginaAtual === 'restritos' && !empresasAutenticadas.includes(aba)) {
      setEmpresaSelecionadaLogin(aba);
    } else {
      setAbaAtiva(aba);
      setBusca('');
    }
  };

  const resetarVisualizacao = () => {
    setCursoSelecionado(null);
    setMaterialSelecionado(null);
    setBusca('');
  };

  const isRestrito = paginaAtual === 'restritos';
  const temAcesso = !isRestrito || empresasAutenticadas.includes(abaAtiva);

  const TelaLogin = () => (
    <div className="min-h-screen bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700 flex items-center justify-center px-4">
      <div className="bg-white rounded-3xl shadow-2xl p-10 max-w-md w-full">
        <div className="text-center mb-8">
          <div className="w-20 h-20 bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
            <Lock className="w-10 h-10 text-white" />
          </div>
          <h2 className="text-3xl font-bold text-gray-900 mb-2">{empresaSelecionadaLogin}</h2>
          <p className="text-gray-600">Área de acesso restrito</p>
        </div>
        <div className="space-y-5">
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">Senha de Acesso</label>
            <div className="relative">
              <input
                type={mostrarSenha ? "text" : "password"}
                value={senhaDigitada}
                onChange={(e) => setSenhaDigitada(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && tentarLogin()}
                className={`w-full px-5 py-4 border-2 ${erroSenha ? 'border-red-400 focus:border-red-500' : 'border-gray-200 focus:border-violet-500'} rounded-xl outline-none transition-all text-gray-900 font-medium`}
                placeholder="Digite sua senha"
              />
              <button type="button" onClick={() => setMostrarSenha(!mostrarSenha)} className="absolute right-4 top-4 text-gray-400 hover:text-gray-600">
                {mostrarSenha ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
              </button>
            </div>
            {erroSenha && <p className="text-red-500 text-sm mt-2 font-medium">Senha incorreta. Tente novamente.</p>}
          </div>
          <button onClick={tentarLogin} className="w-full bg-gradient-to-r from-violet-600 to-purple-600 text-white py-4 rounded-xl hover:from-violet-700 hover:to-purple-700 transition-all font-semibold shadow-lg hover:shadow-xl">
            Entrar no Sistema
          </button>
          <button onClick={() => { setEmpresaSelecionadaLogin(''); setSenhaDigitada(''); setErroSenha(false); }} className="w-full text-gray-600 py-3 hover:text-gray-900 transition-colors font-medium">
            Cancelar
          </button>
        </div>
      </div>
    </div>
  );

  const TelaSelecaoEmpresa = () => (
    <div className="min-h-screen bg-gradient-to-br from-violet-600 via-purple-600 to-indigo-700 flex items-center justify-center px-4 py-12">
      <div className="w-full max-w-4xl">
        <div className="text-center mb-12">
          <h2 className="text-5xl font-bold text-white mb-4">Área Restrita</h2>
          <p className="text-violet-100 text-lg">Selecione sua empresa para acessar</p>
        </div>
        <div className="grid md:grid-cols-2 gap-4 mb-8">
          {ABAS.map(empresa => (
            <button key={empresa} onClick={() => setEmpresaSelecionadaLogin(empresa)} className="bg-white/10 backdrop-blur-md border border-white/20 p-8 rounded-2xl hover:bg-white/20 transition-all group shadow-xl hover:shadow-2xl hover:scale-105">
              <Lock className="w-8 h-8 text-white/60 group-hover:text-white mb-4 transition-colors" />
              <h3 className="text-xl font-bold text-white">{empresa}</h3>
              <p className="text-violet-200 text-sm mt-2">Clique para fazer login</p>
            </button>
          ))}
        </div>
        <button onClick={() => setPaginaAtual('basicos')} className="w-full text-white hover:text-violet-100 transition-colors text-sm font-medium">
          Voltar para Procedimentos Básicos
        </button>
      </div>
    </div>
  );

  if (empresaSelecionadaLogin) return <TelaLogin />;
  if (isRestrito && empresasAutenticadas.length === 0) return <TelaSelecaoEmpresa />;

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
      <header className="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-indigo-100">
        <div className="max-w-7xl mx-auto px-6 py-5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-gradient-to-br from-violet-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                <BookOpen className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">MeusProcedimentos</h1>
                <p className="text-xs text-gray-500 font-medium">
                  {isRestrito ? 'Área Restrita' : 'Área Pública'}
                  {isRestrito && empresasAutenticadas.length > 0 && (
                    <span className="ml-2 text-green-600">{empresasAutenticadas.length} autenticada(s)</span>
                  )}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-4">
              {isRestrito && empresasAutenticadas.length > 0 && (
                <button onClick={() => { setEmpresasAutenticadas([]); setPaginaAtual('basicos'); resetarVisualizacao(); }} className="text-sm text-red-600 hover:text-red-700 font-semibold flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-red-50 transition-all">
                  <Lock className="w-4 h-4" />Sair de Todas
                </button>
              )}
              <img 
                src="https://via.placeholder.com/120x50/6366f1/FFFFFF?text=LOGO" 
                alt="Logo" 
                className="h-10 object-contain rounded-lg"
              />
            </div>
          </div>
          <div className="mt-6 flex gap-3">
            <button onClick={() => { setPaginaAtual('basicos'); resetarVisualizacao(); }} className={`px-6 py-2.5 rounded-xl font-semibold transition-all ${!isRestrito ? 'bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-50'}`}>
              Procedimentos Básicos
            </button>
            <button onClick={() => { setPaginaAtual('restritos'); resetarVisualizacao(); }} className={`px-6 py-2.5 rounded-xl font-semibold transition-all flex items-center gap-2 ${isRestrito ? 'bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-50'}`}>
              <Lock className="w-4 h-4" />Restritos
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-10">
        {!cursoSelecionado && (
          <div className="mb-8">
            <div className="flex gap-2 overflow-x-auto pb-3">
              {ABAS.map(aba => (
                <div key={aba} className="relative flex-shrink-0">
                  <button onClick={() => mudarAba(aba)} className={`px-5 py-2.5 rounded-xl font-semibold transition-all whitespace-nowrap ${abaAtiva === aba ? 'bg-white shadow-lg text-violet-600 scale-105' : 'bg-white/50 text-gray-600 hover:bg-white hover:shadow'}`}>
                    {isRestrito && !empresasAutenticadas.includes(aba) && <Lock className="w-3 h-3 inline mr-2" />}
                    {aba}
                  </button>
                  {isRestrito && empresasAutenticadas.includes(aba) && (
                    <button onClick={(e) => { e.stopPropagation(); sairDaEmpresa(aba); }} className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600 shadow-lg">×</button>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {!cursoSelecionado ? (
          <div>
            <div className="mb-10">
              <h2 className="text-4xl font-bold text-gray-900 mb-3">{abaAtiva}</h2>
              <p className="text-gray-600 text-lg">{!isRestrito ? 'Procedimentos básicos e informativos' : temAcesso ? 'Procedimentos confidenciais para gestores' : 'Faça login para acessar este conteúdo'}</p>
            </div>

            {temAcesso ? (
              <>
                <div className="mb-10">
                  <div className="relative max-w-xl">
                    <Search className="absolute left-5 top-4 w-5 h-5 text-gray-400" />
                    <input type="text" placeholder="Buscar procedimentos..." value={busca} onChange={(e) => setBusca(e.target.value)} className="w-full pl-14 pr-5 py-4 bg-white rounded-2xl shadow-md focus:shadow-lg outline-none transition-all text-gray-900 font-medium border-2 border-transparent focus:border-violet-300" />
                  </div>
                </div>
                {procedimentosFiltrados.length > 0 ? (
                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {procedimentosFiltrados.map(proc => (
                      <div key={proc.id} className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all cursor-pointer overflow-hidden group hover:scale-105 duration-300" onClick={() => setCursoSelecionado(proc)}>
                        {proc.imagem ? (
                          <div className="h-56 overflow-hidden relative">
                            <img 
                              src={proc.imagem} 
                              alt={proc.titulo}
                              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                              <PlayCircle className="w-12 h-12 text-white" />
                            </div>
                          </div>
                        ) : (
                          <div className={`h-56 flex items-center justify-center ${isRestrito ? 'bg-gradient-to-br from-red-400 to-pink-500' : 'bg-gradient-to-br from-violet-400 to-indigo-500'}`}>
                            <BookOpen className="w-20 h-20 text-white opacity-50" />
                          </div>
                        )}
                        <div className="p-6">
                          <h3 className="text-xl font-bold text-gray-900 mb-2">{proc.titulo}</h3>
                          <p className="text-gray-600 text-sm mb-4">{proc.descricao}</p>
                          <div className="flex items-center gap-4 text-sm text-gray-500">
                            <span className="flex items-center gap-2 bg-violet-50 px-3 py-1.5 rounded-lg">
                              <Video className="w-4 h-4 text-violet-600" />
                              <span className="font-semibold text-violet-600">{proc.materiais.filter(m => m.tipo === 'video').length}</span>
                            </span>
                            <span className="flex items-center gap-2 bg-blue-50 px-3 py-1.5 rounded-lg">
                              <FileText className="w-4 h-4 text-blue-600" />
                              <span className="font-semibold text-blue-600">{proc.materiais.filter(m => m.tipo === 'pdf').length}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-20 bg-white rounded-2xl shadow-md">
                    <p className="text-gray-400 text-lg">Nenhum procedimento encontrado</p>
                  </div>
                )}
              </>
            ) : (
              <div className="text-center py-24 bg-white rounded-2xl shadow-lg">
                <div className="w-24 h-24 bg-gradient-to-br from-red-400 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
                  <Lock className="w-12 h-12 text-white" />
                </div>
                <h3 className="text-3xl font-bold text-gray-900 mb-3">Conteúdo Bloqueado</h3>
                <p className="text-gray-600 text-lg mb-8">Faça login para acessar os procedimentos de {abaAtiva}</p>
                <button onClick={() => setEmpresaSelecionadaLogin(abaAtiva)} className="bg-gradient-to-r from-violet-600 to-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:from-violet-700 hover:to-indigo-700 transition-all inline-flex items-center gap-3 shadow-lg hover:shadow-xl">
                  <Lock className="w-5 h-5" />Fazer Login
                </button>
              </div>
            )}
          </div>
        ) : !materialSelecionado ? (
          <div>
            <button onClick={() => setCursoSelecionado(null)} className="text-violet-600 hover:text-violet-700 mb-8 flex items-center gap-2 font-semibold text-lg">
              <ChevronRight className="w-5 h-5 rotate-180" />Voltar
            </button>
            <div className="bg-white rounded-2xl shadow-lg p-8 mb-10">
              <h2 className="text-4xl font-bold text-gray-900 mb-3">{cursoSelecionado.titulo}</h2>
              <p className="text-gray-600 text-lg">{cursoSelecionado.descricao}</p>
            </div>
            <h3 className="text-2xl font-bold text-gray-900 mb-6">Materiais Disponíveis</h3>
            <div className="grid md:grid-cols-2 gap-4">
              {cursoSelecionado.materiais.map((mat, idx) => (
                <div key={idx} onClick={() => setMaterialSelecionado(mat)} className="bg-white rounded-xl shadow-md hover:shadow-xl transition-all cursor-pointer p-6 flex items-center gap-5 group hover:scale-105 duration-300">
                  <div className={`w-14 h-14 rounded-xl flex items-center justify-center shadow-md ${mat.tipo === 'video' ? 'bg-gradient-to-br from-red-400 to-pink-500' : 'bg-gradient-to-br from-blue-400 to-indigo-500'}`}>
                    {mat.tipo === 'video' ? <Video className="w-7 h-7 text-white" /> : <FileText className="w-7 h-7 text-white" />}
                  </div>
                  <div className="flex-1">
                    <h4 className="font-bold text-gray-900 group-hover:text-violet-600 transition-colors text-lg">{mat.titulo}</h4>
                    <p className="text-sm text-gray-500 mt-1 font-medium">{mat.tipo === 'video' ? mat.duracao : `${mat.paginas} páginas`}</p>
                  </div>
                  <ChevronRight className="w-6 h-6 text-gray-400 group-hover:text-violet-600 transition-colors" />
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div>
            <button onClick={() => setMaterialSelecionado(null)} className="text-violet-600 hover:text-violet-700 mb-8 flex items-center gap-2 font-semibold text-lg">
              <ChevronRight className="w-5 h-5 rotate-180" />Voltar
            </button>
            <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
              <div className={`p-8 ${isRestrito ? 'bg-gradient-to-r from-red-500 to-pink-600' : 'bg-gradient-to-r from-violet-500 to-indigo-600'}`}>
                <h2 className="text-3xl font-bold text-white mb-2">{materialSelecionado.titulo}</h2>
                <p className="text-white/90 text-lg">{materialSelecionado.tipo === 'video' ? `Duração: ${materialSelecionado.duracao}` : `${materialSelecionado.paginas} páginas`}</p>
              </div>
              <div className="p-8">
                {materialSelecionado.tipo === 'video' ? (
                  <div className="aspect-video bg-black rounded-2xl overflow-hidden shadow-2xl">
                    <iframe className="w-full h-full" src={materialSelecionado.url} title={materialSelecionado.titulo} frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
                  </div>
                ) : (
                  <div className="text-center py-16">
                    <div className="w-32 h-32 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-2xl">
                      <FileText className="w-16 h-16 text-white" />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-2">{materialSelecionado.titulo}</h3>
                    <p className="text-gray-600 text-lg mb-8">Documento PDF com {materialSelecionado.paginas} páginas</p>
                    <button className="bg-gradient-to-r from-violet-600 to-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:from-violet-700 hover:to-indigo-700 transition-all inline-flex items-center gap-3 shadow-lg hover:shadow-xl">
                      <Download className="w-5 h-5" />Baixar PDF
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </main>

      <footer className="bg-white/80 backdrop-blur-md mt-20 py-8 border-t border-indigo-100">
        <div className="max-w-7xl mx-auto px-6 text-center">
          <p className="text-gray-600 font-medium">&copy; 2024 MeusProcedimentos - Todos os direitos reservados</p>
        </div>
      </footer>
    </div>
  );
}