import Link from "next/link";
import { StatusBadge } from "@/components/shared/status-badge";
import { formatEnergyKwh, recentDateTime } from "@/lib/format";
import { sessionStatusLabel, sessionTone } from "./presentation";
import type { Session } from "./types";
export function RecentSessions({
  data,
  error,
}: {
  data: Session[] | null;
  error: string | null;
}) {
  const sessions = data ?? [];
  return (
    <section className="detail-panel overflow-hidden">
      <div className="flex items-center justify-between gap-4 px-6 py-4">
        <h2 className="text-lg font-semibold">Recent Sessions</h2>
        <Link
          href="/sessions"
          className="rounded-lg border border-input px-4 py-3"
        >
          See all
        </Link>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full min-w-[1120px] text-sm">
          <thead className="border-y bg-muted/50">
            <tr>
              {[
                "ID",
                "Customer",
                "Charging Station",
                "Energy Delivered",
                "Start Time",
                "Status",
              ].map((label) => (
                <th
                  key={label}
                  className="px-6 py-3 text-left text-xs font-medium text-muted-foreground"
                >
                  {label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {error ? (
              <tr>
                <td colSpan={6} role="alert" className="px-6 py-10 text-center text-destructive">
                  {error}
                </td>
              </tr>
            ) : sessions.length ? sessions.map((row) => (
              <tr key={row.id} className="border-b">
                <td className="whitespace-nowrap px-6 py-3.5">
                  <Link href={`/sessions/${row.id}`}>{row.id}</Link>
                </td>
                <td className="px-6 py-3.5">
                  <div className="flex items-center gap-3">
                    <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted">
                      {row.userName === "—" ? "?" : row.userName.trim().charAt(0).toUpperCase()}
                    </span>
                    <div>
                      <p className="text-muted-foreground">{row.userName}</p>
                      <p className="font-medium">{row.idTag || "—"}</p>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-3.5">
                  <Link
                    className="underline"
                    href={`/chargepoints/${row.chargepointId}`}
                  >
                    {row.chargepointName}
                  </Link>
                </td>
                <td className="whitespace-nowrap px-6 py-3.5">{formatEnergyKwh(row.energy)} kWh</td>
                <td className="whitespace-nowrap px-6 py-3.5">{recentDateTime(row.start)}</td>
                <td className="px-6 py-3.5">
                  <StatusBadge tone={sessionTone(row.status)}>
                    {sessionStatusLabel(row.status)}
                  </StatusBadge>
                </td>
              </tr>
            )) : (
              <tr>
                <td colSpan={6} className="px-6 py-10 text-center text-muted-foreground">
                  No recent sessions found.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </section>
  );
}