"use client"

// Organisasjonens spillerpool -- egen side (2026-08-18), lenket fra
// Medlemmer-siden (org-members.tsx). Se org-player-roster-panel.tsx for
// selve redigeringslogikken; denne filen er kun sideskallet (samme mønster
// som org-members.tsx: sticky header med tilbake-lenke + tittel).

import { useState } from "react"
import Link from "next/link"
import { ArrowLeft, Pencil } from "lucide-react"
import { OrgPlayerRosterPanel } from "@/components/org-player-roster-panel"

export function OrgPlayers({ organizationId, orgName }: { organizationId: string; orgName: string }) {
  const [editing, setEditing] = useState(false)

  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-2xl items-center gap-3 px-5 py-4">
          <Link
            href={`/organizations/${organizationId}/members?name=${encodeURIComponent(orgName)}`}
            aria-label="Tilbake til medlemmer"
            className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border bg-card text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
          >
            <ArrowLeft aria-hidden="true" className="size-5" />
          </Link>
          <div className="flex min-w-0 flex-col">
            <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Spillerpool
            </span>
            <h1 className="truncate text-xl font-extrabold tracking-tight text-foreground">{orgName}</h1>
          </div>
        </div>
      </header>

      <main className="mx-auto w-full max-w-2xl flex-1 px-5 py-6 sm:py-8">
        <p className="text-sm leading-relaxed text-muted-foreground text-pretty">
          Alle spillere organisasjonen har registrert, på tvers av turneringer. Rediger navn, HCP,
          kontaktinfo og andre felt direkte i tabellen.
        </p>

        <button
          type="button"
          onClick={() => setEditing(true)}
          className="mt-6 flex min-h-11 w-full items-center gap-3 rounded-2xl border border-border bg-card p-4 text-left shadow-md shadow-black/8 transition-colors hover:border-primary/50 hover:bg-accent/40"
        >
          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted">
            <Pencil aria-hidden="true" className="size-5 text-muted-foreground" />
          </div>
          <div className="flex flex-col">
            <span className="text-sm font-bold text-foreground">Rediger spillere</span>
            <span className="text-xs text-muted-foreground">Åpne tabellen -- samme visning som ved spillerimport</span>
          </div>
        </button>
      </main>

      {editing && <OrgPlayerRosterPanel organizationId={organizationId} onClose={() => setEditing(false)} />}
    </div>
  )
}