"use client"

import { isScrambleVsSolo, isTwoSided } from "@/lib/ny-runde/formats"
import type { Player } from "@/lib/ny-runde/types"
import { cn } from "@/lib/utils"
import { ArrowLeftRight, Check, UserMinus } from "lucide-react"
import { Avatar, NativeSelect, Panel, Pill, TextInput } from "./primitives"
import { useWizard } from "./wizard-context"

function fullName(p: Player) {
  return `${p.firstName}${p.lastName ? ` ${p.lastName}` : ""}`.trim() || "Spiller"
}

export function Step4Teams() {
  const { state } = useWizard()
  const f = state.format

  return (
    <div className="flex flex-col gap-4">
      <div>
        <h2 className="text-lg font-semibold tracking-tight text-[var(--nr-ink)]">Lag og rekkefølge</h2>
        <p className="text-sm text-[var(--nr-muted)]">Sett opp lagene for denne spilleformen.</p>
      </div>
      {isTwoSided(f) ? <TwoSided /> : f === "moneyball" ? <MoneyBall /> : isScrambleVsSolo(f) ? <ScrambleVsSolo /> : null}
    </div>
  )
}

/* ------------------------------------------------------------------ */
/* Two-sided A/B                                                       */
/* ------------------------------------------------------------------ */
function TwoSided() {
  const { state, patch } = useWizard()
  const assign = state.sideAssign

  const unassigned = state.players.filter((p) => !assign[p.key])
  const sideA = state.players.filter((p) => assign[p.key] === "A")
  const sideB = state.players.filter((p) => assign[p.key] === "B")

  function set(key: string, side: "A" | "B" | undefined) {
    patch({ sideAssign: { ...assign, [key]: side } })
  }

  return (
    <div className="flex flex-col gap-4">
      {unassigned.length > 0 ? (
        <Panel className="bg-[var(--nr-surface-2)]">
          <p className="mb-2 text-[13px] font-medium text-[var(--nr-muted)]">Ikke tildelt</p>
          <ul className="flex flex-col gap-2">
            {unassigned.map((p) => (
              <li key={p.key} className="flex items-center gap-3 rounded-lg bg-[var(--nr-surface)] p-2 pr-3">
                <Avatar first={p.firstName} last={p.lastName} className="h-8 w-8" />
                <span className="flex-1 text-sm text-[var(--nr-ink)]">{fullName(p)}</span>
                <div className="flex gap-1.5">
                  <AssignBtn onClick={() => set(p.key, "A")}>{state.sideALabel || "Side A"}</AssignBtn>
                  <AssignBtn onClick={() => set(p.key, "B")}>{state.sideBLabel || "Side B"}</AssignBtn>
                </div>
              </li>
            ))}
          </ul>
        </Panel>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2">
        <SideColumn
          label={state.sideALabel}
          placeholder="Side A"
          suggestion="Rødt lag"
          onLabel={(v) => patch({ sideALabel: v })}
          players={sideA}
          otherSideLabel={state.sideBLabel || "Side B"}
          onMoveOther={(k) => set(k, "B")}
          onRemove={(k) => set(k, undefined)}
        />
        <SideColumn
          label={state.sideBLabel}
          placeholder="Side B"
          suggestion="Blått lag"
          onLabel={(v) => patch({ sideBLabel: v })}
          players={sideB}
          otherSideLabel={state.sideALabel || "Side A"}
          onMoveOther={(k) => set(k, "A")}
          onRemove={(k) => set(k, undefined)}
        />
      </div>
    </div>
  )
}

function SideColumn({
  label,
  placeholder,
  suggestion,
  onLabel,
  players,
  otherSideLabel,
  onMoveOther,
  onRemove,
}: {
  label: string
  placeholder: string
  suggestion: string
  onLabel: (v: string) => void
  players: Player[]
  otherSideLabel: string
  onMoveOther: (key: string) => void
  onRemove: (key: string) => void
}) {
  return (
    <div className="flex flex-col gap-2 rounded-xl border border-[var(--nr-border)] bg-[var(--nr-surface)] p-3">
      <TextInput value={label} onChange={(e) => onLabel(e.target.value)} placeholder={placeholder} className="h-10 font-medium" />
      {!label ? (
        <button
          type="button"
          onClick={() => onLabel(suggestion)}
          className="self-start text-xs font-medium text-[var(--nr-accent)] underline-offset-2 hover:underline"
        >
          Foreslå «{suggestion}»
        </button>
      ) : null}
      {players.length === 0 ? (
        <p className="rounded-lg border border-dashed border-[var(--nr-border)] px-3 py-6 text-center text-xs text-[var(--nr-muted)]">
          Ingen spillere ennå.
        </p>
      ) : (
        <ul className="flex flex-col gap-2">
          {players.map((p) => (
            <li key={p.key} className="flex items-center gap-2 rounded-lg bg-[var(--nr-surface-2)] p-2 pr-2">
              <Avatar first={p.firstName} last={p.lastName} className="h-8 w-8" />
              <span className="flex-1 truncate text-sm text-[var(--nr-ink)]">{fullName(p)}</span>
              <button
                type="button"
                onClick={() => onMoveOther(p.key)}
                aria-label={`Flytt ${fullName(p)} til ${otherSideLabel}`}
                className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--nr-muted)] hover:bg-[var(--nr-surface)] hover:text-[var(--nr-accent)]"
              >
                <ArrowLeftRight className="h-4 w-4" aria-hidden="true" />
              </button>
              <button
                type="button"
                onClick={() => onRemove(p.key)}
                aria-label={`Fjern ${fullName(p)} fra laget`}
                className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--nr-muted)] hover:bg-[var(--nr-surface)] hover:text-[var(--nr-danger)]"
              >
                <UserMinus className="h-4 w-4" aria-hidden="true" />
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

function AssignBtn({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="inline-flex min-h-9 items-center rounded-lg border border-[var(--nr-border)] bg-[var(--nr-surface-2)] px-3 text-xs font-medium text-[var(--nr-ink)] transition-colors hover:border-[var(--nr-accent)] hover:text-[var(--nr-accent)]"
    >
      {children}
    </button>
  )
}

/* ------------------------------------------------------------------ */
/* Money Ball                                                          */
/* ------------------------------------------------------------------ */
function MoneyBall() {
  const { state, patch } = useWizard()
  return (
    <Panel>
      <p className="mb-3 text-sm text-[var(--nr-muted)]">Gi hver spiller en plass i rotasjonen (0–3).</p>
      <ul className="flex flex-col gap-2">
        {state.players.map((p) => (
          <li key={p.key} className="flex items-center gap-3 rounded-lg bg-[var(--nr-surface-2)] p-2 pr-3">
            <Avatar first={p.firstName} last={p.lastName} className="h-8 w-8" />
            <span className="flex-1 truncate text-sm text-[var(--nr-ink)]">{fullName(p)}</span>
            <NativeSelect
              aria-label={`Plass for ${fullName(p)}`}
              value={state.moneyballSlots[p.key] ?? 0}
              onChange={(e) => patch({ moneyballSlots: { ...state.moneyballSlots, [p.key]: Number.parseInt(e.target.value, 10) } })}
              className="h-10 w-24 bg-[var(--nr-surface)]"
            >
              {[0, 1, 2, 3].map((n) => (
                <option key={n} value={n}>
                  Plass {n}
                </option>
              ))}
            </NativeSelect>
          </li>
        ))}
      </ul>
    </Panel>
  )
}

/* ------------------------------------------------------------------ */
/* Scramble vs solo (asymmetric)                                       */
/* ------------------------------------------------------------------ */
function ScrambleVsSolo() {
  const { state, patch } = useWizard()
  const assign = state.scrambleAssign

  const team = state.players.filter((p) => assign[p.key] === "team")
  const opponent = state.players.find((p) => assign[p.key] === "opponent")
  const unplaced = state.players.filter((p) => !assign[p.key])
  const teamReady = team.length >= 2
  const opponentFilled = !!opponent

  function set(key: string, slot: "team" | "opponent" | undefined) {
    patch({ scrambleAssign: { ...assign, [key]: slot } })
  }

  return (
    <div className="flex flex-col gap-4">
      {/* The team — open-ended, emphasized */}
      <div className="rounded-xl border-2 border-[var(--nr-accent-ring)] bg-[var(--nr-surface)] p-4">
        <div className="mb-2 flex items-center justify-between">
          <h3 className="text-base font-semibold text-[var(--nr-ink)]">Laget</h3>
          <span
            role="status"
            aria-live="polite"
            className={cn(
              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
              teamReady
                ? "border-[var(--nr-ok)]/30 bg-[var(--nr-ok-soft)] text-[var(--nr-ok)]"
                : "border-[var(--nr-border)] bg-[var(--nr-surface-2)] text-[var(--nr-muted)]",
            )}
          >
            {teamReady ? <Check className="h-3 w-3" strokeWidth={3} /> : null}
            {teamReady ? "Minst 2 spillere lagt til" : "Minst 2 spillere"}
          </span>
        </div>
        {team.length === 0 ? (
          <p className="rounded-lg border border-dashed border-[var(--nr-border)] px-3 py-6 text-center text-xs text-[var(--nr-muted)]">
            Legg til spillere fra listen under.
          </p>
        ) : (
          <ul className="flex flex-col gap-2">
            {team.map((p) => (
              <li key={p.key} className="flex items-center gap-2 rounded-lg bg-[var(--nr-surface-2)] p-2 pr-2">
                <Avatar first={p.firstName} last={p.lastName} className="h-8 w-8" />
                <span className="flex-1 truncate text-sm text-[var(--nr-ink)]">{fullName(p)}</span>
                <button
                  type="button"
                  onClick={() => set(p.key, undefined)}
                  aria-label={`Fjern ${fullName(p)} fra laget`}
                  className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--nr-muted)] hover:bg-[var(--nr-surface)] hover:text-[var(--nr-danger)]"
                >
                  <UserMinus className="h-4 w-4" aria-hidden="true" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* Individual opponent — capped at 1, visually distinct single slot */}
      <div className="rounded-xl border border-[var(--nr-border)] bg-[var(--nr-surface-2)] p-4">
        <h3 className="mb-2 text-sm font-semibold text-[var(--nr-ink)]">Individuell motstander</h3>
        {opponent ? (
          <div className="flex items-center gap-3 rounded-lg bg-[var(--nr-surface)] p-2 pr-3 ring-1 ring-inset ring-[var(--nr-border)]">
            <Avatar first={opponent.firstName} last={opponent.lastName} className="h-10 w-10" />
            <span className="flex-1 truncate text-sm font-medium text-[var(--nr-ink)]">{fullName(opponent)}</span>
            <Pill tone="neutral">1 av 1</Pill>
            <button
              type="button"
              onClick={() => set(opponent.key, undefined)}
              aria-label={`Fjern ${fullName(opponent)} som motstander`}
              className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--nr-muted)] hover:bg-[var(--nr-surface-2)] hover:text-[var(--nr-danger)]"
            >
              <UserMinus className="h-4 w-4" aria-hidden="true" />
            </button>
          </div>
        ) : (
          <p className="rounded-lg border border-dashed border-[var(--nr-border)] px-3 py-5 text-center text-xs text-[var(--nr-muted)]">
            Én spiller. Velg «Som motstander» på en spiller under.
          </p>
        )}
      </div>

      {/* Unplaced */}
      {unplaced.length > 0 ? (
        <Panel>
          <p className="mb-2 text-[13px] font-medium text-[var(--nr-muted)]">Ikke plassert</p>
          <ul className="flex flex-col gap-2">
            {unplaced.map((p) => (
              <li key={p.key} className="flex items-center gap-2 rounded-lg bg-[var(--nr-surface-2)] p-2 pr-2">
                <Avatar first={p.firstName} last={p.lastName} className="h-8 w-8" />
                <span className="flex-1 truncate text-sm text-[var(--nr-ink)]">{fullName(p)}</span>
                <AssignBtn onClick={() => set(p.key, "team")}>Til laget</AssignBtn>
                <button
                  type="button"
                  onClick={() => set(p.key, "opponent")}
                  disabled={opponentFilled}
                  className="inline-flex min-h-9 items-center rounded-lg border border-[var(--nr-border)] bg-[var(--nr-surface-2)] px-3 text-xs font-medium text-[var(--nr-ink)] transition-colors hover:border-[var(--nr-accent)] hover:text-[var(--nr-accent)] disabled:cursor-not-allowed disabled:opacity-40"
                >
                  Som motstander
                </button>
              </li>
            ))}
          </ul>
        </Panel>
      ) : null}
    </div>
  )
}