import React, { useState, useEffect, useCallback, useMemo } from 'react'
import {
  Clock,
  CheckCircle2,
  TrendingUp,
  Folder,
  Tag,
  Users,
  RefreshCw,
  Sparkles,
  Activity,
  AlertCircle,
} from 'lucide-react'
import { useAuth } from '../contexts/AuthContext'
import { taskService } from '../services/taskService'
import { projectService } from '../services/projectService'
import { categoryService } from '../services/categoryService'
import { organizationService, type OrganizationMember } from '../services/organizationService'
import type { Task, Project, Category } from '../types/task'
import { calculateTaskTotalSeconds, formatSecondsToHuman, formatSecondsToTimer } from '../lib/timeUtils'

export const AnalyticsPage: React.FC = () => {
  const { activeOrg } = useAuth()

  const [tasks, setTasks] = useState<Task[]>([])
  const [projects, setProjects] = useState<Project[]>([])
  const [categories, setCategories] = useState<Category[]>([])
  const [members, setMembers] = useState<OrganizationMember[]>([])

  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const activeOrgId = activeOrg?.id

  const loadData = useCallback(async () => {
    if (!activeOrgId) return
    try {
      setRefreshing(true)
      const [tasksRes, projsRes, catsRes, memsRes] = await Promise.allSettled([
        taskService.listTasks({ organizationId: activeOrgId }),
        projectService.listProjects(activeOrgId),
        categoryService.listCategories(activeOrgId),
        organizationService.listMembers(activeOrgId),
      ])

      if (tasksRes.status === 'fulfilled') setTasks(tasksRes.value || [])
      if (projsRes.status === 'fulfilled') setProjects(projsRes.value || [])
      if (catsRes.status === 'fulfilled') setCategories(catsRes.value || [])
      if (memsRes.status === 'fulfilled') setMembers(memsRes.value || [])
    } catch (err: unknown) {
      console.error(err)
      setError('Falha ao calcular métricas do workspace.')
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [activeOrgId])

  useEffect(() => {
    loadData()
  }, [loadData])

  // Aggregate high-level KPIs
  const kpis = useMemo(() => {
    const totalTasks = tasks.length
    const completedTasks = tasks.filter((t) => t.status === 'COMPLETED').length
    const inProgressTasks = tasks.filter((t) => t.status === 'IN_PROGRESS').length
    const notStartedTasks = tasks.filter((t) => t.status === 'NOT_STARTED').length
    const canceledTasks = tasks.filter((t) => t.status === 'CANCELED').length

    const totalSecondsTracked = tasks.reduce(
      (acc, t) => acc + calculateTaskTotalSeconds(t),
      0
    )

    const completionRate =
      totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0

    const avgSecondsPerCompletedTask =
      completedTasks > 0
        ? Math.round(
            tasks
              .filter((t) => t.status === 'COMPLETED')
              .reduce((acc, t) => acc + calculateTaskTotalSeconds(t), 0) / completedTasks
          )
        : 0

    return {
      totalTasks,
      completedTasks,
      inProgressTasks,
      notStartedTasks,
      canceledTasks,
      totalSecondsTracked,
      completionRate,
      avgSecondsPerCompletedTask,
    }
  }, [tasks])

  // Project breakdown
  const projectBreakdown = useMemo(() => {
    const map = new Map<number, { project: Project; seconds: number; taskCount: number }>()

    projects.forEach((p) => {
      map.set(p.id, { project: p, seconds: 0, taskCount: 0 })
    })

    let unassignedSeconds = 0
    let unassignedTasks = 0

    tasks.forEach((t) => {
      const sec = calculateTaskTotalSeconds(t)
      if (t.project?.id && map.has(t.project.id)) {
        const item = map.get(t.project.id)!
        item.seconds += sec
        item.taskCount += 1
      } else {
        unassignedSeconds += sec
        unassignedTasks += 1
      }
    })

    const list = Array.from(map.values())
    if (unassignedTasks > 0) {
      list.push({
        project: { id: 0, name: 'Sem Projeto', color: '#64748b' },
        seconds: unassignedSeconds,
        taskCount: unassignedTasks,
      })
    }

    return list.sort((a, b) => b.seconds - a.seconds)
  }, [projects, tasks])

  // Category breakdown
  const categoryBreakdown = useMemo(() => {
    const map = new Map<number, { category: Category; seconds: number; taskCount: number }>()

    categories.forEach((c) => {
      map.set(c.id, { category: c, seconds: 0, taskCount: 0 })
    })

    let unassignedSeconds = 0
    let unassignedTasks = 0

    tasks.forEach((t) => {
      const sec = calculateTaskTotalSeconds(t)
      if (t.category?.id && map.has(t.category.id)) {
        const item = map.get(t.category.id)!
        item.seconds += sec
        item.taskCount += 1
      } else {
        unassignedSeconds += sec
        unassignedTasks += 1
      }
    })

    const list = Array.from(map.values())
    if (unassignedTasks > 0) {
      list.push({
        category: { id: 0, name: 'Sem Categoria', color: '#64748b' },
        seconds: unassignedSeconds,
        taskCount: unassignedTasks,
      })
    }

    return list.sort((a, b) => b.seconds - a.seconds)
  }, [categories, tasks])

  // Member breakdown
  const memberBreakdown = useMemo(() => {
    const map = new Map<
      string,
      { name: string; email: string; seconds: number; completedCount: number; totalCount: number }
    >()

    members.forEach((m) => {
      map.set(m.userEmail, {
        name: m.userName,
        email: m.userEmail,
        seconds: 0,
        completedCount: 0,
        totalCount: 0,
      })
    })

    tasks.forEach((t) => {
      const sec = calculateTaskTotalSeconds(t)
      const email = t.user?.email || 'unassigned@bee.internal'
      if (!map.has(email)) {
        map.set(email, {
          name: t.user?.name || 'Não atribuído',
          email,
          seconds: 0,
          completedCount: 0,
          totalCount: 0,
        })
      }
      const item = map.get(email)!
      item.seconds += sec
      item.totalCount += 1
      if (t.status === 'COMPLETED') item.completedCount += 1
    })

    return Array.from(map.values()).sort((a, b) => b.seconds - a.seconds)
  }, [members, tasks])

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
            <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight bg-gradient-to-r from-brand via-brand-strong to-accent bg-clip-text text-transparent">
              Analytics & Produtividade
            </h1>
            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-brand/15 text-brand border border-brand/25 shadow-xs">
              <span className="w-1.5 h-1.5 rounded-full bg-brand animate-pulse" />
              {activeOrg?.name || 'Workspace'}
            </span>
          </div>
          <p className="text-xs text-muted">
            Auditoria de tempo investido, distribuição por iniciativas e acompanhamento da vazão da equipe.
          </p>
        </div>

        <button
          type="button"
          onClick={loadData}
          disabled={refreshing}
          title="Recarregar métricas"
          className="self-start sm:self-auto p-2.5 rounded-xl border border-border-soft bg-surface/90 backdrop-blur-md text-muted hover:text-foreground hover:bg-surface-raised transition-all shadow-panel disabled:opacity-50"
        >
          <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin text-brand' : ''}`} />
        </button>
      </div>

      {error && (
        <div className="flex items-center justify-between p-4 rounded-2xl bg-rose-500/10 border border-rose-500/25 text-rose-300 text-xs shadow-panel backdrop-blur-md">
          <div className="flex items-center gap-2">
            <AlertCircle className="w-4 h-4 text-rose-400" />
            <span>{error}</span>
          </div>
          <button
            type="button"
            onClick={() => setError(null)}
            className="text-rose-400 hover:text-rose-200 text-xs font-bold"
          >
            Fechar
          </button>
        </div>
      )}

      {loading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 py-8">
          {[1, 2, 3, 4].map((i) => (
            <div
              key={i}
              className="h-32 rounded-3xl border border-border-soft bg-surface-sunken/40 animate-pulse p-5"
            />
          ))}
        </div>
      ) : (
        <>
          {/* Top 4 KPI Cards */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* Total Time */}
            <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
              <div className="flex items-center justify-between mb-3">
                <span className="text-xs font-semibold text-muted">Tempo Total Dedicado</span>
                <div className="w-9 h-9 rounded-xl bg-teal-500/15 border border-teal-500/30 flex items-center justify-center text-teal-700 dark:text-teal-400">
                  <Clock className="w-4 h-4" />
                </div>
              </div>
              <div>
                <p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
                  {formatSecondsToTimer(kpis.totalSecondsTracked)}
                </p>
                <p className="text-[11px] text-muted mt-1">
                  Equivalente a {formatSecondsToHuman(kpis.totalSecondsTracked)}
                </p>
              </div>
            </div>

            {/* Completion Rate */}
            <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
              <div className="flex items-center justify-between mb-3">
                <span className="text-xs font-semibold text-muted">Taxa de Conclusão</span>
                <div className="w-9 h-9 rounded-xl bg-emerald-500/15 border border-emerald-500/30 flex items-center justify-center text-emerald-700 dark:text-emerald-400">
                  <TrendingUp className="w-4 h-4" />
                </div>
              </div>
              <div>
                <p className="text-2xl sm:text-3xl font-extrabold text-emerald-700 dark:text-emerald-400 tracking-tight">
                  {kpis.completionRate}%
                </p>
                <p className="text-[11px] text-muted mt-1">
                  {kpis.completedTasks} de {kpis.totalTasks} demandas finalizadas
                </p>
              </div>
            </div>

            {/* In Progress vs Backlog */}
            <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
              <div className="flex items-center justify-between mb-3">
                <span className="text-xs font-semibold text-muted">Em Execução Agora</span>
                <div className="w-9 h-9 rounded-xl bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
                  <Activity className="w-4 h-4" />
                </div>
              </div>
              <div>
                <p className="text-2xl sm:text-3xl font-extrabold text-teal-700 dark:text-teal-300 tracking-tight">
                  {kpis.inProgressTasks} tarefas
                </p>
                <p className="text-[11px] text-muted mt-1">
                  {kpis.notStartedTasks} no backlog aguardando início
                </p>
              </div>
            </div>

            {/* Avg Time per Task */}
            <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md flex flex-col justify-between shadow-panel hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200">
              <div className="flex items-center justify-between mb-3">
                <span className="text-xs font-semibold text-muted">Média por Entrega</span>
                <div className="w-9 h-9 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400">
                  <Sparkles className="w-4 h-4" />
                </div>
              </div>
              <div>
                <p className="text-2xl sm:text-3xl font-extrabold text-foreground tracking-tight font-mono">
                  {formatSecondsToHuman(kpis.avgSecondsPerCompletedTask)}
                </p>
                <p className="text-[11px] text-muted mt-1">
                  Tempo médio gasto em cada entrega concluída
                </p>
              </div>
            </div>
          </div>

      {/* Main Grid: Projects & Categories Breakdown */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Project Time Distribution */}
        <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-xl bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
                <Folder className="w-4 h-4" />
              </div>
              <h2 className="text-sm font-bold text-foreground">
                Tempo por Projeto
              </h2>
            </div>
            <span className="text-xs text-muted font-medium">
              {projectBreakdown.length} projetos
            </span>
          </div>

          {projectBreakdown.length === 0 ? (
            <p className="text-xs text-muted py-8 text-center">Nenhum dado de projeto disponível.</p>
          ) : (
            <div className="space-y-4">
              {projectBreakdown.map((item) => {
                const pct =
                  kpis.totalSecondsTracked > 0
                    ? Math.round((item.seconds / kpis.totalSecondsTracked) * 100)
                    : 0
                return (
                  <div key={item.project.id} className="space-y-1.5">
                    <div className="flex items-center justify-between text-xs">
                      <div className="flex items-center gap-2 truncate">
                        <span
                          className="w-2.5 h-2.5 rounded-full shrink-0"
                          style={{ backgroundColor: item.project.color || '#0f766e' }}
                        />
                        <span className="font-semibold text-foreground truncate">
                          {item.project.name}
                        </span>
                        <span className="text-[10px] text-muted font-normal">
                          ({item.taskCount} {item.taskCount === 1 ? 'tarefa' : 'tarefas'})
                        </span>
                      </div>
                      <div className="flex items-center gap-2 shrink-0 font-mono text-[11px]">
                        <span className="text-foreground font-bold">
                          {formatSecondsToHuman(item.seconds)}
                        </span>
                        <span className="text-muted w-10 text-right font-sans">
                          {pct}%
                        </span>
                      </div>
                    </div>
                    <div className="w-full h-2 rounded-full bg-surface-sunken overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all duration-500"
                        style={{
                          width: `${pct}%`,
                          backgroundColor: item.project.color || '#0f766e',
                        }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>

        {/* Category Time Distribution */}
        <div className="p-6 rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md shadow-panel space-y-5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-xl bg-amber-500/15 border border-amber-500/30 flex items-center justify-center text-amber-400">
                <Tag className="w-4 h-4" />
              </div>
              <h2 className="text-sm font-bold text-foreground">
                Tempo por Categoria / Tag
              </h2>
            </div>
            <span className="text-xs text-muted font-medium">
              {categoryBreakdown.length} categorias
            </span>
          </div>

          {categoryBreakdown.length === 0 ? (
            <p className="text-xs text-muted py-8 text-center">Nenhum dado de categoria disponível.</p>
          ) : (
            <div className="space-y-4">
              {categoryBreakdown.map((item) => {
                const pct =
                  kpis.totalSecondsTracked > 0
                    ? Math.round((item.seconds / kpis.totalSecondsTracked) * 100)
                    : 0
                return (
                  <div key={item.category.id} className="space-y-1.5">
                    <div className="flex items-center justify-between text-xs">
                      <div className="flex items-center gap-2 truncate">
                        <span
                          className="w-2.5 h-2.5 rounded-full shrink-0"
                          style={{ backgroundColor: item.category.color || '#d97706' }}
                        />
                        <span className="font-semibold text-foreground truncate">
                          {item.category.name}
                        </span>
                        <span className="text-[10px] text-muted font-normal">
                          ({item.taskCount} {item.taskCount === 1 ? 'tarefa' : 'tarefas'})
                        </span>
                      </div>
                      <div className="flex items-center gap-2 shrink-0 font-mono text-[11px]">
                        <span className="text-foreground font-bold">
                          {formatSecondsToHuman(item.seconds)}
                        </span>
                        <span className="text-muted w-10 text-right font-sans">
                          {pct}%
                        </span>
                      </div>
                    </div>
                    <div className="w-full h-2 rounded-full bg-surface-sunken overflow-hidden">
                      <div
                        className="h-full rounded-full transition-all duration-500"
                        style={{
                          width: `${pct}%`,
                          backgroundColor: item.category.color || '#d97706',
                        }}
                      />
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>

      {/* Team Productivity Table */}
      <div className="rounded-3xl border border-border-soft bg-surface/90 backdrop-blur-md p-6 shadow-panel space-y-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-lg bg-brand/15 border border-brand/30 flex items-center justify-center text-brand">
              <Users className="w-4 h-4" />
            </div>
            <h2 className="text-sm font-bold text-foreground">
              Dedicação por Membro da Equipe
            </h2>
          </div>
          <span className="text-xs text-muted font-medium">
            {memberBreakdown.length} colaboradores
          </span>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs">
            <thead>
              <tr className="border-b border-border bg-surface-sunken/40 text-muted font-semibold uppercase tracking-wider text-[11px]">
                <th className="py-3 px-4">Membro</th>
                <th className="py-3 px-4">Tarefas Atribuídas</th>
                <th className="py-3 px-4">Entregas Concluídas</th>
                <th className="py-3 px-4">Tempo Total Registrado</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border/60">
              {memberBreakdown.map((member, idx) => (
                <tr key={idx} className="hover:bg-surface-raised/50 transition-colors">
                  <td className="py-3.5 px-4">
                    <div className="flex items-center gap-2.5">
                      <div className="w-7 h-7 rounded-full bg-brand/15 border border-brand/30 flex items-center justify-center font-bold text-brand uppercase text-[10px]">
                        {member.name.charAt(0)}
                      </div>
                      <div>
                        <p className="font-semibold text-foreground">{member.name}</p>
                        <p className="text-[10px] text-muted">{member.email}</p>
                      </div>
                    </div>
                  </td>
                  <td className="py-3.5 px-4 font-medium text-foreground">
                    {member.totalCount}
                  </td>
                  <td className="py-3.5 px-4">
                    <span className="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-400 font-semibold">
                      <CheckCircle2 className="w-3.5 h-3.5" />
                      {member.completedCount}
                    </span>
                  </td>
                  <td className="py-3.5 px-4 font-mono font-bold text-teal-700 dark:text-teal-300">
                    {formatSecondsToTimer(member.seconds)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      </>
      )}
    </div>
  )
}