"use client"

import { Clock } from "lucide-react"

export type RoundSummary = {
  id: string
  name: string
  sequence: number
  courseName: string | null
  dateLabel: string | null // already formatted, e.g. "20. sep 2026", or null if unscheduled
}

export type RoundGroupsStepListProps = {
  rounds: RoundSummary[]
  onManageGroups: (roundId: string) => void
}

export function RoundGroupsStepList({ rounds, onManageGroups }: RoundGroupsStepListProps) {
  if (rounds.length === 0) {
    return (
      <div className="rounded-2xl border border-border bg-card p-6 shadow-md shadow-black/8">
        <p className="text-pretty text-center text-sm leading-relaxed text-muted-foreground">
          Ingen runder er lagt til ennå — legg til runder under «Runder og baner» først.
        </p>
      </div>
    )
  }

  return (
    // Connected list: one container, rows divided by hairlines — not separate
    // shadowed cards with gaps between them.
    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-md shadow-black/8">
      <ul className="divide-y divide-border">
        {rounds.map((round) => {
          // Build the secondary "course · date" line from whatever is set.
          const meta = [round.courseName, round.dateLabel].filter(Boolean).join(" · ")
          return (
            <li
              key={round.id}
              className="flex flex-wrap items-center justify-between gap-3 p-4 sm:p-5"
            >
              <div className="flex min-w-0 flex-col gap-0.5">
                <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
                  Runde {round.sequence}
                </span>
                <span className="truncate text-base font-bold text-foreground">{round.name}</span>
                <span className="truncate text-sm text-muted-foreground tabular-nums">
                  {meta === "" ? "Ingen bane eller dato satt ennå" : meta}
                </span>
              </div>

              <button
                type="button"
                onClick={() => onManageGroups(round.id)}
                className="inline-flex min-h-11 shrink-0 items-center gap-2 rounded-xl border border-border bg-card px-4 py-2.5 text-sm font-bold text-foreground transition-all duration-200 ease-in-out hover:bg-accent/50 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
              >
                <Clock aria-hidden="true" className="size-5 shrink-0" />
                <span>Rediger grupper</span>
              </button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}