'use client'

import { useMemo } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import Link from 'next/link'
import { Activity, Building2, FolderKanban, ShieldCheck, Sparkles, Users } from 'lucide-react'
import { useAuth } from '@/contexts/AuthContext'
import {
  api,
  type PaginatedResponse,
  type Partner,
  type Employee,
  type AuditLog,
  type Project,
} from '@/lib/api'
import { Card } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { formatDate } from '@/lib/utils'

export function DashboardPage() {
  const { t } = useTranslation()
  const { user } = useAuth()

  const partners = useQuery({
    queryKey: ['partners-count'],
    queryFn: () => api.get<PaginatedResponse<Partner>>('/partners?per_page=1'),
  })

  const employees = useQuery({
    queryKey: ['employees-count'],
    queryFn: () => api.get<PaginatedResponse<Employee>>('/employees?per_page=1'),
  })

  const projects = useQuery({
    queryKey: ['projects-dashboard'],
    queryFn: () => api.get<PaginatedResponse<Project>>('/projects?per_page=8'),
  })

  const activeProjects = useQuery({
    queryKey: ['projects-active-count'],
    queryFn: () => api.get<PaginatedResponse<Project>>('/projects?status=active&per_page=1'),
  })

  const audit = useQuery({
    queryKey: ['audit-recent'],
    queryFn: () => api.get<PaginatedResponse<AuditLog>>('/audit-logs?per_page=5'),
  })

  const projectRows = projects.data?.data.data ?? []
  const activeCount = activeProjects.data?.data.meta.total ?? 0
  const avgProgress = useMemo(() => {
    if (!projectRows.length) return 0
    return Math.round(
      projectRows.reduce((sum, p) => sum + (p.progress ?? 0), 0) / projectRows.length,
    )
  }, [projectRows])

  const stats = [
    {
      label: t('dashboard.projects'),
      value: projects.data?.data.meta.total ?? 0,
      icon: FolderKanban,
      gradient: 'from-brand-500 to-brand-700',
      accent: 'bg-brand-400',
      to: '/projects',
    },
    {
      label: t('dashboard.partners'),
      value: partners.data?.data.meta.total ?? 0,
      icon: Building2,
      gradient: 'from-accent-400 to-accent-600',
      accent: 'bg-accent-400',
      to: '/partners',
    },
    {
      label: t('dashboard.employees'),
      value: employees.data?.data.meta.total ?? 0,
      icon: Users,
      gradient: 'from-emerald-500 to-emerald-700',
      accent: 'bg-emerald-400',
      to: '/employees',
    },
    {
      label: t('dashboard.recentActivity'),
      value: audit.data?.data.meta.total ?? 0,
      icon: Activity,
      gradient: 'from-teal-500 to-teal-700',
      accent: 'bg-teal-400',
      to: '/audit-logs',
    },
  ]

  return (
    <div className="space-y-6">
      <div className="premium-card premium-card-glow shine-border light-glass-reflection animate-fade-in-up relative overflow-hidden rounded-3xl p-6 md:p-7">
        <div className="mesh-grid-bg pointer-events-none absolute inset-0 opacity-70" />
        <div
          className="sparkle-orb right-10 top-4 h-36 w-36"
          style={{ background: 'radial-gradient(circle, rgba(212,160,84,0.42), transparent 70%)' }}
        />
        <div className="relative z-10 flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
          <div>
            <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--premium-border)] bg-[var(--premium-hover-bg)] px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-[var(--premium-label)]">
              <Sparkles size={13} className="text-accent-400" />
              {t('dashboard.commandCenter')}
            </div>
            <h1 className="premium-heading text-3xl font-bold md:text-4xl" data-tour="dashboard-heading">{t('dashboard.title')}</h1>
            <p className="premium-muted mt-2 max-w-xl">
              {t('dashboard.welcome', { name: user?.name })}. {t('dashboard.subtitle')}
            </p>
          </div>
          <div className="grid min-w-[260px] gap-3 sm:grid-cols-2">
            <div className="premium-chip premium-hover-lift rounded-2xl p-4">
              <p className="text-xs uppercase tracking-[0.2em] text-[var(--premium-label)]">
                {t('dashboard.activeProjects')}
              </p>
              <div className="mt-2 flex items-center gap-2 text-[var(--premium-text)]">
                <FolderKanban size={18} className="text-accent-400" />
                <span className="text-2xl font-bold">{activeCount}</span>
              </div>
            </div>
            <div className="premium-chip premium-hover-lift rounded-2xl p-4">
              <p className="text-xs uppercase tracking-[0.2em] text-[var(--premium-label)]">
                {t('dashboard.avgProgress')}
              </p>
              <div className="mt-2 flex items-center gap-2 text-[var(--premium-text)]">
                <ShieldCheck size={18} className="text-[var(--premium-label)]" />
                <span className="text-2xl font-bold">{avgProgress}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="perspective-container grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map(({ label, value, icon: Icon, gradient, accent, to }, i) => (
          <Link
            key={label}
            href={to}
            className={`premium-card premium-card-glow tilt-card premium-hover-lift shine-hover light-glass-reflection animate-fade-in-up stagger-${i + 1} relative block rounded-3xl p-5 no-underline focus:outline-none focus:ring-2 focus:ring-brand-400/40`}
            aria-label={t('dashboard.openStat', { label })}
          >
            <div className={`absolute left-0 top-6 h-12 w-1.5 rounded-r-full ${accent}`} />
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-semibold text-[var(--premium-muted-text)]">{label}</p>
                <p className="animate-count-up mt-1 text-4xl font-bold text-[var(--premium-text)]">
                  {value}
                </p>
                <p className="mt-1 text-xs text-[var(--premium-label)]">{t('dashboard.syncedWithApi')}</p>
              </div>
              <div
                className={`icon-pop rounded-2xl bg-gradient-to-br ${gradient} p-3.5 text-white depth-raised shadow-[0_0_30px_-12px_rgba(61,139,110,0.9)]`}
              >
                <Icon size={24} />
              </div>
            </div>
          </Link>
        ))}
      </div>

      <div className="grid gap-5 lg:grid-cols-2">
        <Card title={t('dashboard.projectProgress')} elevated>
          <div className="space-y-3">
            {projectRows.map((p, i) => {
              const variance = Number(p.budget_variance ?? 0)
              return (
                <Link
                  key={p.id}
                  href={`/projects/${p.id}/edit`}
                  className={`premium-chip animate-fade-in-up stagger-${Math.min(i + 1, 6)} block rounded-2xl px-4 py-3 no-underline transition-transform hover:translate-x-0.5`}
                >
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <p className="text-sm font-semibold text-[var(--premium-text)]">{p.name}</p>
                      <p className="text-xs text-[var(--premium-muted-text)]">
                        {p.project_code}
                        {p.partner?.name ? ` · ${p.partner.name}` : ''}
                      </p>
                    </div>
                    <Badge variant={p.status === 'active' ? 'success' : 'muted'}>
                      {t(`projects.status.${p.status}`, p.status)}
                    </Badge>
                  </div>
                  <div className="mt-3 h-2 overflow-hidden rounded-full bg-[var(--premium-hover-bg)]">
                    <div
                      className="h-full rounded-full bg-gradient-to-r from-brand-500 to-accent-400"
                      style={{ width: `${Math.min(100, p.progress ?? 0)}%` }}
                    />
                  </div>
                  <div className="mt-2 flex justify-between text-xs text-[var(--premium-muted-text)]">
                    <span>
                      {t('projects.progress')}: {p.progress ?? 0}%
                    </span>
                    <span className={variance < 0 ? 'text-red-400' : ''}>
                      {t('dashboard.budgetWatch')}: {variance.toLocaleString()}
                    </span>
                  </div>
                </Link>
              )
            })}
            {!projectRows.length && (
              <p className="text-sm text-[var(--text-muted)]">{t('dashboard.noProjectsYet')}</p>
            )}
          </div>
        </Card>

        <Card title={t('dashboard.recentActivity')} elevated>
          <div className="space-y-3">
            {audit.data?.data.data.map((log, i) => (
              <div
                key={log.id}
                className={`premium-chip animate-fade-in-up stagger-${Math.min(i + 1, 6)} flex items-center justify-between rounded-2xl px-4 py-3 transition-transform hover:translate-x-0.5`}
              >
                <div>
                  <p className="text-sm font-semibold text-[var(--premium-text)]">
                    {log.user?.name ?? t('common.system')} —{' '}
                    <span className="capitalize">{log.action}</span>
                  </p>
                  <p className="text-xs text-[var(--premium-muted-text)]">{log.auditable_type}</p>
                </div>
                <Badge variant="muted">{formatDate(log.created_at)}</Badge>
              </div>
            ))}
            {!audit.data?.data.data.length && (
              <p className="text-sm text-[var(--text-muted)]">{t('common.noResults')}</p>
            )}
          </div>
        </Card>
      </div>
    </div>
  )
}