'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 } from 'lucide-react'
import { api, type PartnerLedger } from '@/lib/api'
import { Card } from '@/components/ui/Card'

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

  const { data, isLoading } = useQuery({
    queryKey: ['partner-ledger', id],
    queryFn: () => api.get<{ data: PartnerLedger }>(`/finance/partners/${id}/ledger`),
    enabled: Boolean(id),
  })

  const ledger = data?.data?.data

  if (isLoading || !ledger) {
    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 gap-3">
        <Link href={`/partners/${id}/edit`}>
          <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">
          {t('finance.ledger')} — {ledger.partner.name}
        </h1>
      </div>

      <Card elevated>
        <div className="mb-4 flex flex-wrap gap-6 text-sm">
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('finance.openingBalance')}</div>
            <div className="font-semibold">{Number(ledger.partner.opening_balance).toFixed(2)}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('finance.closingBalance')}</div>
            <div className="font-semibold">{Number(ledger.closing_balance).toFixed(2)}</div>
          </div>
        </div>
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b text-left text-[var(--text-muted)]">
                <th className="py-2 pr-3">{t('finance.date')}</th>
                <th className="py-2 pr-3">{t('finance.reference')}</th>
                <th className="py-2 pr-3">{t('finance.description')}</th>
                <th className="py-2 pr-3">{t('finance.debit')}</th>
                <th className="py-2 pr-3">{t('finance.credit')}</th>
                <th className="py-2">{t('finance.balance')}</th>
              </tr>
            </thead>
            <tbody>
              {ledger.entries.map((e, i) => (
                <tr key={i} className="border-b border-[var(--premium-border)]/60">
                  <td className="py-2 pr-3 whitespace-nowrap">{String(e.date).slice(0, 10)}</td>
                  <td className="py-2 pr-3 font-mono text-xs">{e.reference}</td>
                  <td className="py-2 pr-3">{e.description}</td>
                  <td className="py-2 pr-3">{e.debit ? Number(e.debit).toFixed(2) : '—'}</td>
                  <td className="py-2 pr-3">{e.credit ? Number(e.credit).toFixed(2) : '—'}</td>
                  <td className="py-2 font-medium">{Number(e.balance ?? 0).toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>
    </div>
  )
}