import Link from "next/link";
import { notFound } from "next/navigation";
import { Panel, SectionHeading } from "@/components/ui";
import { getHistoryForDate } from "@/lib/delivery";

function formatDisplayDate(date: Date) {
  return new Intl.DateTimeFormat("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric"
  }).format(date);
}

function formatTime(date: Date) {
  return new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "2-digit"
  }).format(date);
}

function formatMealType(mealType: string) {
  return mealType === "both" ? "both meals" : mealType;
}

export default async function HistoryDatePage({
  params
}: {
  params: Promise<{ date: string }>;
}) {
  const { date } = await params;
  const history = await getHistoryForDate(date);

  if (!history) {
    notFound();
  }

  return (
    <div className="space-y-4">
      <header className="space-y-2 pt-2">
        <Link href="/history" className="inline-flex text-sm text-[var(--muted)]">
          ← Back
        </Link>
        <h1 className="text-3xl font-semibold">{formatDisplayDate(history.date)}</h1>
      </header>

      <Panel>
        <SectionHeading title="Payments" count={history.payments.length} />
        <div className="space-y-1.5">
          {history.payments.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">No payments recorded on this date.</p>
          ) : (
            history.payments.map((payment) => (
              <div key={payment.id} className="rounded-xl bg-stone-50 px-3 py-2">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-stone-900">{payment.person.name}</p>
                    <p className="text-xs text-[var(--muted)]">
                      Paid • {formatMealType(payment.mealType)} • {payment.coverageDays} days
                    </p>
                  </div>
                  <p className="text-[11px] text-[var(--muted)]">{formatTime(payment.createdAt)}</p>
                </div>
              </div>
            ))
          )}
        </div>
      </Panel>

      <Panel>
        <SectionHeading title="Awaiting payments" count={history.awaitingPayments.length} />
        <div className="space-y-1.5">
          {history.awaitingPayments.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">No awaiting payments on this date.</p>
          ) : (
            history.awaitingPayments.map((item) => (
              <div key={item.id} className="rounded-xl bg-stone-50 px-3 py-2">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-stone-900">{item.name}</p>
                    <p className="text-xs text-[var(--muted)]">
                      {item.item} x{item.quantity} • KSh {item.amount}
                    </p>
                  </div>
                  <p className="text-[11px] text-[var(--muted)]">{formatTime(item.createdAt)}</p>
                </div>
              </div>
            ))
          )}
        </div>
      </Panel>

      <Panel>
        <SectionHeading title="Activity" count={history.activity.length} />
        <div className="space-y-1.5">
          {history.activity.length === 0 ? (
            <p className="text-xs text-[var(--muted)]">No activity recorded on this date.</p>
          ) : (
            history.activity.map((item) => (
              <div key={item.id} className="rounded-xl bg-stone-50 px-3 py-2">
                <div className="flex items-start justify-between gap-3">
                  <p className="min-w-0 text-sm font-medium text-stone-900">{item.description}</p>
                  <p className="shrink-0 text-[11px] text-[var(--muted)]">{formatTime(item.createdAt)}</p>
                </div>
              </div>
            ))
          )}
        </div>
      </Panel>
    </div>
  );
}