import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import {
  SlidersHorizontal,
  Search,
  CheckCircle2,
  Save,
  RotateCcw,
  Shield,
  Factory,
  Eye,
  Edit3,
  Trash2,
  Mail,
  Phone,
  MessageSquare,
  AlertTriangle,
  FileText,
  Layers,
  Flame,
  Zap,
  Box,
  ExternalLink,
  Truck,
  Wrench,
  FileSpreadsheet,
  Info,
  Sparkles,
  Lock,
  Plus,
  BookmarkPlus,
  X,
} from 'lucide-react';
import { useSmartPermissions } from '@/hooks/useSmartPermissions';
import { SMART_SUBMODULES, SmartCustomTemplate } from '@/types/smartPermissions';
import { CriarSmartTemplateModal } from './CriarSmartTemplateModal';

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

export const MatrizSmartAvancadoModal: React.FC<MatrizSmartAvancadoModalProps> = ({
  isOpen,
  onClose,
}) => {
  const {
    loading,
    saving,
    users,
    templates,
    selectedUserId,
    setSelectedUserId,
    selectedUser,
    togglePermission,
    updateNotificationConfig,
    salvarConfiguracaoUsuario,
    aplicarTemplate,
    criarNovoTemplate,
    removerTemplateCustom,
    recarregar,
  } = useSmartPermissions();

  const [busca, setBusca] = useState('');
  const [modalCriarTemplateOpen, setModalCriarTemplateOpen] = useState(false);

  const usersFiltrados = users.filter((u) => {
    const termo = busca.toLowerCase();
    return (
      u.fullName.toLowerCase().includes(termo) ||
      u.email.toLowerCase().includes(termo) ||
      u.functionName.toLowerCase().includes(termo)
    );
  });

  const getIconComponent = (icone: string) => {
    switch (icone) {
      case 'FileText':
        return <FileText className="h-4 w-4 text-sky-500 dark:text-sky-400" />;
      case 'Layers':
        return <Layers className="h-4 w-4 text-indigo-500 dark:text-indigo-400" />;
      case 'Flame':
        return <Flame className="h-4 w-4 text-orange-500 dark:text-orange-400" />;
      case 'CheckCircle2':
        return <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />;
      case 'Zap':
        return <Zap className="h-4 w-4 text-amber-500 dark:text-amber-400" />;
      case 'Box':
        return <Box className="h-4 w-4 text-cyan-600 dark:text-cyan-400" />;
      case 'ExternalLink':
        return <ExternalLink className="h-4 w-4 text-purple-600 dark:text-purple-400" />;
      case 'Truck':
        return <Truck className="h-4 w-4 text-amber-600 dark:text-amber-500" />;
      case 'Wrench':
        return <Wrench className="h-4 w-4 text-teal-600 dark:text-teal-400" />;
      case 'FileSpreadsheet':
        return <FileSpreadsheet className="h-4 w-4 text-emerald-600 dark:text-emerald-500" />;
      case 'Shield':
        return <Shield className="h-3.5 w-3.5 text-rose-500 dark:text-rose-400" />;
      case 'Factory':
        return <Factory className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />;
      case 'Eye':
        return <Eye className="h-3.5 w-3.5 text-sky-600 dark:text-sky-400" />;
      default:
        return <Sparkles className="h-3.5 w-3.5 text-amber-500 dark:text-amber-400" />;
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-6xl w-[96vw] max-h-[94vh] h-[900px] p-0 flex flex-col bg-card border-border shadow-2xl rounded-2xl overflow-hidden">
        {/* CABEÇALHO DO MODAL */}
        <div className="px-6 py-4 border-b border-border bg-muted/40 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2.5 rounded-xl bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border border-emerald-500/30">
              <SlidersHorizontal className="h-5 w-5" />
            </div>
            <div>
              <DialogTitle className="text-base sm:text-lg font-bold flex items-center gap-2 text-foreground">
                Gestão Avançada de Privilégios & Notificações
                <Badge variant="outline" className="bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/40 text-[10px] uppercase tracking-wider font-bold">
                  Modo Smart
                </Badge>
              </DialogTitle>
              <DialogDescription className="text-xs text-muted-foreground mt-0.5">
                Controle granular de acesso por submódulo e canais de notificação (E-mail e WhatsApp via única).
              </DialogDescription>
            </div>
          </div>
        </div>

        {/* CORPO PRINCIPAL COM SIDEBAR DE USUÁRIOS E ÁREA DE CONFIGURAÇÃO */}
        <div className="flex-1 flex overflow-hidden">
          {/* SIDEBAR DE USUÁRIOS */}
          <div className="w-[280px] sm:w-[310px] border-r border-border bg-background/60 flex flex-col shrink-0">
            <div className="p-3 border-b border-border">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
                <Input
                  placeholder="Buscar colaborador..."
                  value={busca}
                  onChange={(e) => setBusca(e.target.value)}
                  className="pl-8 text-xs h-8 bg-card border-slate-300 dark:border-border text-foreground font-medium"
                />
              </div>
            </div>

            <div className="flex-1 overflow-y-auto divide-y divide-border/40 p-1.5 space-y-0.5">
              {loading ? (
                <div className="py-12 text-center text-xs text-muted-foreground">
                  Carregando colaboradores...
                </div>
              ) : usersFiltrados.length === 0 ? (
                <div className="py-12 text-center text-xs text-muted-foreground">
                  Nenhum colaborador encontrado.
                </div>
              ) : (
                usersFiltrados.map((user) => {
                  const isSelected = user.userId === selectedUserId;
                  return (
                    <button
                      key={user.userId}
                      onClick={() => setSelectedUserId(user.userId)}
                      className={`w-full text-left p-2.5 rounded-xl transition-all flex items-center gap-2.5 ${
                        isSelected
                          ? 'bg-emerald-500/15 border border-emerald-500/40 text-foreground shadow-sm'
                          : 'hover:bg-muted/60 text-muted-foreground hover:text-foreground'
                      }`}
                    >
                      <Avatar className="h-8 w-8 rounded-lg border border-border">
                        <AvatarImage src={user.profileImageUrl || ''} />
                        <AvatarFallback className="rounded-lg bg-primary/10 text-primary text-xs font-bold">
                          {user.fullName.substring(0, 2).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <div className="min-w-0 flex-1">
                        <p className={`text-xs font-bold truncate ${isSelected ? 'text-emerald-700 dark:text-emerald-400 font-extrabold' : 'text-slate-800 dark:text-foreground'}`}>
                          {user.fullName}
                        </p>
                        <p className="text-[10px] text-slate-500 dark:text-muted-foreground truncate">
                          {user.functionName}
                        </p>
                      </div>
                      {user.whatsappNumber && (
                        <div className="p-1 rounded-md bg-emerald-500/15 text-emerald-700 dark:text-emerald-400" title={`WhatsApp: ${user.whatsappNumber}`}>
                          <MessageSquare className="h-3 w-3" />
                        </div>
                      )}
                    </button>
                  );
                })
              )}
            </div>
          </div>

          {/* ÁREA DE CONFIGURAÇÃO DO USUÁRIO SELECIONADO */}
          <div className="flex-1 flex flex-col bg-card overflow-y-auto">
            {selectedUser ? (
              <div className="p-5 sm:p-6 space-y-6">
                {/* CABEÇALHO DO USUÁRIO + PERFIL */}
                <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-2xl border border-border bg-muted/20">
                  <div className="flex items-center gap-3">
                    <Avatar className="h-12 w-12 rounded-xl border border-border shadow-sm">
                      <AvatarImage src={selectedUser.profileImageUrl || ''} />
                      <AvatarFallback className="rounded-xl bg-primary/10 text-primary text-sm font-bold">
                        {selectedUser.fullName.substring(0, 2).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="text-base font-bold text-slate-900 dark:text-foreground">
                        {selectedUser.fullName}
                      </h3>
                      <p className="text-xs text-muted-foreground flex items-center gap-2">
                        <span className="text-slate-600 dark:text-slate-400">{selectedUser.email}</span>
                        <span>•</span>
                        <span className="text-emerald-600 dark:text-emerald-400 font-bold">{selectedUser.functionName}</span>
                      </p>
                    </div>
                  </div>

                  {/* BOTÃO PRINCIPAL DE SALVAR ALTERAÇÕES */}
                  <Button
                    size="sm"
                    onClick={() => salvarConfiguracaoUsuario(selectedUser.userId)}
                    disabled={saving}
                    className="text-xs h-9 px-4 bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-sm flex items-center gap-1.5 transition-transform active:scale-95"
                  >
                    <Save className={`h-4 w-4 ${saving ? 'animate-spin' : ''}`} />
                    {saving ? 'Salvando...' : 'Salvar Alterações'}
                  </Button>
                </div>

                {/* BARRA DE TEMPLATES RÁPIDOS & CRIAR NOVO TEMPLATE */}
                <div className="p-3.5 rounded-2xl border border-border bg-background/50 space-y-2.5">
                  <div className="flex items-center justify-between flex-wrap gap-2">
                    <div className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300">
                      <Sparkles className="h-3.5 w-3.5 text-amber-500" />
                      Templates de Acesso em 1 Clique
                    </div>
                    <Button
                      size="sm"
                      variant="outline"
                      onClick={() => setModalCriarTemplateOpen(true)}
                      className="text-xs h-7 px-2.5 border-emerald-500/40 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 font-bold flex items-center gap-1 shadow-sm"
                    >
                      <Plus className="h-3.5 w-3.5" />
                      Criar Novo Template
                    </Button>
                  </div>

                  {/* CHIPS DE TEMPLATES */}
                  <div className="flex items-center gap-2 overflow-x-auto pb-1 max-w-full">
                    {templates.map((tpl) => (
                      <div
                        key={tpl.id}
                        className="group relative shrink-0 flex items-center"
                      >
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => aplicarTemplate(selectedUser.userId, tpl)}
                          className="text-xs h-8 pl-2.5 pr-2.5 rounded-xl border-slate-300 dark:border-border hover:bg-muted/80 flex items-center gap-1.5 shadow-xs font-medium"
                          title={tpl.descricao}
                        >
                          {getIconComponent(tpl.icone)}
                          <span className="font-semibold text-slate-800 dark:text-slate-200">
                            {tpl.nome}
                          </span>
                          {tpl.badge && (
                            <Badge
                              variant="secondary"
                              className="ml-1 text-[9px] px-1 py-0 h-4 bg-muted text-muted-foreground"
                            >
                              {tpl.badge}
                            </Badge>
                          )}
                        </Button>

                        {/* Botão para deletar template customizado */}
                        {tpl.isCustom && (
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation();
                              removerTemplateCustom(tpl.id);
                            }}
                            className="ml-1 p-1 text-muted-foreground hover:text-rose-500 rounded-md transition-colors"
                            title="Remover este template"
                          >
                            <X className="h-3 w-3" />
                          </button>
                        )}
                      </div>
                    ))}
                  </div>
                </div>

                {/* SEÇÃO 1: MATRIZ DE ACESSO AOS SUBMÓDULOS */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
                      <Lock className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
                      1. Permissões Granulares nos Submódulos (Modo Smart)
                    </h4>
                    <span className="text-[11px] text-slate-500 dark:text-muted-foreground font-medium">
                      Controle de Visualização, Edição/Apontamento e Exclusão
                    </span>
                  </div>

                  <div className="rounded-2xl border border-border bg-background/50 overflow-hidden shadow-xs">
                    <table className="w-full text-left border-collapse">
                      <thead>
                        <tr className="border-b border-border/80 bg-muted/40 text-[11px] text-slate-600 dark:text-muted-foreground font-bold">
                          <th className="p-3">Submódulo / Recurso</th>
                          <th className="p-3 text-center w-[110px]">
                            <span className="inline-flex items-center gap-1 text-sky-600 dark:text-sky-400 font-bold">
                              <Eye className="h-3.5 w-3.5" />
                              Visualizar
                            </span>
                          </th>
                          <th className="p-3 text-center w-[130px]">
                            <span className="inline-flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-bold">
                              <Edit3 className="h-3.5 w-3.5" />
                              Apontar / Editar
                            </span>
                          </th>
                          <th className="p-3 text-center w-[110px]">
                            <span className="inline-flex items-center gap-1 text-rose-600 dark:text-rose-400 font-bold">
                              <Trash2 className="h-3.5 w-3.5" />
                              Excluir
                            </span>
                          </th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-border/40 text-xs">
                        {SMART_SUBMODULES.map((sub) => {
                          const perm = selectedUser.permissions[sub.key] || {
                            can_view: false,
                            can_edit: false,
                            can_delete: false,
                          };

                          return (
                            <tr
                              key={sub.key}
                              className="hover:bg-muted/30 transition-colors"
                            >
                              <td className="p-3">
                                <div className="flex items-center gap-2.5">
                                  <div className="p-1.5 rounded-lg bg-card border border-border/60 shadow-xs">
                                    {getIconComponent(sub.icone)}
                                  </div>
                                  <div>
                                    <p className="font-bold text-slate-900 dark:text-foreground text-xs">
                                      {sub.nome}
                                    </p>
                                    <p className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium">
                                      {sub.descricao}
                                    </p>
                                  </div>
                                </div>
                              </td>

                              {/* VISUALIZAR */}
                              <td className="p-3 text-center">
                                <div className="flex justify-center">
                                  <Switch
                                    checked={perm.can_view}
                                    onCheckedChange={() =>
                                      togglePermission(selectedUser.userId, sub.key, 'can_view')
                                    }
                                  />
                                </div>
                              </td>

                              {/* EDITAR / APONTAR */}
                              <td className="p-3 text-center">
                                <div className="flex justify-center">
                                  <Switch
                                    checked={perm.can_edit}
                                    onCheckedChange={() =>
                                      togglePermission(selectedUser.userId, sub.key, 'can_edit')
                                    }
                                  />
                                </div>
                              </td>

                              {/* EXCLUIR */}
                              <td className="p-3 text-center">
                                <div className="flex justify-center">
                                  <Switch
                                    checked={perm.can_delete}
                                    onCheckedChange={() =>
                                      togglePermission(selectedUser.userId, sub.key, 'can_delete')
                                    }
                                  />
                                </div>
                              </td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </div>

                {/* SEÇÃO 2: NOTIFICAÇÕES & CANAL WHATSAPP VIA ÚNICA */}
                <div className="space-y-4 pt-2">
                  <h4 className="text-xs font-bold uppercase tracking-wider text-slate-700 dark:text-slate-300 flex items-center gap-1.5">
                    <MessageSquare className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
                    2. Notificações do Usuário (E-mail & WhatsApp BrainSteel)
                  </h4>

                  {/* BANNER INFORMATIVO: ALTO CONTRASTE NO MODO CLARO E ESCURO */}
                  <div className="p-4 rounded-2xl border border-amber-400/80 dark:border-amber-500/30 bg-amber-100/80 dark:bg-amber-500/10 text-amber-950 dark:text-amber-200 flex items-start gap-3 shadow-xs">
                    <AlertTriangle className="h-5 w-5 text-amber-700 dark:text-amber-400 shrink-0 mt-0.5" />
                    <div className="text-xs space-y-1">
                      <p className="font-extrabold text-amber-900 dark:text-amber-300 text-xs">
                        Comunicação Estritamente Unidirecional (Via Única) no WhatsApp
                      </p>
                      <p className="text-amber-950 dark:text-amber-200/90 leading-relaxed text-[11px] font-medium">
                        O número oficial da BrainSteel é configurado para <strong>somente enviar</strong> alertas, relatórios e métricas de produção. Mensagens de resposta enviadas pelo colaborador não serão recebidas nem respondidas pelo sistema.
                      </p>
                    </div>
                  </div>

                  {/* GRID DE CONFIGURAÇÕES DE CANAL */}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {/* CANAL WHATSAPP */}
                    <div className="p-4 rounded-2xl border border-border bg-background/50 space-y-4 shadow-xs">
                      <div className="flex items-center gap-2 text-emerald-700 dark:text-emerald-400 font-bold text-xs">
                        <Phone className="h-4 w-4" />
                        Canal WhatsApp do Colaborador
                      </div>

                      <div className="space-y-1.5">
                        <Label className="text-[11px] font-semibold text-slate-700 dark:text-slate-300">
                          Número de WhatsApp com DDD
                        </Label>
                        <Input
                          placeholder="Ex: 5511999998888 ou (11) 99999-8888"
                          value={selectedUser.whatsappNumber}
                          onChange={(e) =>
                            updateNotificationConfig(
                              selectedUser.userId,
                              'whatsappNumber',
                              e.target.value
                            )
                          }
                          className="h-8 text-xs bg-background dark:bg-card border-slate-300 dark:border-border text-foreground font-medium placeholder:text-slate-500 dark:placeholder:text-muted-foreground/80"
                        />
                        <span className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium block">
                          Informe o número com DDD para receber avisos automáticos.
                        </span>
                      </div>

                      <div className="pt-2 border-t border-border/40 space-y-3">
                        <div className="flex items-center justify-between">
                          <div className="space-y-0.5">
                            <Label className="text-xs font-semibold text-slate-800 dark:text-foreground">
                              Alertas de Apontamentos
                            </Label>
                            <p className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium">
                              Notificar sobre novos apontamentos ou avanços forçados
                            </p>
                          </div>
                          <Switch
                            checked={selectedUser.notifWhatsappApontamentos}
                            onCheckedChange={(val) =>
                              updateNotificationConfig(
                                selectedUser.userId,
                                'notifWhatsappApontamentos',
                                val
                              )
                            }
                          />
                        </div>

                        <div className="flex items-center justify-between">
                          <div className="space-y-0.5">
                            <Label className="text-xs font-semibold text-slate-800 dark:text-foreground">
                              Resumo Diário de Métricas
                            </Label>
                            <p className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium">
                              Receber fechamento diário de produção (peso e peças)
                            </p>
                          </div>
                          <Switch
                            checked={selectedUser.notifWhatsappMetricas}
                            onCheckedChange={(val) =>
                              updateNotificationConfig(
                                selectedUser.userId,
                                'notifWhatsappMetricas',
                                val
                              )
                            }
                          />
                        </div>
                      </div>
                    </div>

                    {/* CANAL E-MAIL */}
                    <div className="p-4 rounded-2xl border border-border bg-background/50 space-y-4 shadow-xs">
                      <div className="flex items-center gap-2 text-sky-600 dark:text-sky-400 font-bold text-xs">
                        <Mail className="h-4 w-4" />
                        Canal de E-mail ({selectedUser.email})
                      </div>

                      <div className="space-y-3 pt-2">
                        <div className="flex items-center justify-between">
                          <div className="space-y-0.5">
                            <Label className="text-xs font-semibold text-slate-800 dark:text-foreground">
                              Alertas de Apontamentos por E-mail
                            </Label>
                            <p className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium">
                              Receber e-mail informativo a cada lote apontado
                            </p>
                          </div>
                          <Switch
                            checked={selectedUser.notifEmailApontamentos}
                            onCheckedChange={(val) =>
                              updateNotificationConfig(
                                selectedUser.userId,
                                'notifEmailApontamentos',
                                val
                              )
                            }
                          />
                        </div>

                        <div className="flex items-center justify-between">
                          <div className="space-y-0.5">
                            <Label className="text-xs font-semibold text-slate-800 dark:text-foreground">
                              Relatórios e Métricas por E-mail
                            </Label>
                            <p className="text-[10px] text-slate-500 dark:text-muted-foreground font-medium">
                              Receber resumos periódicos e PDFs automáticos
                            </p>
                          </div>
                          <Switch
                            checked={selectedUser.notifEmailMetricas}
                            onCheckedChange={(val) =>
                              updateNotificationConfig(
                                selectedUser.userId,
                                'notifEmailMetricas',
                                val
                              )
                            }
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground">
                Selecione um colaborador na barra lateral para configurar.
              </div>
            )}
          </div>
        </div>

        {/* RODAPÉ DO MODAL */}
        <div className="px-6 py-3 border-t border-border bg-muted/40 flex items-center justify-between text-xs">
          <span className="text-muted-foreground text-[11px]">
            As alterações passam a valer imediatamente no Modo Smart após salvar.
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={onClose}
            className="text-xs h-8 font-medium"
          >
            Fechar
          </Button>
        </div>
      </DialogContent>

      {/* MODAL PARA SALVAR NOVO TEMPLATE PERSONALIZADO */}
      {selectedUser && (
        <CriarSmartTemplateModal
          isOpen={modalCriarTemplateOpen}
          onClose={() => setModalCriarTemplateOpen(false)}
          currentPermissions={selectedUser.permissions}
          onSalvarTemplate={criarNovoTemplate}
        />
      )}
    </Dialog>
  );
};