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

'use client';

import { useState, useEffect } 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 { format } from 'date-fns';

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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { InvoicePdfPreview } from './invoice-pdf-preview';
import { apiFetch } from '@/lib/api/client';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
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',
};

// Display labels for snake_case enum values stored in the DB.
const PAYMENT_METHOD_LABELS: Record<string, string> = {
  bank_transfer: 'Bank transfer',
  credit_card: 'Credit card',
  cash: 'Cash',
  cheque: 'Cheque',
  check: 'Check',
  wire: 'Wire',
  other: 'Other',
};

const PAYMENT_METHOD_OPTIONS: Array<{ value: string; label: string }> = [
  { value: 'bank_transfer', label: 'Bank transfer' },
  { value: 'credit_card', label: 'Credit card' },
  { value: 'cash', label: 'Cash' },
  { value: 'cheque', label: 'Cheque' },
  { value: 'wire', label: 'Wire' },
  { value: 'other', label: 'Other' },
];

function formatPaymentMethod(method: string | null | undefined): string {
  if (!method) return '—';
  return PAYMENT_METHOD_LABELS[method] ?? method.replace(/_/g, ' ');
}

function formatDateOnly(value: string | null | undefined): string {
  if (!value) return '—';
  // Stored values are typically YYYY-MM-DD or ISO. Treat as date-only to avoid TZ shift.
  const isoDate = value.length === 10 ? value + 'T00:00:00' : value;
  const d = new Date(isoDate);
  if (Number.isNaN(d.getTime())) return value;
  return format(d, 'MMM d, yyyy');
}

interface InvoiceDetailProps {
  invoiceId: string;
}

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

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { data, isLoading, error } = useQuery<{ data: any }>({
    queryKey: ['invoices', invoiceId],
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    queryFn: () => apiFetch<{ data: any }>(`/api/v1/invoices/${invoiceId}`),
  });

  const { setChrome } = useMobileChrome();
  const titleForChrome: string | null = data?.data?.invoiceNumber ?? null;
  useEffect(() => {
    setChrome({ title: titleForChrome, showBackButton: true });
    return () => setChrome({ title: null, showBackButton: false });
  }, [titleForChrome, setChrome]);

  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: 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="rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs flex items-center justify-between gap-4 flex-wrap">
        <div className="min-w-0">
          <div className="text-xs font-semibold uppercase tracking-wide text-brand">Invoice</div>
          <div className="mt-1 flex items-center gap-3 flex-wrap">
            <h1 className="truncate text-2xl font-bold tracking-tight text-foreground font-mono">
              {invoice.invoiceNumber}
            </h1>
            <Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
              {invoice.status}
            </Badge>
          </div>
          <p className="text-sm text-muted-foreground mt-1">{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">{formatDateOnly(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>
                  {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                  {(invoice.lineItems as any[]).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">
              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
              {(invoice.linkedExpenses as any[]).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">{formatDateOnly(invoice.paymentDate)}</p>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Method</span>
                    <p className="mt-0.5">{formatPaymentMethod(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>
                    <Select
                      value={paymentForm.watch('paymentMethod') ?? ''}
                      onValueChange={(v) =>
                        paymentForm.setValue('paymentMethod', v, { shouldValidate: true })
                      }
                    >
                      <SelectTrigger id="paymentMethod">
                        <SelectValue placeholder="Select a method" />
                      </SelectTrigger>
                      <SelectContent>
                        {PAYMENT_METHOD_OPTIONS.map((opt) => (
                          <SelectItem key={opt.value} value={opt.value}>
                            {opt.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </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>
  );
}