'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 } from 'lucide-react'
import { toast } from 'sonner'
import { api, type PaginatedResponse, type Ipc, type Contract } 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 { Input } from '@/components/ui/Input'
import { Card } from '@/components/ui/Card'

const statusVariant = (status: string) => {
  if (status === 'approved' || status === 'invoiced') return 'success'
  if (status === 'rejected') return 'danger'
  if (status === 'draft') return 'muted'
  return 'warning'
}

export function IpcListPage() {
  const { t } = useTranslation()
  const queryClient = useQueryClient()
  const [search, setSearch] = useState('')
  const [status, setStatus] = useState('')
  const [page, setPage] = useState(1)
  const [showGenerate, setShowGenerate] = useState(false)
  const [contractId, setContractId] = useState('')
  const [periodStart, setPeriodStart] = useState('')
  const [periodEnd, setPeriodEnd] = useState('')

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

  const { data: contractsData } = useQuery({
    queryKey: ['contracts-options'],
    queryFn: () =>
      api.get<PaginatedResponse<Contract>>('/contracts', { params: { per_page: 200 } }),
  })

  const generate = useMutation({
    mutationFn: () =>
      api.post<{ data: Ipc }>('/ipcs/generate', {
        contract_id: Number(contractId),
        period_start: periodStart,
        period_end: periodEnd,
      }),
    onSuccess: (res) => {
      toast.success(t('ipc.messages.generated'))
      queryClient.invalidateQueries({ queryKey: ['ipcs'] })
      setShowGenerate(false)
      const id = res.data?.data?.id
      if (id) window.location.href = `/ipc/${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" data-tour="page-heading">{t('ipc.title')}</h1>
        <Button size="sm" onClick={() => setShowGenerate((v) => !v)}>
          <Plus size={14} />
          {t('ipc.generate')}
        </Button>
      </div>

      {showGenerate && (
        <Card elevated>
          <div className="grid gap-3 sm:grid-cols-4">
            <Select
              value={contractId}
              onChange={(e) => setContractId(e.target.value)}
              options={[
                { value: '', label: t('ipc.selectContract') },
                ...(contractsData?.data.data ?? []).map((c) => ({
                  value: String(c.id),
                  label: `${c.contract_number} — ${c.title}`,
                })),
              ]}
            />
            <Input type="date" value={periodStart} onChange={(e) => setPeriodStart(e.target.value)} />
            <Input type="date" value={periodEnd} onChange={(e) => setPeriodEnd(e.target.value)} />
            <Button
              disabled={!contractId || !periodStart || !periodEnd || generate.isPending}
              onClick={() => generate.mutate()}
            >
              {t('ipc.generate')}
            </Button>
          </div>
        </Card>
      )}

      <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('ipc.search')}
          toolbar={
            <Select
              value={status}
              onChange={(e) => {
                setStatus(e.target.value)
                setPage(1)
              }}
              options={[
                { value: '', label: t('common.allStatuses') },
                ...(['draft', 'submitted', 'approved', 'invoiced', 'rejected'] as const).map(
                  (value) => ({ value, label: t(`ipc.status.${value}`) }),
                ),
              ]}
            />
          }
          pagination={meta}
          onPageChange={setPage}
          columns={[
            { key: 'ipc_number', header: t('common.code'), className: 'font-mono text-xs' },
            {
              key: 'contract',
              header: t('ipc.contract'),
              render: (r) => r.contract?.contract_number || '—',
            },
            {
              key: 'status',
              header: t('common.status'),
              render: (r) => (
                <Badge variant={statusVariant(r.status)}>
                  {t(`ipc.status.${r.status}`, r.status)}
                </Badge>
              ),
            },
            {
              key: 'net_payable',
              header: t('ipc.netPayable'),
              render: (r) => Number(r.net_payable).toLocaleString(),
            },
            {
              key: 'actions',
              header: t('common.actions'),
              className: 'text-right',
              render: (r) => (
                <Link
                  href={`/ipc/${r.id}`}
                  className="rounded-lg px-2 py-1 text-xs font-semibold text-accent-600 hover:bg-[var(--premium-hover-bg)]"
                >
                  {t('common.edit')}
                </Link>
              ),
            },
          ]}
        />
      </div>
    </div>
  )
}