pn-new-crm/src/components/invoices/invoice-detail.tsx

'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

import { Loader2, Send, CreditCard } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { InvoicePdfPreview } from './invoice-pdf-preview';
import { apiFetch } from '@/lib/api/client';
import { recordPaymentSchema, type RecordPaymentInput } from '@/lib/validators/invoices';

const STATUS_COLORS: Record<string, string> = {
  draft: 'bg-gray-100 text-gray-700 border-gray-200',
  sent: 'bg-blue-100 text-blue-700 border-blue-200',
  paid: 'bg-green-100 text-green-700 border-green-200',
  overdue: 'bg-red-100 text-red-700 border-red-200',
  cancelled: 'bg-gray-100 text-gray-500 border-gray-200',
};

interface InvoiceDetailProps {
  invoiceId: string;
}

export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
  const queryClient = useQueryClient();
  const [tab, setTab] = useState('overview');

  const { data, isLoading, error } = useQuery<{ data: Record<string, unknown> }>({
    queryKey: ['invoices', invoiceId],
    queryFn: () => apiFetch(`/api/v1/invoices/${invoiceId}`),
  });

  const sendMutation = useMutation({
    mutationFn: () =>
      apiFetch(`/api/v1/invoices/${invoiceId}/send`, { method: 'POST' }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
      queryClient.invalidateQueries({ queryKey: ['invoices'] });
    },
  });

  const paymentForm = useForm<RecordPaymentInput>({
    resolver: zodResolver(recordPaymentSchema),
    defaultValues: { paymentDate: new Date().toISOString().split('T')[0] },
  });

  const paymentMutation = useMutation({
    mutationFn: (values: RecordPaymentInput) =>
      apiFetch(`/api/v1/invoices/${invoiceId}/payment`, {
        method: 'PATCH',
        body: JSON.stringify(values),
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
      queryClient.invalidateQueries({ queryKey: ['invoices'] });
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center p-12">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error || !data?.data) {
    return (
      <div className="p-6 text-center text-muted-foreground">
        Failed to load invoice details.
      </div>
    );
  }

  const invoice = data.data;
  const statusColor = STATUS_COLORS[invoice.status] ?? STATUS_COLORS.draft;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3">
            <h2 className="text-xl font-semibold font-mono">{invoice.invoiceNumber}</h2>
            <Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
              {invoice.status}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground mt-0.5">{invoice.clientName}</p>
        </div>
        <div className="flex items-center gap-2">
          {invoice.status === 'draft' && (
            <Button
              variant="outline"
              size="sm"
              onClick={() => sendMutation.mutate()}
              disabled={sendMutation.isPending}
            >
              {sendMutation.isPending ? (
                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
              ) : (
                <Send className="mr-1.5 h-4 w-4" />
              )}
              Send Invoice
            </Button>
          )}
        </div>
      </div>

      <Tabs value={tab} onValueChange={setTab}>
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="expenses">Linked Expenses</TabsTrigger>
          <TabsTrigger value="pdf">PDF Preview</TabsTrigger>
          <TabsTrigger value="payment">Payment</TabsTrigger>
        </TabsList>

        {/* Overview */}
        <TabsContent value="overview" className="space-y-4 pt-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Total</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-2xl font-bold tabular-nums">
                  {Number(invoice.total).toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })}{' '}
                  {invoice.currency}
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Due Date</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm">{invoice.dueDate}</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Payment Terms</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm capitalize">{invoice.paymentTerms}</p>
              </CardContent>
            </Card>
          </div>

          {/* Line items */}
          {invoice.lineItems && invoice.lineItems.length > 0 && (
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Line Items</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground border-b pb-2">
                    <span className="col-span-6">Description</span>
                    <span className="col-span-2 text-right">Qty</span>
                    <span className="col-span-2 text-right">Unit Price</span>
                    <span className="col-span-2 text-right">Total</span>
                  </div>
                  {(invoice.lineItems as Record<string, unknown>[]).map((li) => (
                    <div key={li.id} className="grid grid-cols-12 gap-2 text-sm">
                      <span className="col-span-6">{li.description}</span>
                      <span className="col-span-2 text-right tabular-nums">{li.quantity}</span>
                      <span className="col-span-2 text-right tabular-nums">
                        {Number(li.unitPrice).toFixed(2)}
                      </span>
                      <span className="col-span-2 text-right tabular-nums font-medium">
                        {Number(li.total).toFixed(2)}
                      </span>
                    </div>
                  ))}
                </div>

                {/* Totals */}
                <div className="mt-4 border-t pt-4 space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Subtotal</span>
                    <span className="tabular-nums">
                      {Number(invoice.subtotal).toFixed(2)} {invoice.currency}
                    </span>
                  </div>
                  {Number(invoice.discountAmount) > 0 && (
                    <div className="flex justify-between text-green-600">
                      <span>Discount ({invoice.discountPct}%)</span>
                      <span className="tabular-nums">
                        -{Number(invoice.discountAmount).toFixed(2)} {invoice.currency}
                      </span>
                    </div>
                  )}
                  {Number(invoice.feeAmount) > 0 && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Fee ({invoice.feePct}%)</span>
                      <span className="tabular-nums">
                        +{Number(invoice.feeAmount).toFixed(2)} {invoice.currency}
                      </span>
                    </div>
                  )}
                  <div className="flex justify-between font-semibold border-t pt-2">
                    <span>Total</span>
                    <span className="tabular-nums">
                      {Number(invoice.total).toFixed(2)} {invoice.currency}
                    </span>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {invoice.notes && (
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Notes</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
                  {invoice.notes}
                </p>
              </CardContent>
            </Card>
          )}
        </TabsContent>

        {/* Linked Expenses */}
        <TabsContent value="expenses" className="pt-4">
          {invoice.linkedExpenses && invoice.linkedExpenses.length > 0 ? (
            <div className="space-y-2">
              {(invoice.linkedExpenses as Record<string, unknown>[]).map((exp) => (
                <div
                  key={exp.id}
                  className="flex items-center justify-between p-3 border rounded-md text-sm"
                >
                  <div>
                    <p className="font-medium">
                      {exp.establishmentName ?? 'Unnamed Expense'}
                    </p>
                    <p className="text-muted-foreground text-xs">
                      {exp.category ?? '—'} &middot; {exp.expenseDate}
                    </p>
                  </div>
                  <span className="font-medium tabular-nums">
                    {Number(exp.amount).toFixed(2)} {exp.currency}
                  </span>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-muted-foreground py-6 text-center">
              No expenses linked to this invoice.
            </p>
          )}
        </TabsContent>

        {/* PDF Preview */}
        <TabsContent value="pdf" className="pt-4">
          <InvoicePdfPreview
            invoiceId={invoiceId}
            pdfFileId={invoice.pdfFileId}
          />
        </TabsContent>

        {/* Payment */}
        <TabsContent value="payment" className="pt-4">
          {invoice.status === 'paid' ? (
            <Card>
              <CardContent className="pt-6 space-y-3 text-sm">
                <div className="flex items-center gap-2">
                  <Badge
                    variant="outline"
                    className="bg-green-100 text-green-700 border-green-200"
                  >
                    Paid
                  </Badge>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <span className="text-muted-foreground">Payment Date</span>
                    <p className="mt-0.5">{invoice.paymentDate ?? '—'}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Method</span>
                    <p className="mt-0.5 capitalize">
                      {invoice.paymentMethod ?? '—'}
                    </p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Reference</span>
                    <p className="mt-0.5">{invoice.paymentReference ?? '—'}</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardHeader>
                <CardTitle className="text-sm font-medium">Record Payment</CardTitle>
              </CardHeader>
              <CardContent>
                <form
                  onSubmit={paymentForm.handleSubmit((values) =>
                    paymentMutation.mutate(values),
                  )}
                  className="space-y-4"
                >
                  <div className="space-y-1">
                    <Label htmlFor="paymentDate">Payment Date</Label>
                    <Input
                      id="paymentDate"
                      type="date"
                      {...paymentForm.register('paymentDate')}
                    />
                    {paymentForm.formState.errors.paymentDate && (
                      <p className="text-xs text-destructive">
                        {paymentForm.formState.errors.paymentDate.message}
                      </p>
                    )}
                  </div>
                  <div className="space-y-1">
                    <Label htmlFor="paymentMethod">Payment Method</Label>
                    <Input
                      id="paymentMethod"
                      placeholder="e.g. bank_transfer, credit_card"
                      {...paymentForm.register('paymentMethod')}
                    />
                  </div>
                  <div className="space-y-1">
                    <Label htmlFor="paymentReference">Reference / Transaction ID</Label>
                    <Input
                      id="paymentReference"
                      placeholder="Optional reference"
                      {...paymentForm.register('paymentReference')}
                    />
                  </div>
                  <Button
                    type="submit"
                    disabled={paymentMutation.isPending}
                  >
                    {paymentMutation.isPending ? (
                      <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
                    ) : (
                      <CreditCard className="mr-1.5 h-4 w-4" />
                    )}
                    Mark as Paid
                  </Button>
                </form>
              </CardContent>
            </Card>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}