import { useState } from 'react'
import { X, ChevronRight, BookOpen } from 'lucide-react'

interface ManualSection {
  id: string
  title: string
  icon: string
  content: string
}

const sections: ManualSection[] = [
  {
    id: 'inicio',
    title: 'Primeiros Passos',
    icon: '🚀',
    content: `
# 🚀 Primeiros Passos

## Login

1. Acesse a plataforma SteelBook
2. Digite seu **email** e **senha**
3. Clique em **"Entrar"**
4. Você será redirecionado para o Dashboard

> **Dica:** Se esqueceu sua senha, entre em contato com o administrador.

## Sua Primeira Sessão

Após fazer login, você verá:
- **Dashboard** com seus projetos recentes
- **Barra de navegação** no topo
- **Menu lateral** com opções principais
    `
  },
  {
    id: 'dashboard',
    title: 'Dashboard',
    icon: '📊',
    content: `
# 📊 Dashboard

O Dashboard é sua central de controle. Aqui você vê:

## Estatísticas Rápidas

- **Total Projetos:** Número total de databooks
- **Em Andamento:** Projetos em desenvolvimento
- **Finalizados:** Projetos concluídos
- **Templates:** Modelos disponíveis

## Projetos Recentes

Uma tabela mostrando seus últimos projetos com:

| Campo | Descrição |
|-------|-----------|
| **Projeto** | Nome e número do projeto |
| **Cliente** | Empresa cliente |
| **Status** | Rascunho, Em Andamento, Revisão, Finalizado |
| **Progresso** | Barra visual com percentual |
| **Ações** | Ver, Editar, Clonar, Deletar |

## Entendendo o Progresso

A barra de progresso mostra quantos tópicos já têm documentos:

\`\`\`
Progresso = (Tópicos com documentos / Total de tópicos) × 100

Exemplo:
├─ Total de tópicos: 28
├─ Tópicos com documentos: 7
└─ Progresso: 25% ✓
\`\`\`
    `
  },
  {
    id: 'databook',
    title: 'Criando um Databook',
    icon: '📚',
    content: `
# 📚 Criando um Databook

## Passo 1: Novo Databook

1. Clique no botão **"Novo Databook"** (canto superior direito)
2. Você será levado à página de criação

## Passo 2: Informações Básicas

Preencha os campos:

- **Número do Projeto:** Ex: \`PROJ-2024-001\`
- **Nome do Projeto:** Ex: \`Databook Turbina XYZ\`
- **Cliente:** Selecione na lista ou crie novo
- **Template:** Escolha o template padrão ou customizado
- **Data de Início:** Quando o projeto começa
- **Data de Entrega:** Prazo para conclusão

## Passo 3: Configurações do Databook

Na aba **"Configurações"**, customize:

### Informações do Produto
- Nome do produto
- Tipo (Ex: Turbina, Compressor)
- Descrição técnica
- Normas aplicáveis

### Informações do Cliente
- Nome da empresa
- Contato principal
- Email
- Telefone

### Aparência
- **Cores:** Primária e secundária
- **Logo da Empresa:** Upload da logo
- **Logo do Cliente:** Upload da logo
- **Marca d'água:** Imagem de fundo

## Passo 4: Salvar

Clique em **"Salvar Configurações"** para confirmar.
    `
  },
  {
    id: 'documentos',
    title: 'Gerenciando Documentos',
    icon: '📄',
    content: `
# 📄 Gerenciando Documentos

## Adicionando Documentos

1. Abra o databook que deseja editar
2. Navegue até a seção desejada
3. Clique em **"+ Adicionar Documento"**
4. Selecione o arquivo (PDF, JPG, PNG)
5. Preencha os dados:
   - **Título:** Nome do documento
   - **Número:** Código do documento
   - **Revisão:** Versão (Ex: Rev. 1)
   - **Data:** Data do documento
   - **Tags:** Palavras-chave

## Visualizando Documentos

Cada documento mostra:
- **Thumbnail:** Prévia do arquivo
- **Informações:** Título, número, revisão
- **Ações:** Visualizar, Editar, Deletar

## Organizando Documentos

Você pode:
- **Reordenar:** Arrastar e soltar
- **Filtrar:** Por categoria ou tag
- **Buscar:** Por título ou número

## Deletando Documentos

1. Clique no ícone **🗑️ (Lixo)**
2. Confirme a exclusão
3. Documento será removido permanentemente
    `
  },
  {
    id: 'topicos',
    title: 'Tópicos e Categorias',
    icon: '🏷️',
    content: `
# 🏷️ Tópicos e Categorias

## Entendendo Tópicos

Tópicos são as seções do seu databook. Exemplo:

\`\`\`
1. Atestado de Conformidade
   1.1 Certificados
   1.2 Desenhos
2. Procedimentos
   2.1 Soldagem
   2.2 Inspeção
\`\`\`

## Gerenciando Tópicos

Acesse **Menu → Gestão de Tópicos**

### Criar Novo Tópico

1. Clique **"Novo Tópico"**
2. Preencha:
   - **Número:** Ex: \`1.1\`
   - **Título:** Nome do tópico
   - **Descrição:** Detalhes (opcional)
   - **Categoria:** Selecione uma categoria
   - **Obrigatório:** Marque se é obrigatório
3. Clique **"Criar"**

### Reordenar Tópicos

1. Clique e segure o ícone **⋮⋮ (Arrastar)**
2. Arraste para a nova posição
3. A ordem é atualizada automaticamente

## Categorias

Categorias organizam seus tópicos por tipo:

| Categoria | Cor | Uso |
|-----------|-----|-----|
| 🟢 Certificados | Verde | Certificações e conformidade |
| 🔵 Desenhos | Azul | Desenhos técnicos |
| 🟠 Relatórios | Laranja | Relatórios de inspeção |
| 🟣 Procedimentos | Roxo | Procedimentos e instruções |
| 🔴 Normas | Vermelho | Normas e especificações |
    `
  },
  {
    id: 'configuracoes',
    title: 'Configurações',
    icon: '⚙️',
    content: `
# ⚙️ Configurações

## Mapeamento de Pastas

Configure pastas locais ou na nuvem para sincronização automática.

**Criar Mapeamento:**
1. Clique **"Novo Mapeamento"**
2. Preencha:
   - **Tipo de Documento:** Ex: \`Certificados\`
   - **Categoria:** Selecione
   - **Caminho:** Local ou URL da nuvem
   - **Frequência:** Manual, Ao criar, Diário, Semanal
3. Clique **"Criar"**

## Gerenciamento de Categorias

Crie e customize categorias.

**Criar Categoria:**
1. Clique **"Nova Categoria"**
2. Preencha:
   - **Nome:** Ex: \`Testes\`
   - **Descrição:** Detalhes
   - **Cor:** Escolha uma cor
3. Clique **"Criar"**

## Gerenciamento de Usuários

(Apenas para administradores)

Adicione e gerencie usuários do sistema.

**Adicionar Usuário:**
1. Clique **"Novo Usuário"**
2. Preencha:
   - **Email:** Email do usuário
   - **Nome:** Nome completo
   - **Perfil:** Admin, Gerente, Engenheiro, Cliente
3. Clique **"Criar"**
    `
  },
  {
    id: 'pdf',
    title: 'Gerando PDF',
    icon: '📑',
    content: `
# 📑 Gerando PDF

## Visualizar Preview

1. Abra o databook
2. Clique em **"Preview"**
3. Veja como ficará o PDF final

## Gerar PDF

1. Clique em **"Gerar PDF"**
2. Aguarde o processamento
3. O arquivo será baixado automaticamente

## Personalizações no PDF

O PDF incluirá:
- ✅ Logo da empresa
- ✅ Logo do cliente
- ✅ Marca d'água
- ✅ Cores personalizadas
- ✅ Numeração de páginas
- ✅ Todos os documentos organizados

## Dicas para Melhor Resultado

1. **Revise antes:** Sempre visualize o preview
2. **Organize bem:** Ordene os documentos corretamente
3. **Use cores:** Personalize as cores do databook
4. **Adicione logos:** Inclua logos para profissionalismo
    `
  },
  {
    id: 'dicas',
    title: 'Dicas e Truques',
    icon: '💡',
    content: `
# 💡 Dicas e Truques

## 💡 Dica 1: Use Categorias Consistentemente

Sempre use as mesmas categorias para manter a organização.

## 💡 Dica 2: Nomeie Documentos Claramente

Use nomes descritivos:
- ✅ Bom: \`Certificado_Soldagem_Rev1_2024\`
- ❌ Ruim: \`doc1\`, \`arquivo\`

## 💡 Dica 3: Revise Antes de Gerar PDF

Sempre visualize o preview antes de gerar o PDF final.

## 💡 Dica 4: Use Tags para Busca

Adicione tags relevantes aos documentos para facilitar busca posterior.

## 💡 Dica 5: Mantenha Backups

Exporte seus databooks regularmente como backup.

## 💡 Dica 6: Organize Hierarquicamente

Use a numeração hierárquica:
- \`1\` - Tópico principal
- \`1.1\` - Subtópico
- \`1.1.1\` - Sub-subtópico

## 💡 Dica 7: Aproveite a Sincronização

Configure mapeamento de pastas para sincronizar automaticamente.
    `
  },
  {
    id: 'faq',
    title: 'Perguntas Frequentes',
    icon: '❓',
    content: `
# ❓ Perguntas Frequentes

## P: Como faço para clonar um databook?

R: No Dashboard, clique no ícone **📋 (Clonar)** ao lado do projeto. Uma cópia será criada com status "Rascunho".

## P: Posso editar um databook finalizado?

R: Sim, mas recomenda-se criar uma nova revisão. Clique em **"Nova Revisão"** nas configurações.

## P: Qual é o tamanho máximo de arquivo?

R: Até 50 MB por arquivo. Comprima se necessário.

## P: Como faço backup dos meus databooks?

R: Exporte como PDF ou entre em contato com o administrador para backup do banco de dados.

## P: Posso compartilhar um databook com outro usuário?

R: Sim, adicione o usuário no painel de configurações e defina as permissões.

## P: Como faço para deletar um databook?

R: No Dashboard, clique no ícone **🗑️ (Lixo)**. Confirme a exclusão. Esta ação não pode ser desfeita.

## P: Qual é o tempo de processamento para gerar PDF?

R: Geralmente entre 5 a 30 segundos, dependendo do tamanho do databook.

## P: Posso usar caracteres especiais nos nomes?

R: Recomenda-se usar apenas letras, números, hífen e underscore para evitar problemas.
    `
  }
]

interface ManualModalProps {
  isOpen: boolean
  onClose: () => void
}

export default function ManualModal({ isOpen, onClose }: ManualModalProps) {
  const [activeSection, setActiveSection] = useState<string>('inicio')
  
  const currentSection = sections.find(s => s.id === activeSection)
  
  if (!isOpen) return null
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full max-w-5xl max-h-[90vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
          <div className="flex items-center gap-3">
            <BookOpen size={28} className="text-primary" />
            <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Manual do Usuário</h2>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
          >
            <X size={24} />
          </button>
        </div>
        
        {/* Content */}
        <div className="flex flex-1 overflow-hidden">
          {/* Sidebar */}
          <div className="w-64 border-r border-gray-200 dark:border-gray-700 overflow-y-auto flex-shrink-0 bg-gray-50 dark:bg-gray-900">
            <nav className="p-4 space-y-2">
              {sections.map((section) => (
                <button
                  key={section.id}
                  onClick={() => setActiveSection(section.id)}
                  className={`w-full text-left px-4 py-3 rounded-lg transition-all flex items-center justify-between group ${
                    activeSection === section.id
                      ? 'bg-primary/10 dark:bg-primary/20 text-primary font-semibold'
                      : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                  }`}
                >
                  <span className="flex items-center gap-2">
                    <span className="text-lg">{section.icon}</span>
                    <span className="text-sm">{section.title}</span>
                  </span>
                  {activeSection === section.id && (
                    <ChevronRight size={18} className="text-primary" />
                  )}
                </button>
              ))}
            </nav>
          </div>
          
          {/* Main Content */}
          <div className="flex-1 overflow-y-auto p-8 bg-white dark:bg-gray-800">
            {currentSection && (
              <div className="prose prose-sm max-w-none">
                <div className="text-gray-700 dark:text-gray-100 leading-relaxed space-y-4">
                  {currentSection.content.split('\n').map((line, idx) => {
                    if (line.startsWith('# ')) {
                      return (
                        <h1 key={idx} className="text-3xl font-bold text-gray-900 dark:text-white mt-6 mb-4">
                          {line.replace('# ', '')}
                        </h1>
                      )
                    }
                    if (line.startsWith('## ')) {
                      return (
                        <h2 key={idx} className="text-2xl font-semibold text-gray-800 dark:text-gray-50 mt-5 mb-3">
                          {line.replace('## ', '')}
                        </h2>
                      )
                    }
                    if (line.startsWith('### ')) {
                      return (
                        <h3 key={idx} className="text-lg font-semibold text-gray-700 dark:text-gray-100 mt-4 mb-2">
                          {line.replace('### ', '')}
                        </h3>
                      )
                    }
                    if (line.startsWith('- ')) {
                      return (
                        <li key={idx} className="ml-6 text-gray-700 dark:text-gray-100">
                          {line.replace('- ', '')}
                        </li>
                      )
                    }
                    if (line.startsWith('> ')) {
                      return (
                        <div key={idx} className="bg-primary/5 dark:bg-primary/10 border-l-4 border-primary p-4 my-4">
                          <p className="text-gray-900 dark:text-gray-50 font-medium">{line.replace('> ', '')}</p>
                        </div>
                      )
                    }
                    if (line.startsWith('| ')) {
                      return null
                    }
                    if (line.trim() === '') {
                      return <div key={idx} className="h-2" />
                    }
                    if (line.trim().startsWith('```')) {
                      return null
                    }
                    return (
                      <p key={idx} className="text-gray-700 dark:text-gray-100">
                        {line}
                      </p>
                    )
                  })}
                </div>
              </div>
            )}
          </div>
        </div>
        
        {/* Footer */}
        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900 flex justify-end flex-shrink-0">
          <button
            onClick={onClose}
            className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium"
          >
            Fechar
          </button>
        </div>
      </div>
    </div>
  )
}
