teecup/frontend/components/own-rounds.tsx

"use client"

// Frittstående rundeføring (ADR-033) -- runder eid direkte av en BRUKER
// (app_user), ikke en organisasjon. Presentasjon fra V0, datalag skrevet om
// fra mock til ekte fetch mot /rounds (samme mønster som resten av appen).

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Loader2, Plus, ClipboardList } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Wordmark } from "@/components/wordmark"
import { RoundCard, type Round } from "@/components/round-card"
import { ArrowLeft } from "lucide-react"

type ApiRoundParticipant = {
  id: string
  is_owner: boolean
  guest_name: string | null
  counts_for_handicap: boolean
  score_differential: number | null
}

type ApiRound = {
  id: string
  name: string | null
  course_name_snapshot: string
  tee_name_snapshot: string
  played_at: string
  holes_planned: number
  completed_at: string | null
  participants: ApiRoundParticipant[]
  owner_holes_played: number
  owner_total_score: number | null
  owner_score_to_par: number | null
}

function toRound(r: ApiRound): Round {
  const owner = r.participants.find((p) => p.is_owner)
  const differential = owner?.counts_for_handicap ? owner.score_differential : null
  return {
    id: r.id,
    name: r.name,
    courseName: r.course_name_snapshot,
    status: r.completed_at ? "completed" : "active",
    teeName: r.tee_name_snapshot,
    holes: r.holes_planned === 9 ? 9 : 18,
    date: r.played_at,
    playerCount: r.participants.length,
    holesPlayed: r.owner_holes_played,
    totalScore: r.owner_total_score ?? undefined,
    toPar: r.owner_score_to_par ?? undefined,
    differential,
  }
}

export function OwnRounds() {
  const router = useRouter()
  const [rounds, setRounds] = useState<Round[] | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false
    async function load() {
      try {
        const res = await fetch("/rounds", { credentials: "include" })
        if (res.status === 401) {
          router.replace("/")
          return
        }
        if (!res.ok) throw new Error(`rounds: ${res.status}`)
        const data: ApiRound[] = await res.json()
        if (!cancelled) setRounds(data.map(toRound))
      } catch {
        if (!cancelled) setError("Klarte ikke å hente rundene dine. Prøv igjen om litt.")
      }
    }
    void load()
    return () => {
      cancelled = true
    }
  }, [router])

  return (
    <div className="flex min-h-[100dvh] flex-col bg-background">
      <header className="sticky top-0 z-10 border-b border-border bg-background/80 backdrop-blur">
        <div className="mx-auto flex w-full max-w-3xl items-center justify-between gap-4 px-5 py-4">
          <Link
            href="/dashboard"
            className="inline-flex min-h-[44px] items-center gap-2 rounded-xl px-2 py-2 text-base font-semibold text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
          >
            <ArrowLeft aria-hidden="true" className="size-5" />
            Til dashbord
          </Link>
          <Wordmark compact />
        </div>
      </header>

      <main className="mx-auto w-full max-w-3xl flex-1 px-5 py-8 sm:py-10">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
          <div className="flex flex-col gap-2">
            <h1 className="text-3xl font-extrabold tracking-tight text-foreground text-balance">
              Egne runder
            </h1>
            <p className="max-w-prose text-lg leading-relaxed text-muted-foreground text-pretty">
              Frittstående golfrunder du har registrert selv, uavhengig av turnering og klubb.
            </p>
          </div>

          <Button
            render={<Link href="/my-rounds/new" />}
            size="lg"
            className="h-12 shrink-0 gap-2 rounded-2xl px-6 text-base font-bold shadow-sm"
          >
            <Plus aria-hidden="true" className="size-5" />
            Ny runde
          </Button>
        </div>

        {error && (
          <p role="alert" className="mt-4 text-base font-medium text-destructive">
            {error}
          </p>
        )}

        <div className="mt-8">
          {rounds === null ? (
            <LoadingState />
          ) : rounds.length === 0 ? (
            <EmptyState />
          ) : (
            <ul className="flex flex-col gap-4">
              {rounds.map((round) => (
                <li key={round.id}>
                  <RoundCard round={round} />
                </li>
              ))}
            </ul>
          )}
        </div>
      </main>
    </div>
  )
}

function LoadingState() {
  return (
    <div
      role="status"
      aria-live="polite"
      className="flex flex-col items-center justify-center gap-4 py-20 text-center"
    >
      <Loader2 aria-hidden="true" className="size-9 animate-spin text-primary" />
      <span className="text-base font-medium text-muted-foreground">Laster runder…</span>
    </div>
  )
}

function EmptyState() {
  return (
    <div className="flex flex-col items-center gap-5 rounded-3xl border border-dashed border-border bg-card/50 px-6 py-16 text-center">
      <div className="flex size-16 items-center justify-center rounded-2xl bg-primary/15">
        <ClipboardList aria-hidden="true" className="size-8 text-primary" />
      </div>
      <div className="flex max-w-md flex-col gap-2">
        <h2 className="text-xl font-bold text-foreground">Ingen runder ennå</h2>
        <p className="text-lg leading-relaxed text-muted-foreground text-pretty">
          Her dukker rundene dine opp etter hvert som du registrerer dem. Trykk på{" "}
          <span className="font-semibold text-foreground">«Ny runde»</span> øverst for å komme i
          gang.
        </p>
      </div>
    </div>
  )
}