'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { Plus, Download, BarChart3 } from 'lucide-react'
import { toast } from 'sonner'
import {
  api,
  type PaginatedResponse,
  type Attendance,
  type AttendanceMonthlyRow,
} from '@/lib/api'
import { DataTable } from '@/components/DataTable'
import { Button } from '@/components/ui/Button'
import { Badge } from '@/components/ui/Badge'
import { Select } from '@/components/ui/Select'
import { PermissionGate } from '@/components/auth/PermissionGate'
import { formatDate } from '@/lib/utils'

const statusVariant = (status: string) => {
  if (status === 'present') return 'success'
  if (status === 'absent') return 'danger'
  if (status === 'paid_day_off' || status === 'unpaid_day_off') return 'warning'
  return 'muted'
}

export function AttendancesPage() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [search, setSearch] = useState('')
  const [status, setStatus] = useState('')
  const [page, setPage] = useState(1)
  const [showReport, setShowReport] = useState(false)
  const now = new Date()
  const [reportYear, setReportYear] = useState(String(now.getFullYear()))
  const [reportMonth, setReportMonth] = useState(String(now.getMonth() + 1))
  const [exporting, setExporting] = useState(false)

  const { data, isLoading } = useQuery({
    queryKey: ['attendances', search, status, page],
    queryFn: () =>
      api.get<PaginatedResponse<Attendance>>('/attendances', {
        params: { search: search || undefined, status: status || undefined, page, per_page: 25 },
      }),
  })

  const report = useQuery({
    queryKey: ['attendances-monthly', reportYear, reportMonth],
    queryFn: () =>
      api.get<{ data: AttendanceMonthlyRow[] }>('/attendances/reports/monthly', {
        params: { year: reportYear, month: reportMonth },
      }),
    enabled: showReport,
  })

  const remove = useMutation({
    mutationFn: (id: number) => api.delete(`/attendances/${id}`),
    onSuccess: () => {
      toast.success(t('attendances.messages.deleted'))
      queryClient.invalidateQueries({ queryKey: ['attendances'] })
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const handleExport = async () => {
    setExporting(true)
    try {
      const res = await api.get('/attendances/export', {
        params: {
          format: 'csv',
          year: showReport ? reportYear : undefined,
          month: showReport ? reportMonth : undefined,
          status: status || undefined,
        },
        responseType: 'blob',
      })
      const url = window.URL.createObjectURL(new Blob([res.data as BlobPart]))
      const a = document.createElement('a')
      a.href = url
      a.download = `attendances_${new Date().toISOString().slice(0, 10)}.csv`
      a.click()
      window.URL.revokeObjectURL(url)
      toast.success(t('attendances.messages.exportSuccess'))
    } catch {
      toast.error(t('attendances.messages.exportFailed'))
    } finally {
      setExporting(false)
    }
  }

  const rows = data?.data.data ?? []
  const meta = data?.data.meta
  const reportRows = report.data?.data.data ?? []

  const statusOptions = [
    { value: '', label: t('common.allStatuses') },
    ...(['present', 'absent', 'paid_day_off', 'unpaid_day_off'] as const).map((value) => ({
      value,
      label: t(`attendances.status.${value}`),
    })),
  ]

  const monthOptions = Array.from({ length: 12 }, (_, i) => ({
    value: String(i + 1),
    label: String(i + 1),
  }))

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center justify-between gap-3">
        <h1 className="premium-heading text-2xl font-bold" data-tour="page-heading">{t('attendances.title')}</h1>
        <div className="flex flex-wrap gap-2">
          <Button size="sm" variant="secondary" onClick={() => setShowReport((v) => !v)}>
            <BarChart3 size={14} />
            {t('attendances.monthlyReport')}
          </Button>
          <Button size="sm" variant="secondary" onClick={handleExport} disabled={exporting}>
            <Download size={14} />
            {exporting ? t('common.exporting') : t('common.exportCsv')}
          </Button>
          <PermissionGate permission="attendances.manage">
            <Link href="/attendances/new">
              <Button size="sm">
                <Plus size={14} />
                {t('attendances.create')}
              </Button>
            </Link>
          </PermissionGate>
        </div>
      </div>

      {showReport ? (
        <div className="animate-fade-in-up premium-card space-y-4 rounded-2xl p-4">
          <div className="flex flex-wrap items-end gap-3">
            <label className="text-sm">
              <span className="mb-1 block text-xs text-[var(--premium-muted-text)]">
                {t('attendances.year')}
              </span>
              <input
                type="number"
                value={reportYear}
                onChange={(e) => setReportYear(e.target.value)}
                className="w-28 rounded-xl border border-[var(--premium-border)] bg-transparent px-3 py-2 text-sm"
              />
            </label>
            <label className="text-sm">
              <span className="mb-1 block text-xs text-[var(--premium-muted-text)]">
                {t('attendances.month')}
              </span>
              <Select
                value={reportMonth}
                onChange={(e) => setReportMonth(e.target.value)}
                options={monthOptions}
              />
            </label>
          </div>
          {report.isLoading ? (
            <p className="text-sm text-[var(--premium-muted-text)]">{t('common.loading')}</p>
          ) : reportRows.length === 0 ? (
            <p className="text-sm text-[var(--premium-muted-text)]">{t('common.noResults')}</p>
          ) : (
            <div className="overflow-x-auto">
              <table className="min-w-full text-left text-sm">
                <thead className="text-xs uppercase text-[var(--premium-muted-text)]">
                  <tr>
                    <th className="px-2 py-2">{t('attendances.employee')}</th>
                    <th className="px-2 py-2">{t('attendances.totalHours')}</th>
                    <th className="px-2 py-2">{t('attendances.daysPresent')}</th>
                    <th className="px-2 py-2">{t('attendances.estimatedPay')}</th>
                  </tr>
                </thead>
                <tbody>
                  {reportRows.map((r) => (
                    <tr key={r.employee_id} className="border-t border-[var(--premium-border)]">
                      <td className="px-2 py-2">
                        <div className="font-medium">{r.employee_name}</div>
                        <div className="font-mono text-xs text-[var(--premium-muted-text)]">
                          {r.employee_code}
                        </div>
                      </td>
                      <td className="px-2 py-2">{r.total_hours}</td>
                      <td className="px-2 py-2">{r.days_present}</td>
                      <td className="px-2 py-2">{Number(r.estimated_pay).toLocaleString()}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      ) : null}

      <div className="animate-fade-in-up stagger-1">
        <DataTable
          data={rows}
          loading={isLoading}
          emptyMessage={t('common.noResults')}
          onSearch={(q) => {
            setSearch(q)
            setPage(1)
          }}
          searchValue={search}
          searchPlaceholder={t('attendances.search')}
          toolbar={
            <Select
              value={status}
              onChange={(e) => {
                setStatus(e.target.value)
                setPage(1)
              }}
              options={statusOptions}
            />
          }
          pagination={meta}
          onPageChange={setPage}
          columns={[
            {
              key: 'attendance_date',
              header: t('attendances.date'),
              render: (r) => formatDate(r.attendance_date),
            },
            {
              key: 'site',
              header: t('attendances.site'),
              render: (r) => r.site?.name || '—',
            },
            {
              key: 'employee',
              header: t('attendances.employee'),
              render: (r) => r.employee?.full_name || '—',
            },
            {
              key: 'status',
              header: t('common.status'),
              render: (r) => (
                <Badge variant={statusVariant(r.status)}>
                  {t(`attendances.status.${r.status}`, r.status)}
                </Badge>
              ),
            },
            {
              key: 'hours_worked',
              header: t('attendances.hours'),
              render: (r) => (r.hours_worked != null ? String(r.hours_worked) : '—'),
            },
            {
              key: 'actions',
              header: t('common.actions'),
              className: 'text-right',
              render: (r) => (
                <div className="flex justify-end gap-2">
                  <PermissionGate permission="attendances.manage">
                    <Link
                      href={`/attendances/${r.id}/edit`}
                      className="rounded-lg px-2 py-1 text-xs font-semibold text-accent-600 hover:bg-[var(--premium-hover-bg)] dark:text-accent-400"
                    >
                      {t('common.edit')}
                    </Link>
                    <button
                      type="button"
                      className="rounded-lg px-2 py-1 text-xs font-semibold text-red-500 hover:bg-red-500/10"
                      onClick={() => {
                        if (window.confirm(t('common.confirmDelete'))) remove.mutate(r.id)
                      }}
                    >
                      {t('common.delete')}
                    </button>
                  </PermissionGate>
                </div>
              ),
            },
          ]}
        />
      </div>
    </div>
  )
}