'use client'

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

export function InvoiceDetailPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string
  const queryClient = useQueryClient()
  const [amount, setAmount] = useState('')
  const [method, setMethod] = useState('bank_transfer')

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

  const action = useMutation({
    mutationFn: (path: string) => api.post(path),
    onSuccess: () => {
      toast.success(t('finance.messages.statusUpdated'))
      refetch()
      queryClient.invalidateQueries({ queryKey: ['invoices'] })
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const pay = useMutation({
    mutationFn: () =>
      api.post(`/invoices/${id}/payments`, {
        amount: Number(amount),
        method,
      }),
    onSuccess: () => {
      toast.success(t('finance.messages.paymentAdded'))
      setAmount('')
      refetch()
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const inv = data?.data?.data

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

  const isPurchase = inv.invoice_type === 'purchase'

  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={isPurchase ? '/finance/purchases' : '/finance/invoices'}>
            <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">{inv.invoice_number}</h1>
          <Badge variant="muted">{t(`finance.status.${inv.status}`, inv.status)}</Badge>
          {inv.has_price_alerts && <Badge variant="danger">{t('finance.priceAlert')}</Badge>}
        </div>
        <div className="flex flex-wrap gap-2">
          {!isPurchase && inv.status === 'draft' && (
            <PermissionGate permission="finance.manage">
              <Button size="sm" onClick={() => action.mutate(`/invoices/${id}/issue`)}>
                {t('finance.issue')}
              </Button>
            </PermissionGate>
          )}
          {isPurchase && inv.status === 'draft' && (
            <PermissionGate permission="purchasing.manage">
              <Button size="sm" onClick={() => action.mutate(`/purchase-invoices/${id}/submit`)}>
                {t('finance.submit')}
              </Button>
            </PermissionGate>
          )}
          {isPurchase && inv.status === 'submitted' && (
            <PermissionGate permission="purchasing.manage">
              <Button size="sm" onClick={() => action.mutate(`/purchase-invoices/${id}/approve`)}>
                {t('finance.approve')}
              </Button>
            </PermissionGate>
          )}
          {isPurchase && inv.status === 'approved' && (
            <PermissionGate permission="purchasing.manage">
              <Button size="sm" onClick={() => action.mutate(`/purchase-invoices/${id}/grn`)}>
                {t('finance.createGrn')}
              </Button>
            </PermissionGate>
          )}
        </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('finance.partner')}</div>
            <div className="font-medium">{inv.partner?.name || '—'}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('finance.total')}</div>
            <div className="font-medium">
              {Number(inv.total).toFixed(2)} {inv.currency}
            </div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('finance.balance')}</div>
            <div className="font-medium">
              {Number(inv.balance ?? Number(inv.total) - Number(inv.amount_paid)).toFixed(2)}
            </div>
          </div>
        </div>
      </Card>

      <Card elevated>
        <h2 className="mb-3 font-semibold">{t('finance.lines')}</h2>
        <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.description')}</th>
                <th className="py-2 pr-3">{t('finance.qty')}</th>
                <th className="py-2 pr-3">{t('finance.unitPrice')}</th>
                <th className="py-2 pr-3">{t('finance.lineTotal')}</th>
                <th className="py-2">{t('common.status')}</th>
              </tr>
            </thead>
            <tbody>
              {(inv.lines ?? []).map((l) => (
                <tr key={l.id} className="border-b border-[var(--premium-border)]/60">
                  <td className="py-2 pr-3">{l.description}</td>
                  <td className="py-2 pr-3">{l.quantity}</td>
                  <td className="py-2 pr-3">{Number(l.unit_price).toFixed(2)}</td>
                  <td className="py-2 pr-3">{Number(l.line_total).toFixed(2)}</td>
                  <td className="py-2">
                    {l.price_alert ? (
                      <Badge variant="danger">{t('finance.priceAlert')}</Badge>
                    ) : (
                      '—'
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      <PermissionGate permission="finance.manage">
        {['issued', 'partially_paid', 'approved', 'grn_created'].includes(inv.status) && (
          <Card elevated className="space-y-3">
            <h2 className="font-semibold">{t('finance.addPayment')}</h2>
            <div className="grid gap-3 sm:grid-cols-3">
              <Input
                label={t('finance.amount')}
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
              />
              <Select
                label={t('finance.method')}
                value={method}
                onChange={(e) => setMethod(e.target.value)}
                options={[
                  { value: 'bank_transfer', label: 'Bank transfer' },
                  { value: 'cash', label: 'Cash' },
                  { value: 'card', label: 'Card' },
                  { value: 'cheque', label: 'Cheque' },
                  { value: 'other', label: 'Other' },
                ]}
              />
              <div className="flex items-end">
                <Button
                  size="sm"
                  onClick={() => pay.mutate()}
                  disabled={!amount || pay.isPending}
                >
                  {t('finance.recordPayment')}
                </Button>
              </div>
            </div>
            {(inv.payments ?? []).length > 0 && (
              <ul className="space-y-1 text-sm">
                {inv.payments!.map((p) => (
                  <li key={p.id} className="flex justify-between border-b py-1">
                    <span>
                      {String(p.paid_at).slice(0, 10)} · {p.method}
                    </span>
                    <span className="font-medium">{Number(p.amount).toFixed(2)}</span>
                  </li>
                ))}
              </ul>
            )}
          </Card>
        )}
      </PermissionGate>
    </div>
  )
}