KanzlAI-mGMT/frontend/src/app/(app)/abrechnung/rechnungen/[id]/page.tsx

"use client";

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { api } from "@/lib/api";
import type { Invoice } from "@/lib/types";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import { Loader2, AlertTriangle } from "lucide-react";
import { Breadcrumb } from "@/components/layout/Breadcrumb";

const STATUS_BADGE: Record<string, string> = {
  draft: "bg-neutral-100 text-neutral-600",
  sent: "bg-blue-50 text-blue-700",
  paid: "bg-emerald-50 text-emerald-700",
  cancelled: "bg-red-50 text-red-600",
};

const STATUS_LABEL: Record<string, string> = {
  draft: "Entwurf",
  sent: "Versendet",
  paid: "Bezahlt",
  cancelled: "Storniert",
};

const TRANSITIONS: Record<string, { label: string; next: string }[]> = {
  draft: [
    { label: "Als versendet markieren", next: "sent" },
    { label: "Stornieren", next: "cancelled" },
  ],
  sent: [
    { label: "Als bezahlt markieren", next: "paid" },
    { label: "Stornieren", next: "cancelled" },
  ],
  paid: [],
  cancelled: [],
};

export default function InvoiceDetailPage() {
  const { id } = useParams<{ id: string }>();
  const queryClient = useQueryClient();

  const { data: invoice, isLoading, error } = useQuery({
    queryKey: ["invoice", id],
    queryFn: () => api.get<Invoice>(`/invoices/${id}`),
  });

  const statusMutation = useMutation({
    mutationFn: (status: string) =>
      api.patch<Invoice>(`/invoices/${id}/status`, { status }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["invoice", id] });
      queryClient.invalidateQueries({ queryKey: ["invoices"] });
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="h-5 w-5 animate-spin text-neutral-400" />
      </div>
    );
  }

  if (error || !invoice) {
    return (
      <div className="py-12 text-center">
        <AlertTriangle className="mx-auto h-6 w-6 text-red-500" />
        <p className="mt-2 text-sm text-neutral-500">
          Rechnung nicht gefunden.
        </p>
      </div>
    );
  }

  const items = Array.isArray(invoice.items) ? invoice.items : [];
  const actions = TRANSITIONS[invoice.status] ?? [];

  return (
    <div className="animate-fade-in">
      <Breadcrumb
        items={[
          { label: "Dashboard", href: "/dashboard" },
          { label: "Abrechnung", href: "/abrechnung" },
          { label: "Rechnungen", href: "/abrechnung/rechnungen" },
          { label: invoice.invoice_number },
        ]}
      />

      <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <div className="flex items-center gap-3">
            <h1 className="text-lg font-semibold text-neutral-900">
              {invoice.invoice_number}
            </h1>
            <span
              className={`rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[invoice.status]}`}
            >
              {STATUS_LABEL[invoice.status]}
            </span>
          </div>
          <p className="mt-1 text-sm text-neutral-500">
            {invoice.client_name}
          </p>
        </div>
        <div className="flex gap-2">
          {actions.map((action) => (
            <button
              key={action.next}
              onClick={() => statusMutation.mutate(action.next)}
              disabled={statusMutation.isPending}
              className="rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-neutral-800 disabled:opacity-50"
            >
              {action.label}
            </button>
          ))}
        </div>
      </div>

      {/* Invoice details */}
      <div className="mt-6 rounded-md border border-neutral-200 bg-white">
        {/* Client info */}
        <div className="border-b border-neutral-100 p-4">
          <p className="text-xs text-neutral-500">Empfaenger</p>
          <p className="mt-1 text-sm font-medium text-neutral-900">
            {invoice.client_name}
          </p>
          {invoice.client_address && (
            <p className="mt-0.5 text-sm text-neutral-500 whitespace-pre-line">
              {invoice.client_address}
            </p>
          )}
        </div>

        {/* Dates */}
        <div className="flex flex-wrap gap-6 border-b border-neutral-100 p-4">
          {invoice.issued_at && (
            <div>
              <p className="text-xs text-neutral-500">Rechnungsdatum</p>
              <p className="mt-0.5 text-sm text-neutral-900">
                {format(new Date(invoice.issued_at), "d. MMMM yyyy", { locale: de })}
              </p>
            </div>
          )}
          {invoice.due_at && (
            <div>
              <p className="text-xs text-neutral-500">Faellig am</p>
              <p className="mt-0.5 text-sm text-neutral-900">
                {format(new Date(invoice.due_at), "d. MMMM yyyy", { locale: de })}
              </p>
            </div>
          )}
          {invoice.paid_at && (
            <div>
              <p className="text-xs text-neutral-500">Bezahlt am</p>
              <p className="mt-0.5 text-sm text-neutral-900">
                {format(new Date(invoice.paid_at), "d. MMMM yyyy", { locale: de })}
              </p>
            </div>
          )}
        </div>

        {/* Line items */}
        <div className="p-4">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-neutral-100 text-left text-xs text-neutral-500">
                <th className="pb-2 font-medium">Beschreibung</th>
                <th className="pb-2 font-medium text-right">Betrag</th>
              </tr>
            </thead>
            <tbody>
              {items.map((item, i) => (
                <tr key={i} className="border-b border-neutral-50">
                  <td className="py-2 text-neutral-900">
                    {item.description}
                    {item.duration_minutes && item.hourly_rate && (
                      <span className="ml-2 text-xs text-neutral-400">
                        ({Math.floor(item.duration_minutes / 60)}h{" "}
                        {item.duration_minutes % 60}min x {item.hourly_rate} EUR/h)
                      </span>
                    )}
                  </td>
                  <td className="py-2 text-right text-neutral-900">
                    {item.amount.toFixed(2)} EUR
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Totals */}
        <div className="border-t border-neutral-200 p-4">
          <div className="flex justify-end">
            <div className="w-48 space-y-1">
              <div className="flex justify-between text-sm">
                <span className="text-neutral-500">Netto</span>
                <span>{invoice.subtotal.toFixed(2)} EUR</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-neutral-500">
                  USt. {invoice.tax_rate}%
                </span>
                <span>{invoice.tax_amount.toFixed(2)} EUR</span>
              </div>
              <div className="flex justify-between border-t border-neutral-200 pt-1 text-sm font-semibold">
                <span>Gesamt</span>
                <span>{invoice.total.toFixed(2)} EUR</span>
              </div>
            </div>
          </div>
        </div>

        {/* Notes */}
        {invoice.notes && (
          <div className="border-t border-neutral-100 p-4">
            <p className="text-xs text-neutral-500">Anmerkungen</p>
            <p className="mt-1 text-sm text-neutral-700">{invoice.notes}</p>
          </div>
        )}
      </div>
    </div>
  );
}