"use client";

import Link from "next/link";
import { useStatements } from "@/lib/hooks";

function formatDate(d: string | null) {
  if (!d) return "-";
  return new Date(d).toLocaleDateString("en-AU", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function formatCurrency(amount: number | null, currency = "AUD") {
  if (amount === null || amount === undefined) return "-";
  return new Intl.NumberFormat("en-AU", {
    style: "currency",
    currency,
  }).format(amount);
}

export default function StatementsPage() {
  const { data: statements, isLoading } = useStatements();

  return (
    <div>
      <h2 className="text-xl font-semibold mb-4">Statements</h2>

      {isLoading ? (
        <p className="text-zinc-500">Loading...</p>
      ) : !statements?.length ? (
        <p className="text-zinc-500">No statements found</p>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {statements.map((s) => (
            <div
              key={s.id}
              className="border border-zinc-800 rounded-lg p-4 bg-zinc-900/50 hover:border-zinc-700 transition-colors"
            >
              <div className="flex items-center justify-between mb-2">
                <h3 className="font-medium">{s.bank_name}</h3>
                <span className="text-xs text-zinc-500">{s.currency}</span>
              </div>
              {s.card_name && (
                <p className="text-sm text-zinc-400 mb-2">{s.card_name}</p>
              )}
              <div className="text-sm text-zinc-400 space-y-1">
                <p>Account: {s.account_number}</p>
                <p>
                  Period: {formatDate(s.billing_start_date)} - {formatDate(s.billing_end_date)}
                </p>
                <p>Due: {formatDate(s.payment_due_date)}</p>
              </div>
              <div className="mt-3 pt-3 border-t border-zinc-800 flex items-center justify-between">
                <div>
                  <p className="text-lg font-semibold text-red-400">
                    {formatCurrency(s.total_amount_due, s.currency)}
                  </p>
                  <p className="text-xs text-zinc-500">
                    {s.transaction_count} transactions
                  </p>
                </div>
                <Link
                  href={`/transactions?statement_id=${s.id}`}
                  className="px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 rounded text-sm transition-colors"
                >
                  View
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}