'use client'

import Link from 'next/link'
import { useParams } from 'next/navigation'
import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Pencil } from 'lucide-react'
import { api, type Project } from '@/lib/api'
import { Badge } from '@/components/ui/Badge'
import { Button } from '@/components/ui/Button'
import { PermissionGate } from '@/components/auth/PermissionGate'
import { formatDate } from '@/lib/utils'

const statusVariant = (status: string) => {
  if (status === 'active' || status === 'completed') return 'success'
  if (status === 'on_hold') return 'warning'
  if (status === 'cancelled') return 'danger'
  return 'muted'
}

export function ProjectDetailPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string

  const { data, isLoading } = useQuery({
    queryKey: ['project-dashboard', id],
    queryFn: () => api.get<{ data: Project }>(`/projects/${id}/dashboard`),
    enabled: Boolean(id),
  })

  const project = data?.data.data

  if (isLoading) {
    return (
      <div className="flex min-h-[40vh] items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
      </div>
    )
  }

  if (!project) {
    return (
      <div className="premium-card rounded-2xl p-8 text-center">
        <p className="text-sm text-[var(--premium-muted-text)]">{t('common.noResults')}</p>
        <Link href="/projects" className="mt-4 inline-block text-sm font-semibold text-accent-600">
          {t('common.back')}
        </Link>
      </div>
    )
  }

  const kpis = [
    { label: t('projects.progress'), value: `${project.progress ?? 0}%` },
    {
      label: t('projects.budgetVariance'),
      value:
        project.budget_variance != null
          ? Number(project.budget_variance).toLocaleString()
          : '—',
    },
    {
      label: t('projects.budget'),
      value: project.budget != null ? Number(project.budget).toLocaleString() : '—',
    },
    {
      label: t('projects.actualSpend'),
      value: project.actual_spend != null ? Number(project.actual_spend).toLocaleString() : '—',
    },
    {
      label: t('projects.linkedSites'),
      value: String(project.site_count ?? project.sites_count ?? project.sites?.length ?? 0),
    },
    {
      label: t('projects.avgSiteProgress'),
      value: `${project.avg_site_progress ?? project.progress ?? 0}%`,
    },
  ]

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-start justify-between gap-3">
        <div>
          <Link
            href="/projects"
            className="mb-2 inline-flex items-center gap-1 text-xs font-semibold text-[var(--premium-muted-text)] hover:text-accent-600"
          >
            <ArrowLeft size={14} />
            {t('common.back')}
          </Link>
          <div className="flex flex-wrap items-center gap-3">
            <h1 className="premium-heading text-2xl font-bold">{project.name}</h1>
            <Badge variant={statusVariant(project.status)}>
              {t(`projects.status.${project.status}`, project.status)}
            </Badge>
          </div>
          <p className="mt-1 font-mono text-xs text-[var(--premium-muted-text)]">
            {project.project_code}
            {project.partner?.name ? ` · ${project.partner.name}` : ''}
          </p>
        </div>
        <PermissionGate permission="projects.manage">
          <Link href={`/projects/${project.id}/edit`}>
            <Button size="sm" variant="secondary">
              <Pencil size={14} />
              {t('common.edit')}
            </Button>
          </Link>
        </PermissionGate>
      </div>

      <div className="animate-fade-in-up stagger-1 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {kpis.map((kpi) => (
          <div key={kpi.label} className="premium-card rounded-2xl p-4">
            <div className="text-xs font-semibold uppercase tracking-wide text-[var(--premium-muted-text)]">
              {kpi.label}
            </div>
            <div className="mt-2 text-xl font-bold text-[var(--premium-text)]">{kpi.value}</div>
          </div>
        ))}
      </div>

      <div className="animate-fade-in-up stagger-2 premium-card rounded-2xl p-5">
        <h2 className="text-sm font-semibold text-[var(--premium-text)]">{t('projects.schedule')}</h2>
        <div className="mt-3 grid gap-3 text-sm sm:grid-cols-3">
          <div>
            <div className="text-xs text-[var(--premium-muted-text)]">{t('projects.startDate')}</div>
            <div>{formatDate(project.start_date) || '—'}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--premium-muted-text)]">{t('projects.deadline')}</div>
            <div>
              {project.no_deadline ? t('projects.noDeadline') : formatDate(project.deadline) || '—'}
            </div>
          </div>
          <div>
            <div className="text-xs text-[var(--premium-muted-text)]">{t('projects.timeProjection')}</div>
            <div>{formatDate(project.time_projection) || '—'}</div>
          </div>
        </div>
        {project.summary ? (
          <p className="mt-4 text-sm text-[var(--premium-muted-text)]">{project.summary}</p>
        ) : null}
      </div>

      <div className="animate-fade-in-up stagger-3 premium-card rounded-2xl p-5">
        <div className="mb-3 flex items-center justify-between gap-2">
          <h2 className="text-sm font-semibold text-[var(--premium-text)]">{t('projects.linkedSites')}</h2>
          <PermissionGate permission="sites.manage">
            <Link
              href={`/sites/new?project_id=${project.id}`}
              className="text-xs font-semibold text-accent-600 hover:underline"
            >
              {t('sites.create')}
            </Link>
          </PermissionGate>
        </div>
        {(project.sites ?? []).length === 0 ? (
          <p className="text-sm text-[var(--premium-muted-text)]">{t('common.noResults')}</p>
        ) : (
          <ul className="divide-y divide-[var(--premium-border)]">
            {(project.sites ?? []).map((site) => (
              <li key={site.id} className="flex flex-wrap items-center justify-between gap-2 py-3">
                <div>
                  <Link
                    href={`/sites/${site.id}`}
                    className="font-semibold text-[var(--premium-text)] hover:text-accent-600"
                  >
                    {site.name}
                  </Link>
                  <div className="font-mono text-xs text-[var(--premium-muted-text)]">
                    {site.site_code}
                  </div>
                </div>
                <div className="flex items-center gap-3 text-sm">
                  <Badge variant={statusVariant(site.status)}>
                    {t(`sites.status.${site.status}`, site.status)}
                  </Badge>
                  <span>{site.progress ?? 0}%</span>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}