import { createResource, Show } from "solid-js";
import { useParams, useNavigate } from "@solidjs/router";
import DashboardLayout from "~/components/DashboardLayout";
import { api } from "~/lib/api";

interface Invoice {
  id: string;
  invoice_number: string;
  package_name: string;
  subtotal: number;
  gst_amount: number;
  total: number;
  status: string;
  issued_at: string;
  payment_method: string;
}

export default function InvoiceDetailPage() {
  const params = useParams();
  const navigate = useNavigate();

  const [invoice] = createResource(async () => {
    const res = await api.get(`/credits/invoices/${params.id}`);
    return res.data;
  });

  const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString("en-IN", {
      day: "numeric",
      month: "long",
      year: "numeric",
    });
  };

  const formatPrice = (paise: number) => {
    return `₹${(paise / 100).toLocaleString("en-IN", { minimumFractionDigits: 2 })}`;
  };

  const downloadInvoice = () => {
    // In production, this would download a PDF
    alert("PDF download will be available in production");
  };

  return (
    <DashboardLayout>
      <div class="p-6 max-w-3xl mx-auto">
        <button
          onClick={() => navigate("/dashboard/wallet/invoices")}
          class="mb-4 text-gray-600 hover:text-gray-900 flex items-center gap-2"
        >
          ← Back to Invoices
        </button>

        <Show when={invoice.loading}>
          <div class="text-center py-12">
            <div class="animate-spin w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full mx-auto mb-4" />
            <p class="text-gray-500">Loading invoice...</p>
          </div>
        </Show>

        <Show when={invoice()}>
          {(inv: Invoice) => (
            <div class="bg-white border rounded-xl overflow-hidden">
              {/* Header */}
              <div class="bg-gray-900 text-white p-6">
                <div class="flex justify-between items-start">
                  <div>
                    <h1 class="text-2xl font-bold">INVOICE</h1>
                    <p class="text-gray-400 mt-1">#{inv.invoice_number}</p>
                  </div>
                  <div class="text-right">
                    <span
                      class={`inline-block px-3 py-1 rounded-full text-sm ${
                        inv.status === "PAID" ? "bg-green-500" : "bg-yellow-500"
                      }`}
                    >
                      {inv.status}
                    </span>
                  </div>
                </div>
              </div>

              <div class="p-6">
                {/* Invoice Info */}
                <div class="grid grid-cols-2 gap-6 mb-8">
                  <div>
                    <p class="text-sm text-gray-500 mb-1">Issue Date</p>
                    <p class="font-medium">{formatDate(inv.issued_at)}</p>
                  </div>
                  <div>
                    <p class="text-sm text-gray-500 mb-1">Payment Method</p>
                    <p class="font-medium">{inv.payment_method || "Razorpay"}</p>
                  </div>
                </div>

                {/* Package Details */}
                <div class="border rounded-lg p-4 mb-6">
                  <h3 class="font-semibold mb-3">Package Details</h3>
                  <div class="flex justify-between items-center">
                    <span>{inv.package_name}</span>
                    <span class="font-medium">{formatPrice(inv.subtotal)}</span>
                  </div>
                </div>

                {/* Amount Breakdown */}
                <div class="border-t pt-4 space-y-2">
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">Subtotal</span>
                    <span>{formatPrice(inv.subtotal)}</span>
                  </div>
                  <div class="flex justify-between text-sm">
                    <span class="text-gray-600">GST (18%)</span>
                    <span>{formatPrice(inv.gst_amount)}</span>
                  </div>
                  <div class="flex justify-between text-lg font-bold pt-2 border-t">
                    <span>Total</span>
                    <span>{formatPrice(inv.total)}</span>
                  </div>
                </div>

                {/* GST Notice */}
                <div class="mt-6 p-4 bg-gray-50 rounded-lg text-sm text-gray-600">
                  <p>This is a GST-compliant invoice for your records.</p>
                  <p class="mt-1">Nxtgauge Technologies Pvt. Ltd.</p>
                  <p>GSTIN: 27AABCU9603R1ZX</p>
                </div>

                {/* Actions */}
                <div class="mt-6 flex gap-3">
                  <button
                    onClick={downloadInvoice}
                    class="flex-1 px-4 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
                  >
                    Download PDF
                  </button>
                  <button
                    onClick={() => window.print()}
                    class="px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    Print
                  </button>
                </div>
              </div>
            </div>
          )}
        </Show>
      </div>
    </DashboardLayout>
  );
}
