import { Activity } from "lucide-react"

type ActivityItem = {
  id: string
  room_id: string
  started_at: string
  ended_at: string | null
  duration_seconds: number | null
  user_a_name: string | null
  user_b_name: string | null
}

export function RecentActivity({ items }: { items: ActivityItem[] }) {
  return (
    <div className="rounded-xl border border-border bg-background shadow-sm">
      <div className="flex items-center justify-between border-b border-border px-4 py-3">
        <div className="flex items-center gap-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
            <Activity className="h-4 w-4" aria-hidden="true" />
          </div>
          <div>
            <p className="text-sm font-semibold text-foreground">Recent activity</p>
            <p className="text-xs text-muted-foreground">Latest call sessions</p>
          </div>
        </div>
        <span className="text-xs text-muted-foreground">{items.length} items</span>
      </div>
      {items.length === 0 ? (
        <div className="flex flex-col items-center justify-center gap-1 px-4 py-12 text-center">
          <p className="text-sm font-medium text-foreground">No activity yet</p>
          <p className="text-xs text-muted-foreground">
            Sessions will appear here once users start matching.
          </p>
        </div>
      ) : (
        <ul className="divide-y divide-border">
          {items.map((it) => {
            const live = !it.ended_at
            const a = it.user_a_name || "Guest A"
            const b = it.user_b_name || "Guest B"
            const duration = it.duration_seconds
              ? formatDuration(it.duration_seconds)
              : live
                ? "ongoing"
                : "—"
            return (
              <li
                key={it.id}
                className="flex items-center justify-between gap-3 px-4 py-3 text-sm"
              >
                <div className="flex min-w-0 items-center gap-3">
                  <span
                    aria-hidden="true"
                    className={`h-2 w-2 shrink-0 rounded-full ${live ? "bg-emerald-500" : "bg-muted-foreground/40"}`}
                  />
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-foreground">
                      {a} <span className="text-muted-foreground">paired with</span> {b}
                    </p>
                    <p className="truncate text-xs text-muted-foreground">
                      {formatWhen(it.started_at)} · {duration}
                    </p>
                  </div>
                </div>
                <span
                  className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium ${
                    live
                      ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300"
                      : "border-border bg-muted/40 text-muted-foreground"
                  }`}
                >
                  {live ? "Live" : "Ended"}
                </span>
              </li>
            )
          })}
        </ul>
      )}
    </div>
  )
}

function formatDuration(sec: number) {
  if (!sec) return "0s"
  if (sec < 60) return `${sec}s`
  const m = Math.floor(sec / 60)
  const r = sec % 60
  if (m < 60) return r ? `${m}m ${r}s` : `${m}m`
  const h = Math.floor(m / 60)
  const rm = m % 60
  return rm ? `${h}h ${rm}m` : `${h}h`
}

function formatWhen(iso: string) {
  try {
    const d = new Date(iso)
    const diffMs = Date.now() - d.getTime()
    const sec = Math.floor(diffMs / 1000)
    if (sec < 60) return `${sec}s ago`
    const min = Math.floor(sec / 60)
    if (min < 60) return `${min}m ago`
    const hr = Math.floor(min / 60)
    if (hr < 24) return `${hr}h ago`
    return d.toLocaleString(undefined, {
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  } catch {
    return iso
  }
}