import React, { useEffect, useState, useMemo } from 'react';
import { useParams, Link } from 'react-router-dom';
import { getAttendances, getUserById, getFunnels, getOrigins } from '../services/dataService';
import { Attendance, User, FunnelStage, DashboardFilter, FunnelStageDef, OriginItemDef } from '../types';
import { ArrowLeft, Mail, Phone, Clock, MessageSquare, ChevronLeft, ChevronRight, Eye, Filter } from 'lucide-react';
import { DateRangePicker } from '../components/DateRangePicker';

const ITEMS_PER_PAGE = 10;

export const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [user, setUser] = useState<User | undefined>();
  const [attendances, setAttendances] = useState<Attendance[]>([]);
  const [funnelDefs, setFunnelDefs] = useState<FunnelStageDef[]>([]);
  const [originDefs, setOriginDefs] = useState<OriginItemDef[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentPage, setCurrentPage] = useState(1);
  const [filters, setFilters] = useState<DashboardFilter>({
    dateRange: { start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), end: new Date() },
    userId: id,
    funnelStage: 'all',
    origin: 'all'
  });

  useEffect(() => {
    if (id) {
      setLoading(true);
      
      const loadData = async () => {
        try {
          const tenantId = localStorage.getItem('ctms_tenant_id');
          const u = await getUserById(id);
          setUser(u);
          
          if (u && tenantId) {
            const [data, fetchedFunnels, fetchedOrigins] = await Promise.all([
              getAttendances(tenantId, { 
                ...filters,
                userId: id
              }),
              getFunnels(tenantId),
              getOrigins(tenantId)
            ]);
            setAttendances(data);

            const targetTeamId = u.team_id || null;
            let activeFunnel = fetchedFunnels[0];
            if (targetTeamId) {
              const matchedFunnel = fetchedFunnels.find(f => f.teamIds?.includes(targetTeamId));
              if (matchedFunnel) activeFunnel = matchedFunnel;
            }
            setFunnelDefs(activeFunnel && activeFunnel.stages ? activeFunnel.stages.sort((a: any, b: any) => a.order_index - b.order_index) : []);

            let activeOriginGroup = fetchedOrigins[0];
            if (targetTeamId) {
              const matchedOrigin = fetchedOrigins.find(o => o.teamIds?.includes(targetTeamId));
              if (matchedOrigin) activeOriginGroup = matchedOrigin;
            }
            setOriginDefs(activeOriginGroup && activeOriginGroup.items ? activeOriginGroup.items : []);
          }
        } catch (error) {
          console.error("Error loading user details", error);
        } finally {
          setLoading(false);
        }
      };

      loadData();
    }
  }, [id, filters]);

  const handleFilterChange = (key: keyof DashboardFilter, value: any) => {
    setFilters(prev => ({ ...prev, [key]: value }));
    setCurrentPage(1); // Reset pagination on filter change
  };

  const totalPages = Math.ceil(attendances.length / ITEMS_PER_PAGE);
  
  const currentData = useMemo(() => {
    const start = (currentPage - 1) * ITEMS_PER_PAGE;
    return attendances.slice(start, start + ITEMS_PER_PAGE);
  }, [attendances, currentPage]);

  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  const getStageBadgeColor = (stage: string) => {
    const def = funnelDefs.find(f => f.name === stage);
    if (def) return def.color_class;

    switch (stage) {
      case FunnelStage.WON: return 'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800';
      case FunnelStage.LOST: return 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800';
      case FunnelStage.NEGOTIATION: return 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800';
      case FunnelStage.IDENTIFICATION: return 'bg-yellow-100 text-yellow-700 border-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 dark:border-yellow-800';
      default: return 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:border-zinc-700';
    }
  };

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400';
    if (score >= 60) return 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400';
    return 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400';
  };

  if (!loading && !user) return <div className="p-8 text-zinc-500 dark:text-dark-muted transition-colors">Usuário não encontrado</div>;

  const backendUrl = import.meta.env.PROD ? '' : 'http://localhost:3001';

  return (
    <div className="space-y-8 max-w-7xl mx-auto transition-colors duration-300">
      {/* Header Section */}
      <div className="flex flex-col md:flex-row gap-6 items-start md:items-center justify-between">
        <div className="flex items-center gap-4">
          <Link to="/" className="p-2.5 bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-lg text-zinc-500 dark:text-dark-muted hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-dark-text transition-all shadow-sm">
            <ArrowLeft size={18} />
          </Link>
          {user && (
            <div className="flex items-center gap-4">
              <img 
                src={user.avatar_url 
                  ? (user.avatar_url.startsWith('http') ? user.avatar_url : `${backendUrl}${user.avatar_url}`)
                  : `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name)}&background=random`} 
                alt={user.name} 
                className="w-16 h-16 rounded-full border-2 border-white dark:border-dark-border shadow-md object-cover" 
              />
              <div>
                <h1 className="text-2xl font-bold text-zinc-900 dark:text-dark-text tracking-tight">{user.name}</h1>
                <div className="flex items-center gap-3 text-sm text-zinc-500 dark:text-dark-muted mt-1">
                  <span className="flex items-center gap-1.5"><Mail size={14} /> {user.email}</span>
                  <span className="bg-zinc-100 dark:bg-dark-bg text-zinc-600 dark:text-dark-muted px-2 py-0.5 rounded text-xs font-semibold uppercase">{user.role}</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Filters Section */}
      <div className="bg-white dark:bg-dark-card p-4 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm flex flex-wrap items-center gap-4">
        <div className="flex items-center gap-2 text-zinc-500 dark:text-dark-muted font-medium mr-2">
          <Filter size={18} />
          <span>Filtros:</span>
        </div>

        <DateRangePicker 
          dateRange={filters.dateRange} 
          onChange={(range) => handleFilterChange('dateRange', range)} 
        />

        <select
          className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700 transition-all"
          value={filters.funnelStage}
          onChange={(e) => handleFilterChange('funnelStage', e.target.value)}
        >
          <option value="all">Todas Etapas</option>
          {funnelDefs.length > 0 ? funnelDefs.map(stage => (
            <option key={stage.id} value={stage.name}>{stage.name}</option>
          )) : Object.values(FunnelStage).map(stage => (
            <option key={stage} value={stage}>{stage}</option>
          ))}
        </select>
        <select
          className="bg-zinc-50 dark:bg-dark-bg border border-zinc-200 dark:border-dark-border px-3 py-2 rounded-lg text-sm text-zinc-700 dark:text-zinc-200 outline-none focus:ring-2 focus:ring-brand-yellow/20 cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700 transition-all"
          value={filters.origin}
          onChange={(e) => handleFilterChange('origin', e.target.value)}
        >
          <option value="all">Todas Origens</option>
          {originDefs.length > 0 ? originDefs.map(o => (
            <option key={o.id} value={o.name}>{o.name}</option>
          )) : ['WhatsApp', 'Instagram', 'Website', 'LinkedIn', 'Indicação'].map(o => (
            <option key={o} value={o}>{o}</option>
          ))}
        </select>      </div>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
          <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Total de Interações</div>
          <div className="text-3xl font-bold text-zinc-900 dark:text-dark-text">{attendances.length}</div>
        </div>
        <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
           <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Taxa de Conversão</div>
           <div className="text-3xl font-bold text-brand-yellow">
             {attendances.length ? ((attendances.filter(a => a.converted).length / attendances.length) * 100).toFixed(1) : 0}%
           </div>
        </div>
         <div className="bg-white dark:bg-dark-card p-6 rounded-xl border border-zinc-200 dark:border-dark-border shadow-sm transition-colors">
           <div className="text-sm font-medium text-zinc-500 dark:text-dark-muted mb-2">Nota Média</div>
           <div className="text-3xl font-bold text-zinc-800 dark:text-zinc-100">
             {attendances.length ? (attendances.reduce((acc, c) => acc + c.score, 0) / attendances.length).toFixed(1) : 0}
           </div>
        </div>
      </div>

      {/* Attendance Table */}
      <div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden flex flex-col transition-colors">
        <div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 flex justify-between items-center bg-zinc-50/50 dark:bg-dark-bg/50">
          <h2 className="font-semibold text-zinc-900 dark:text-zinc-100">Histórico de Atendimentos</h2>
          <span className="text-xs text-zinc-500 dark:text-dark-muted font-medium bg-zinc-200/50 dark:bg-zinc-800 px-2 py-1 rounded transition-colors">Página {currentPage} de {totalPages || 1}</span>
        </div>

        {loading ? (
          <div className="p-12 text-center text-zinc-400 dark:text-dark-muted">Carregando registros...</div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="border-b border-zinc-100 dark:border-zinc-800 text-xs uppercase text-zinc-500 dark:text-dark-muted bg-zinc-50/30 dark:bg-dark-bg/30">
                  <th className="px-6 py-4 font-medium">Data / Hora</th>
                  <th className="px-6 py-4 font-medium w-1/3">Resumo</th>
                  <th className="px-6 py-4 font-medium text-center">Etapa</th>
                  <th className="px-6 py-4 font-medium text-center">Nota</th>
                  <th className="px-6 py-4 font-medium text-center">T. Resp.</th>
                  <th className="px-6 py-4 font-medium text-right">Ação</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-100 dark:divide-zinc-800 text-sm">
                {currentData.map(att => (
                  <tr key={att.id} className="hover:bg-zinc-50/80 dark:hover:bg-zinc-800/50 transition-colors group">
                    <td className="px-6 py-4 text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
                      <div className="font-medium text-zinc-900 dark:text-zinc-100">{new Date(att.created_at).toLocaleDateString('pt-BR')}</div>
                      <div className="text-xs text-zinc-400 dark:text-dark-muted">{new Date(att.created_at).toLocaleTimeString('pt-BR', {hour: '2-digit', minute:'2-digit', hour12: false})}</div>
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-zinc-800 dark:text-zinc-200 line-clamp-1 font-medium mb-1">{att.title}</span>
                      <div className="flex items-center gap-2 text-xs text-zinc-500 dark:text-dark-muted">
                        <span className="flex items-center gap-1"><MessageSquare size={10} /> {att.origin}</span>
                      </div>
                    </td>
                    <td className="px-6 py-4 text-center">
                      <span className={`inline-flex px-2.5 py-0.5 rounded-full text-xs font-semibold border ${getStageBadgeColor(att.funnel_stage)}`}>
                        {att.funnel_stage}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-center">
                      <span className={`inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-sm ${getScoreColor(att.score)}`}>
                        {att.score}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-center text-zinc-600 dark:text-zinc-300">
                      <div className="flex items-center justify-center gap-1">
                        <Clock size={14} className="text-zinc-400 dark:text-dark-muted" />
                        {att.first_response_time_min}m
                      </div>
                    </td>
                    <td className="px-6 py-4 text-right">
                      <Link 
                        to={`/attendances/${att.id}`}
                        className="inline-flex items-center justify-center p-2 rounded-lg text-zinc-400 dark:text-dark-muted hover:text-brand-yellow hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all"
                        title="Ver Detalhes"
                      >
                        <Eye size={18} />
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Pagination Footer */}
        {totalPages > 1 && (
          <div className="px-6 py-4 border-t border-zinc-100 dark:border-zinc-800 flex items-center justify-between bg-zinc-50/30 dark:bg-dark-bg/30">
            <button
              onClick={() => handlePageChange(currentPage - 1)}
              disabled={currentPage === 1}
              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
            >
              <ChevronLeft size={16} /> Anterior
            </button>
            <div className="text-sm text-zinc-500 dark:text-dark-muted">
              Mostrando <span className="font-medium text-zinc-900 dark:text-zinc-100">{((currentPage - 1) * ITEMS_PER_PAGE) + 1}</span> a <span className="font-medium text-zinc-900 dark:text-zinc-100">{Math.min(currentPage * ITEMS_PER_PAGE, attendances.length)}</span> de {attendances.length}
            </div>
            <button
              onClick={() => handlePageChange(currentPage + 1)}
              disabled={currentPage === totalPages}
              className="flex items-center gap-1 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-dark-text bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm"
            >
              Próximo <ChevronRight size={16} />
            </button>
          </div>
        )}
      </div>
    </div>
  );
};