import React, { useEffect, useState } from 'react';
import { useMonitoring } from '../hooks/useMonitoring';
import { useVehicles } from '../hooks/useVehicles';
import { 
  ClipboardCheck, 
  Satellite, 
  CheckCircle2, 
  XCircle, 
  Info,
  Calendar,
  User,
  Activity,
  Zap,
  Signal,
  SignalLow,
  Wifi,
  WifiOff,
  Search,
  ArrowRight,
  ShieldAlert
} from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils';
import { motion, AnimatePresence } from 'framer-motion';

/**
 * QualityControlView V2.
 * Separates historical audit (Checklists) from active/real-time tracking (Monitoramento).
 */
export const QualityControlView = ({ initialTab = 'checklists' }) => {
  const { mokiData, fetchMokiData, loading } = useMonitoring();
  const { vehicles, fetchVehicles } = useVehicles();
  const [activeTab, setActiveTab] = useState(initialTab);

  // Sync activeTab with initialTab when it changes from outside
  useEffect(() => {
    setActiveTab(initialTab);
  }, [initialTab]);

  useEffect(() => {
    fetchMokiData();
    fetchVehicles();
  }, [fetchMokiData, fetchVehicles]);

  const stats = {
    online: vehicles.filter(v => v.statusTel === 'Ativo').length,
    total: vehicles.length,
    offline: vehicles.filter(v => v.statusTel !== 'Ativo').length
  };
  
  const onlinePercentage = stats.total > 0 ? Math.round((stats.online / stats.total) * 100) : 0;

  return (
    <div className="space-y-6 pb-10 animate-in fade-in duration-500">
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <div className="flex items-center gap-2 text-primary">
            <ShieldAlert size={16} />
            <span className="text-[10px] font-black uppercase tracking-[0.2em]">Conformidade & Rastreio</span>
          </div>
          <h2 className="text-3xl font-black tracking-tighter text-slate-900 dark:text-white">Qualidade & Monitoramento</h2>
          <p className="text-sm text-slate-500 font-medium font-inter">Gestão de inspeções técnicas e telemetria avançada</p>
        </div>
      </div>

      <Tabs 
        value={activeTab} 
        onValueChange={setActiveTab}
        className="space-y-8"
      >
        <div className="bg-slate-100 dark:bg-white/5 p-1 rounded-2xl w-fit border border-slate-200 dark:border-white/10">
          <TabsList className="bg-transparent h-12">
            <TabsTrigger 
              value="checklists" 
              className="rounded-xl font-black text-[10px] uppercase tracking-widest gap-2 px-8 data-[state=active]:bg-white dark:data-[state=active]:bg-primary data-[state=active]:text-primary dark:data-[state=active]:text-white data-[state=active]:shadow-lg active:scale-95 transition-all"
            >
              <ClipboardCheck size={16} /> Histórico de Inspeções
            </TabsTrigger>
            <TabsTrigger 
              value="monitoramento" 
              className="rounded-xl font-black text-[10px] uppercase tracking-widest gap-2 px-8 data-[state=active]:bg-white dark:data-[state=active]:bg-primary data-[state=active]:text-primary dark:data-[state=active]:text-white data-[state=active]:shadow-lg active:scale-95 transition-all"
            >
              <Satellite size={16} /> Monitoramento em Tempo Real
            </TabsTrigger>
          </TabsList>
        </div>

        {/* --- TAB: CHECKLISTS (Historical Log) --- */}
        <TabsContent value="checklists" className="space-y-6 outline-none">
          <Card className="border-none shadow-2xl shadow-slate-200/50 dark:shadow-none overflow-hidden ring-1 ring-slate-200 dark:ring-white/5 bg-white dark:bg-slate-900/50 backdrop-blur-xl rounded-[2rem]">
            <CardHeader className="bg-slate-50/50 dark:bg-white/[0.02] border-b border-slate-100 dark:border-white/5 px-8 py-6">
              <div className="flex items-center justify-between">
                <CardTitle className="text-sm font-black text-slate-800 dark:text-white uppercase tracking-wider">Log de Auditoria</CardTitle>
                <div className="relative w-64">
                   <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={14} />
                   <input 
                    placeholder="Buscar registro..." 
                    className="w-full pl-9 pr-4 py-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl text-xs font-bold focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                   />
                </div>
              </div>
            </CardHeader>
            <div className="overflow-x-auto">
              {loading ? <div className="p-8 text-center text-slate-500">Carregando checklists...</div> : (
              <table className="w-full text-left border-collapse min-w-[900px]">
                <thead>
                  <tr className="bg-slate-50/20 dark:bg-white/[0.01]">
                    <th className="px-8 py-5 text-[0.65rem] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Data / Unidade</th>
                    <th className="px-8 py-5 text-[0.65rem] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Tipo de Inspeção</th>
                    <th className="px-8 py-5 text-[0.65rem] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5">Autor / Inspetor</th>
                    <th className="px-8 py-5 text-[0.65rem] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5 text-center">Aprovação %</th>
                    <th className="px-8 py-5 text-[0.65rem] uppercase font-black text-slate-400 tracking-[0.15em] border-b border-slate-100 dark:border-white/5 text-right">Resultado</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 dark:divide-white/5">
                  {mokiData.length === 0 ? <tr><td colSpan="5" className="p-6 text-center text-xs text-slate-500">Nenhum checklist encontrado.</td></tr> : mokiData.map((c, index) => (
                    <tr key={c.id || index} className="hover:bg-slate-50/50 dark:hover:bg-white/[0.02] transition-colors group">
                      <td className="px-8 py-6">
                        <div className="flex flex-col">
                          <span className="text-sm font-black text-slate-800 dark:text-white leading-tight">{c.unidade || c.nome_unidade}</span>
                          <span className="text-[10px] font-bold text-slate-400 mt-1 uppercase leading-none tracking-widest">{c.data}</span>
                        </div>
                      </td>
                      <td className="px-8 py-6">
                        <Badge variant="outline" className="bg-slate-100 dark:bg-white/5 border-none font-black text-[0.65rem] uppercase px-3 py-1 rounded-lg text-slate-600 dark:text-slate-400 tracking-tight">
                           {c.checklist}
                        </Badge>
                      </td>
                      <td className="px-8 py-6">
                        <div className="flex items-center gap-3">
                           <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[0.65rem] font-black text-primary border border-primary/20 uppercase">
                             {(c.autor || 'U').substring(0, 2)}
                           </div>
                           <span className="text-sm font-bold text-slate-700 dark:text-slate-300">{c.autor}</span>
                        </div>
                      </td>
                      <td className="px-8 py-6 text-center">
                        <div className="inline-flex flex-col items-center gap-1.5">
                           <span className={cn("text-sm font-black", (c.aprovacao || 0) >= 80 ? "text-emerald-500" : "text-rose-500")}>
                             {c.aprovacao || 0}%
                           </span>
                           <div className="h-1.5 w-16 bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden shadow-inner">
                              <motion.div 
                                initial={{ width: 0 }}
                                animate={{ width: `${c.aprovacao || 0}%` }}
                                className={cn("h-full", (c.aprovacao || 0) >= 80 ? "bg-emerald-500" : "bg-rose-500")} 
                              />
                           </div>
                        </div>
                      </td>
                      <td className="px-8 py-6 text-right">
                         <Badge className={cn(
                           "border-none font-black text-[0.65rem] uppercase tracking-widest px-4 py-1.5 rounded-xl shadow-sm",
                           c.status === 'Aprovado' 
                            ? "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20" 
                            : "bg-rose-500/10 text-rose-600 dark:bg-rose-500/20"
                         )}>
                           {c.status}
                         </Badge>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
              )}
            </div>
          </Card>
        </TabsContent>

        {/* --- TAB: MONITORING (Real-time Status Dashboard) --- */}
        <TabsContent value="monitoramento" className="space-y-10 outline-none">
          {/* Signal & Health Overview */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <Card className="border-none shadow-xl shadow-slate-200/50 dark:shadow-none bg-white dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-white/5 rounded-3xl overflow-hidden p-6 group hover:ring-2 hover:ring-primary/20 transition-all">
                  <div className="flex items-center justify-between mb-4">
                      <div className="p-3 rounded-2xl group-hover:scale-110 transition-transform duration-300 bg-emerald-500/10 text-emerald-500">
                          <Signal size={22} />
                      </div>
                      <Activity size={18} className="text-slate-200 dark:text-slate-800" />
                  </div>
                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-1">Sinal Online</p>
                  <h4 className="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">{onlinePercentage}%</h4>
              </Card>

              <Card className="border-none shadow-xl shadow-slate-200/50 dark:shadow-none bg-white dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-white/5 rounded-3xl overflow-hidden p-6 group hover:ring-2 hover:ring-primary/20 transition-all">
                  <div className="flex items-center justify-between mb-4">
                      <div className="p-3 rounded-2xl group-hover:scale-110 transition-transform duration-300 bg-primary/10 text-primary">
                          <Wifi size={22} />
                      </div>
                      <Activity size={18} className="text-slate-200 dark:text-slate-800" />
                  </div>
                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-1">Telemetria OK</p>
                  <h4 className="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">{stats.online}</h4>
              </Card>

              <Card className="border-none shadow-xl shadow-slate-200/50 dark:shadow-none bg-white dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-white/5 rounded-3xl overflow-hidden p-6 group hover:ring-2 hover:ring-primary/20 transition-all">
                  <div className="flex items-center justify-between mb-4">
                      <div className="p-3 rounded-2xl group-hover:scale-110 transition-transform duration-300 bg-rose-500/10 text-rose-500">
                          <WifiOff size={22} />
                      </div>
                      <Activity size={18} className="text-slate-200 dark:text-slate-800" />
                  </div>
                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-1">Sem Comunicação</p>
                  <h4 className="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">{stats.offline}</h4>
              </Card>

              <Card className="border-none shadow-xl shadow-slate-200/50 dark:shadow-none bg-white dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-white/5 rounded-3xl overflow-hidden p-6 group hover:ring-2 hover:ring-primary/20 transition-all">
                  <div className="flex items-center justify-between mb-4">
                      <div className="p-3 rounded-2xl group-hover:scale-110 transition-transform duration-300 bg-amber-500/10 text-amber-500">
                          <Zap size={22} />
                      </div>
                      <Activity size={18} className="text-slate-200 dark:text-slate-800" />
                  </div>
                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-500 mb-1">Alertas Ativos</p>
                  <h4 className="text-3xl font-black text-slate-900 dark:text-white tracking-tighter">0</h4>
              </Card>
          </div>

          {/* Real-time Status Grid */}
          <div className="space-y-6">
            <div className="flex items-center justify-between px-2">
               <div>
                  <h3 className="text-xl font-black text-slate-900 dark:text-white tracking-tight">Status da Transmissão</h3>
                  <p className="text-xs text-slate-500 font-bold uppercase tracking-widest mt-1 opacity-70">Sincronização Sascar / Geotab / T4S</p>
               </div>
               <Badge className="bg-emerald-500/10 text-emerald-600 border-none font-black text-[10px] uppercase tracking-widest gap-2 py-1.5 px-4 rounded-full">
                  <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" /> Gateway em Operação
               </Badge>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {vehicles.map((v) => (
                <Card key={v.id} className="border-none bg-slate-50/50 dark:bg-white/[0.02] ring-1 ring-slate-200 dark:ring-white/5 rounded-[2rem] p-5 group hover:bg-white dark:hover:bg-white/5 hover:shadow-2xl transition-all duration-500">
                   <div className="flex items-start justify-between mb-4">
                      <div>
                         <span className="text-xs font-black text-slate-900 dark:text-white font-mono tracking-tighter block mb-1 underline decoration-primary/20 underline-offset-4">{v.placa}</span>
                         <span className="text-[9px] font-black text-slate-400 uppercase tracking-widest">{v.modelo}</span>
                      </div>
                      <div className={cn(
                        "p-2 rounded-full",
                        v.statusTel === 'Ativo' ? "bg-emerald-500/10 text-emerald-500" : "bg-rose-500/10 text-rose-500"
                      )}>
                        {v.statusTel === 'Ativo' ? <Wifi size={14} /> : <WifiOff size={14} />}
                      </div>
                   </div>

                   <div className="space-y-4">
                      <div className="flex items-center justify-between text-[10px]">
                         <span className="font-bold text-slate-400 uppercase tracking-widest">Sinal</span>
                         <span className={cn("font-black uppercase", v.statusTel === 'Ativo' ? "text-emerald-500" : "text-rose-500")}>
                            {v.statusTel === 'Ativo' ? 'Excelente' : 'Desconectado'}
                         </span>
                      </div>
                      <div className="h-1.5 w-full bg-slate-200 dark:bg-white/5 rounded-full overflow-hidden">
                         <div className={cn("h-full", v.statusTel === 'Ativo' ? "bg-emerald-500 w-[95%]" : "bg-rose-500 w-[10%]")} />
                      </div>
                      
                      <div className="pt-2 flex items-center justify-between">
                         <div className="flex gap-1.5">
                            <Signal size={12} className={v.statusTel === 'Ativo' ? "text-primary" : "text-slate-300"} />
                            <Satellite size={12} className={v.statusTel === 'Ativo' ? "text-primary" : "text-slate-300"} />
                         </div>
                         <button className="text-[9px] font-black uppercase text-primary hover:underline hover:underline-offset-4 flex items-center gap-1 group/btn">
                            Abrir Mapa <ArrowRight size={10} className="group-hover/btn:translate-x-1 transition-transform" />
                         </button>
                      </div>
                   </div>
                </Card>
              ))}
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};