'use client'

import Link from 'next/link'
import { useParams } from 'next/navigation'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Download } from 'lucide-react'
import { toast } from 'sonner'
import { api, type Ipc } from '@/lib/api'
import { Button } from '@/components/ui/Button'
import { Card } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { PermissionGate } from '@/components/auth/PermissionGate'

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

  const { data, refetch, isLoading } = useQuery({
    queryKey: ['ipc', id],
    queryFn: () => api.get<{ data: Ipc }>(`/ipcs/${id}`),
    enabled: Boolean(id),
  })

  const transition = useMutation({
    mutationFn: (action: string) => api.post(`/ipcs/${id}/${action}`),
    onSuccess: () => {
      toast.success(t('ipc.messages.statusUpdated'))
      refetch()
      queryClient.invalidateQueries({ queryKey: ['ipcs'] })
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const handleExport = async () => {
    try {
      const res = await api.get(`/ipcs/${id}/export/pdf`, { responseType: 'blob' })
      const url = window.URL.createObjectURL(new Blob([res.data as BlobPart]))
      const a = document.createElement('a')
      a.href = url
      a.download = `ipc_${id}.pdf`
      a.click()
      window.URL.revokeObjectURL(url)
    } catch {
      toast.error(t('common.somethingWentWrong'))
    }
  }

  const ipc = data?.data?.data

  if (isLoading || !ipc) {
    return <div className="p-6 text-sm text-[var(--text-muted)]">{t('common.loading')}</div>
  }

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <Link href="/ipc">
            <button
              type="button"
              className="premium-chip press-btn flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm"
            >
              <ArrowLeft size={15} />
              {t('common.back')}
            </button>
          </Link>
          <h1 className="premium-heading text-2xl font-bold">{ipc.ipc_number}</h1>
          <Badge variant="muted">{t(`ipc.status.${ipc.status}`, ipc.status)}</Badge>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button size="sm" variant="secondary" onClick={handleExport}>
            <Download size={14} />
            PDF
          </Button>
          {(ipc.status === 'draft' || ipc.status === 'rejected') && (
            <Button size="sm" onClick={() => transition.mutate('submit')}>
              {t('ipc.submit')}
            </Button>
          )}
          {ipc.status === 'approved' && (
            <PermissionGate permission="finance.manage">
              <Button
                size="sm"
                onClick={() =>
                  api
                    .post(`/invoices/from-ipc/${id}`)
                    .then((res) => {
                      toast.success(t('finance.messages.created'))
                      const invId = (res.data as { data?: { id?: number } })?.data?.id
                      if (invId) window.location.href = `/finance/invoices/${invId}`
                    })
                    .catch((err: { response?: { data?: { message?: string } } }) => {
                      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
                    })
                }
              >
                {t('finance.createInvoice')}
              </Button>
            </PermissionGate>
          )}
          {ipc.status === 'submitted' && (
            <>
              <Button size="sm" onClick={() => transition.mutate('approve')}>
                {t('ipc.approve')}
              </Button>
              <Button size="sm" variant="secondary" onClick={() => transition.mutate('reject')}>
                {t('ipc.reject')}
              </Button>
            </>
          )}
        </div>
      </div>

      <Card elevated>
        <div className="grid gap-3 sm:grid-cols-3 text-sm">
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('ipc.contract')}</div>
            <div className="font-medium">
              {ipc.contract?.contract_number} — {ipc.contract?.title}
            </div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('ipc.period')}</div>
            <div className="font-medium">
              {ipc.period_start?.slice(0, 10) ?? '—'} → {ipc.period_end?.slice(0, 10) ?? '—'}
            </div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('ipc.netPayable')}</div>
            <div className="font-medium">{Number(ipc.net_payable).toLocaleString()}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('ipc.retention')}</div>
            <div className="font-medium">{Number(ipc.retention_amount).toLocaleString()}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('ipc.deductions')}</div>
            <div className="font-medium">{Number(ipc.deductions).toLocaleString()}</div>
          </div>
        </div>
      </Card>

      <Card elevated>
        <h3 className="mb-3 text-sm font-semibold">{t('ipc.lines')}</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full text-left text-sm">
            <thead className="text-xs text-[var(--text-muted)]">
              <tr>
                <th className="px-2 py-2">BoQ</th>
                <th className="px-2 py-2">{t('ipc.prevQty')}</th>
                <th className="px-2 py-2">{t('ipc.currQty')}</th>
                <th className="px-2 py-2">{t('ipc.cumQty')}</th>
                <th className="px-2 py-2">{t('ipc.unitPrice')}</th>
                <th className="px-2 py-2">{t('ipc.amount')}</th>
                <th className="px-2 py-2">%</th>
              </tr>
            </thead>
            <tbody>
              {(ipc.lines ?? []).map((l) => (
                <tr key={l.id} className="border-t border-[var(--premium-divider)]">
                  <td className="px-2 py-2">
                    {l.boq_item?.item_code || l.boq_item_id}{' '}
                    <span className="text-[var(--text-muted)]">
                      {l.boq_item?.description?.slice(0, 40)}
                    </span>
                  </td>
                  <td className="px-2 py-2">{l.previous_qty}</td>
                  <td className="px-2 py-2">{l.current_qty}</td>
                  <td className="px-2 py-2">{l.cumulative_qty}</td>
                  <td className="px-2 py-2">{l.unit_price}</td>
                  <td className="px-2 py-2">{l.amount}</td>
                  <td className="px-2 py-2">{l.realization_pct}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  )
}