'use client'

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

export function PayrollListPage() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [page, setPage] = useState(1)
  const [periodYm, setPeriodYm] = useState(new Date().toISOString().slice(0, 7))

  const { data, isLoading } = useQuery({
    queryKey: ['payroll-runs', page],
    queryFn: () =>
      api.get<PaginatedResponse<PayrollRun>>('/payroll/runs', {
        params: { page, per_page: 25 },
      }),
  })

  const create = useMutation({
    mutationFn: () => api.post('/payroll/runs', { period_ym: periodYm }),
    onSuccess: (res) => {
      toast.success(t('payroll.messages.created'))
      queryClient.invalidateQueries({ queryKey: ['payroll-runs'] })
      const id = (res.data as { data?: { id?: number } })?.data?.id
      if (id) window.location.href = `/payroll/${id}`
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

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

  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">{t('payroll.title')}</h1>
        <PermissionGate permission="payroll.manage">
          <div className="flex items-end gap-2">
            <Input
              label={t('payroll.periodYm')}
              type="month"
              value={periodYm}
              onChange={(e) => setPeriodYm(e.target.value)}
            />
            <Button size="sm" onClick={() => create.mutate()} disabled={create.isPending}>
              <Plus size={14} />
              {t('payroll.createRun')}
            </Button>
          </div>
        </PermissionGate>
      </div>

      <DataTable
        data={rows}
        loading={isLoading}
        emptyMessage={t('common.noResults')}
        pagination={meta}
        onPageChange={setPage}
        columns={[
          {
            key: 'period_ym',
            header: t('payroll.periodYm'),
            render: (r) => (
              <Link href={`/payroll/${r.id}`} className="text-brand-700 hover:underline">
                {r.period_ym}
              </Link>
            ),
          },
          {
            key: 'status',
            header: t('common.status'),
            render: (r) => (
              <Badge variant="muted">{t(`payroll.status.${r.status}`, r.status)}</Badge>
            ),
          },
          {
            key: 'total_gross',
            header: t('payroll.gross'),
            render: (r) => Number(r.total_gross).toFixed(2),
          },
          {
            key: 'total_net',
            header: t('payroll.net'),
            render: (r) => Number(r.total_net).toFixed(2),
          },
        ]}
      />
    </div>
  )
}