'use client';

import React, { useEffect, useMemo, useState } from 'react';
import {
  ArrowLeft,
  ChevronRight,
  Eye,
  Minus,
  Plus,
  RefreshCw,
  Sparkles,
  X,
} from 'lucide-react';
import { Button } from './Button';
import { TeamPitchPreview, type PitchPlayer } from './TeamPitchPreview';

type SquadPlayer = {
  playerId: string;
  teamId?: string;
  name: string;
  role: string;
  creditValue: number;
  isPlaying11?: boolean;
  photoUrl?: string;
  bowlingStyle?: string;
};

type MatchTeam = {
  teamId?: string;
  shortName?: string;
  name?: string;
  code?: string;
  logoUrl?: string;
  score?: { runs?: number; wickets?: number };
};

type MatchLike = {
  title?: string;
  startTime?: string;
  teamA?: MatchTeam;
  teamB?: MatchTeam;
  players?: SquadPlayer[];
};

const ROLES = [
  { key: 'WICKET_KEEPER', short: 'WK', min: 1, max: 4 },
  { key: 'BATSMAN', short: 'BAT', min: 1, max: 6 },
  { key: 'ALL_ROUNDER', short: 'AR', min: 0, max: 4 },
  { key: 'BOWLER', short: 'BOWL', min: 1, max: 6 },
] as const;

type Phase = 'pick' | 'captain';
type ListTab = 'Squad' | 'My Team';
type CapSort = 'type' | 'points' | 'pctC' | 'pctVc';

function tid(p: SquadPlayer) {
  return String(p.teamId || '');
}
function pid(p: SquadPlayer) {
  return String(p.playerId);
}

function initials(name: string) {
  const parts = name.trim().split(/\s+/);
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return `${parts[0][0] || ''}${parts[parts.length - 1][0] || ''}`.toUpperCase();
}

function roleShort(role: string) {
  return ROLES.find((r) => r.key === role)?.short || role.slice(0, 3);
}

function isSpin(style?: string) {
  return !!style && style.includes('SPIN');
}

function isPace(style?: string) {
  return !!style && (style.includes('FAST') || style.includes('MEDIUM'));
}

/** Stable UI-only selection % until platform analytics exist. */
function selPct(id: string, credit: number) {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  const base = 18 + (credit / 15) * 55 + (h % 1800) / 100;
  return Math.round(Math.min(92, Math.max(8, base)) * 100) / 100;
}

function formatCountdown(ms: number) {
  if (ms <= 0) return 'Started';
  const totalM = Math.floor(ms / 60000);
  const h = Math.floor(totalM / 60);
  const m = totalM % 60;
  if (h > 48) {
    const d = Math.floor(h / 24);
    return `${d}d : ${h % 24}h`;
  }
  return `${h}h : ${String(m).padStart(2, '0')}m`;
}

/** Balanced auto XI under 100 credits, role mins, max 7 per side. */
export function smartPickXI(players: SquadPlayer[], teamAId: string, teamBId: string): string[] {
  const pool = [...players].sort((a, b) => {
    const play = Number(!!b.isPlaying11) - Number(!!a.isPlaying11);
    if (play) return play;
    return a.creditValue - b.creditValue;
  });

  const picked: SquadPlayer[] = [];
  const roleCount: Record<string, number> = {};
  const teamCount: Record<string, number> = {};
  let credits = 0;

  const canAdd = (p: SquadPlayer) => {
    if (picked.some((x) => pid(x) === pid(p))) return false;
    if (picked.length >= 11) return false;
    if (credits + p.creditValue > 100) return false;
    const t = tid(p) || 'none';
    if ((teamCount[t] || 0) >= 7) return false;
    const roleMeta = ROLES.find((r) => r.key === p.role);
    if (roleMeta && (roleCount[p.role] || 0) >= roleMeta.max) return false;
    return true;
  };

  const add = (p: SquadPlayer) => {
    if (!canAdd(p)) return false;
    picked.push(p);
    credits += p.creditValue;
    roleCount[p.role] = (roleCount[p.role] || 0) + 1;
    const t = tid(p) || 'none';
    teamCount[t] = (teamCount[t] || 0) + 1;
    return true;
  };

  for (const role of ['WICKET_KEEPER', 'BATSMAN', 'BOWLER'] as const) {
    const cand = pool.find((p) => p.role === role && canAdd(p));
    if (cand) add(cand);
  }

  const fillPass = (preferTeam?: string) => {
    for (const p of pool) {
      if (picked.length >= 11) break;
      if (preferTeam && tid(p) !== preferTeam) continue;
      add(p);
    }
  };
  fillPass(teamAId);
  fillPass(teamBId);
  fillPass();

  return picked.length === 11 ? picked.map(pid) : [];
}

function PlayerAvatar({
  name,
  photoUrl,
  role,
  size = 'sm',
}: {
  name: string;
  photoUrl?: string;
  role?: string;
  size?: 'sm' | 'md';
}) {
  const dim = size === 'md' ? 'h-11 w-11 text-xs' : 'h-9 w-9 text-[10px]';
  return (
    <span className="relative shrink-0">
      {photoUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={photoUrl} alt="" className={`${dim} rounded-full object-cover`} />
      ) : (
        <span
          className={`${dim} flex items-center justify-center rounded-full bg-[var(--bg-elevated)] font-extrabold text-[var(--text-primary)]`}
        >
          {initials(name)}
        </span>
      )}
      {role && (
        <span className="absolute -bottom-0.5 -left-0.5 rounded bg-[var(--text-primary)] px-1 py-px text-[8px] font-extrabold leading-none text-white">
          {roleShort(role)}
        </span>
      )}
    </span>
  );
}

type Props = {
  match: MatchLike;
  busy?: boolean;
  onSave: (payload: {
    playerIds: string[];
    captainId: string;
    viceCaptainId: string;
    name: string;
  }) => Promise<void> | void;
  onBack?: () => void;
};

export function FantasyTeamBuilder({ match, busy, onSave, onBack }: Props) {
  const players = match.players || [];
  const teamAId = String(match.teamA?.teamId || '');
  const teamBId = String(match.teamB?.teamId || '');
  const shortA = match.teamA?.shortName || match.teamA?.code || 'T1';
  const shortB = match.teamB?.shortName || match.teamB?.code || 'T2';
  const scoreA = match.teamA?.score?.runs ?? 0;
  const scoreB = match.teamB?.score?.runs ?? 0;

  const [selectedPlayers, setSelectedPlayers] = useState<string[]>([]);
  const [captainId, setCaptainId] = useState('');
  const [viceCaptainId, setViceCaptainId] = useState('');
  const [teamName, setTeamName] = useState('My XI');
  const [phase, setPhase] = useState<Phase>('pick');
  const [listTab, setListTab] = useState<ListTab>('Squad');
  const [previewOpen, setPreviewOpen] = useState(false);
  const [hint, setHint] = useState('');
  const [capSort, setCapSort] = useState<CapSort>('type');
  const [sortAsc, setSortAsc] = useState(true);
  const [now, setNow] = useState(() => Date.now());

  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 30000);
    return () => clearInterval(t);
  }, []);

  const countdown = useMemo(() => {
    if (!match.startTime) return '';
    return formatCountdown(new Date(match.startTime).getTime() - now);
  }, [match.startTime, now]);

  const byId = useMemo(() => {
    const m = new Map<string, SquadPlayer>();
    players.forEach((p) => m.set(pid(p), p));
    return m;
  }, [players]);

  const credits = useMemo(
    () => selectedPlayers.reduce((s, id) => s + (byId.get(id)?.creditValue || 0), 0),
    [selectedPlayers, byId]
  );
  const creditsLeft = Math.round((100 - credits) * 10) / 10;

  const roleCounts = useMemo(() => {
    const c: Record<string, number> = {};
    selectedPlayers.forEach((id) => {
      const r = byId.get(id)?.role;
      if (r) c[r] = (c[r] || 0) + 1;
    });
    return c;
  }, [selectedPlayers, byId]);

  const sideCounts = useMemo(() => {
    let a = 0;
    let b = 0;
    selectedPlayers.forEach((id) => {
      const t = tid(byId.get(id)!);
      if (t === teamAId) a++;
      else if (t === teamBId) b++;
    });
    return { a, b };
  }, [selectedPlayers, byId, teamAId, teamBId]);

  const canNext =
    selectedPlayers.length === 11 &&
    credits <= 100 &&
    (roleCounts.WICKET_KEEPER || 0) >= 1 &&
    (roleCounts.BATSMAN || 0) >= 1 &&
    (roleCounts.BOWLER || 0) >= 1 &&
    sideCounts.a <= 7 &&
    sideCounts.b <= 7;

  const canSave =
    canNext && !!captainId && !!viceCaptainId && captainId !== viceCaptainId;

  const teamLabel = (p: SquadPlayer) => {
    const t = tid(p);
    if (t === teamAId) return shortA;
    if (t === teamBId) return shortB;
    return '—';
  };

  const toggle = (id: string) => {
    setHint('');
    const p = byId.get(id);
    if (!p) return;
    setSelectedPlayers((prev) => {
      if (prev.includes(id)) {
        if (captainId === id) setCaptainId('');
        if (viceCaptainId === id) setViceCaptainId('');
        return prev.filter((x) => x !== id);
      }
      if (prev.length >= 11) {
        setHint('Already 11 players — remove one first.');
        return prev;
      }
      if (credits + p.creditValue > 100) {
        setHint(`Not enough credits (${creditsLeft} left).`);
        return prev;
      }
      const roleMeta = ROLES.find((r) => r.key === p.role);
      const rc = prev.filter((x) => byId.get(x)?.role === p.role).length;
      if (roleMeta && rc >= roleMeta.max) {
        setHint(`Max ${roleMeta.max} ${roleMeta.short} allowed.`);
        return prev;
      }
      const t = tid(p);
      const fromSide = prev.filter((x) => tid(byId.get(x)!) === t).length;
      if (fromSide >= 7) {
        setHint('Max 7 players from one team.');
        return prev;
      }
      return [...prev, id];
    });
  };

  const clearAll = () => {
    setSelectedPlayers([]);
    setCaptainId('');
    setViceCaptainId('');
    setHint('');
    setPhase('pick');
  };

  const runAiPack = () => {
    const ids = smartPickXI(players, teamAId, teamBId);
    if (!ids.length) {
      setHint('Could not auto-build an XI. Pick manually.');
      return;
    }
    setSelectedPlayers(ids);
    setCaptainId('');
    setViceCaptainId('');
    setPhase('pick');
    setHint('AI Team Pack ready — review, then tap Next.');
  };

  const teamAPlayers = useMemo(
    () =>
      players
        .filter((p) => tid(p) === teamAId)
        .sort((a, b) => b.creditValue - a.creditValue),
    [players, teamAId]
  );
  const teamBPlayers = useMemo(
    () =>
      players
        .filter((p) => tid(p) === teamBId)
        .sort((a, b) => b.creditValue - a.creditValue),
    [players, teamBId]
  );

  const myTeamPlayers = useMemo(
    () => selectedPlayers.map((id) => byId.get(id)!).filter(Boolean),
    [selectedPlayers, byId]
  );

  const captainList = useMemo(() => {
    const list = [...myTeamPlayers];
    const dir = sortAsc ? 1 : -1;
    list.sort((a, b) => {
      if (capSort === 'type') return a.role.localeCompare(b.role) * dir || a.name.localeCompare(b.name);
      if (capSort === 'points') return (a.creditValue - b.creditValue) * dir;
      if (capSort === 'pctC') {
        return (selPct(pid(a), a.creditValue) - selPct(pid(b), b.creditValue)) * dir;
      }
      return (selPct(pid(a) + 'vc', a.creditValue) - selPct(pid(b) + 'vc', b.creditValue)) * dir;
    });
    return list;
  }, [myTeamPlayers, capSort, sortAsc]);

  const pitchPlayers: PitchPlayer[] = useMemo(
    () =>
      selectedPlayers
        .map((id) => {
          const p = byId.get(id);
          if (!p) return null;
          return {
            playerId: id,
            name: p.name,
            role: p.role,
            teamShort: teamLabel(p),
            isTeamA: tid(p) === teamAId,
            creditValue: p.creditValue,
            photoUrl: p.photoUrl,
            isCaptain: captainId === id,
            isViceCaptain: viceCaptainId === id,
          };
        })
        .filter(Boolean) as PitchPlayer[],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [selectedPlayers, byId, captainId, viceCaptainId, teamAId, shortA, shortB]
  );

  const save = async () => {
    if (!canSave) {
      setHint('Choose Captain and Vice-Captain.');
      setPhase('captain');
      return;
    }
    await onSave({
      playerIds: selectedPlayers,
      captainId,
      viceCaptainId,
      name: teamName.trim() || 'My XI',
    });
  };

  const handleBack = () => {
    if (phase === 'captain') {
      setPhase('pick');
      return;
    }
    onBack?.();
  };

  const setCaptain = (id: string) => {
    if (viceCaptainId === id) setViceCaptainId('');
    setCaptainId(id);
  };
  const setVc = (id: string) => {
    if (captainId === id) setCaptainId('');
    setViceCaptainId(id);
  };

  const emptySquad = players.length === 0;

  const renderSquadRow = (p: SquadPlayer, isTeamA: boolean) => {
    const id = pid(p);
    const on = selectedPlayers.includes(id);
    const pct = selPct(id, p.creditValue);
    return (
      <button
        key={id}
        type="button"
        onClick={() => toggle(id)}
        className={`relative flex w-full items-center gap-1.5 border-b border-[var(--border-subtle)] px-1.5 py-2 text-left transition ${
          on ? 'bg-[color-mix(in_srgb,var(--accent-success)_12%,white)]' : 'bg-[var(--bg-surface)]'
        }`}
      >
        <PlayerAvatar name={p.name} photoUrl={p.photoUrl} role={p.role} />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-0.5 truncate text-[12px] font-bold text-[var(--text-primary)]">
            <span className="truncate">{p.name.split(/\s+/).slice(-2).join(' ')}</span>
            {isSpin(p.bowlingStyle) && (
              <span className="shrink-0 text-[9px] text-[var(--text-secondary)]" title="Spin">
                ◎
              </span>
            )}
            {isPace(p.bowlingStyle) && !isSpin(p.bowlingStyle) && (
              <span className="shrink-0 text-[9px] text-[var(--text-secondary)]" title="Pace">
                ⚡
              </span>
            )}
          </div>
          <div className="text-[10px] font-medium text-[var(--text-secondary)]">{pct.toFixed(2)}%</div>
        </div>
        <div className="w-7 shrink-0 text-right text-xs font-extrabold tabular-nums text-[var(--text-primary)]">
          {Number.isInteger(p.creditValue) ? p.creditValue : p.creditValue.toFixed(1)}
        </div>
        <span
          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${
            on
              ? 'bg-[var(--accent-primary)] text-white'
              : 'bg-[var(--accent-success)] text-white'
          }`}
          aria-hidden
        >
          {on ? <Minus className="h-3 w-3" strokeWidth={3} /> : <Plus className="h-3 w-3" strokeWidth={3} />}
        </span>
        {!isTeamA && (
          <span className="pointer-events-none absolute right-0 top-1/2 hidden -translate-y-1/2 text-[var(--text-secondary)] opacity-40 sm:block" aria-hidden>
            <ChevronRight className="h-3.5 w-3.5" />
          </span>
        )}
      </button>
    );
  };

  return (
    <div className="ftb-shell relative">
      {/* Fixed header */}
      <header className="shrink-0 border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3 py-2.5">
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={handleBack}
            className="flex h-9 w-9 items-center justify-center rounded-full border border-[var(--border-subtle)] text-[var(--text-primary)]"
            aria-label="Back"
          >
            <ArrowLeft className="h-4 w-4" />
          </button>
          <div className="min-w-0 flex-1">
            <h2 className="truncate text-base font-extrabold text-[var(--text-primary)]">Create Team</h2>
            {phase === 'pick' && countdown && (
              <p className="text-[11px] font-semibold text-[var(--accent-primary)]">{countdown}</p>
            )}
          </div>
          {phase === 'pick' && (
            <button
              type="button"
              onClick={runAiPack}
              className="inline-flex min-h-9 items-center gap-1 rounded-full border border-[var(--accent-primary)] bg-gradient-to-r from-[var(--accent-primary)]/10 to-[var(--accent-success)]/10 px-3 text-[11px] font-extrabold text-[var(--accent-primary)]"
            >
              <Sparkles className="h-3.5 w-3.5" />
              AI Team Pack
            </button>
          )}
        </div>
      </header>

      {/* Scrollable body */}
      <div className="ftb-scroll">
        {phase === 'pick' && (
          <>
            {/* Match strip */}
            <div className="flex items-center justify-center gap-3 bg-[var(--bg-surface)] px-3 py-3">
              <div className="flex items-center gap-2">
                {match.teamA?.logoUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={match.teamA.logoUrl} alt="" className="h-8 w-8 rounded-full object-cover" />
                ) : (
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--team-a)] text-[10px] font-extrabold text-white">
                    {shortA.slice(0, 3)}
                  </span>
                )}
                <span className="text-sm font-extrabold tabular-nums text-[var(--text-primary)]">{scoreA}</span>
              </div>
              <span className="text-[11px] font-bold uppercase text-[var(--text-secondary)]">vs</span>
              <div className="flex items-center gap-2">
                <span className="text-sm font-extrabold tabular-nums text-[var(--text-primary)]">{scoreB}</span>
                {match.teamB?.logoUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={match.teamB.logoUrl} alt="" className="h-8 w-8 rounded-full object-cover" />
                ) : (
                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--team-b)] text-[10px] font-extrabold text-white">
                    {shortB.slice(0, 3)}
                  </span>
                )}
              </div>
            </div>

            {/* Selection progress */}
            <div className="flex items-center gap-2 border-y border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3 py-2.5">
              <span className="w-10 shrink-0 text-sm font-extrabold tabular-nums text-[var(--text-primary)]">
                {selectedPlayers.length}/11
              </span>
              <div className="flex flex-1 gap-1" aria-label="Players selected progress">
                {Array.from({ length: 11 }).map((_, i) => (
                  <span
                    key={i}
                    className={`ftb-seg ${i < selectedPlayers.length ? 'ftb-seg-filled' : ''}`}
                  />
                ))}
              </div>
              <button
                type="button"
                onClick={clearAll}
                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[var(--border-subtle)] text-[var(--text-secondary)]"
                aria-label="Clear selection"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>

            {/* Tabs */}
            <div className="flex gap-4 border-b border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3">
              {(['Squad', 'My Team'] as ListTab[]).map((tab) => (
                <button
                  key={tab}
                  type="button"
                  onClick={() => setListTab(tab)}
                  className={`relative py-2.5 text-sm font-bold ${
                    listTab === tab ? 'text-[var(--accent-primary)]' : 'text-[var(--text-secondary)]'
                  }`}
                >
                  {tab}
                  {listTab === tab && (
                    <span className="absolute bottom-0 left-0 right-0 h-0.5 rounded-full bg-[var(--accent-primary)]" />
                  )}
                </button>
              ))}
            </div>

            {hint && (
              <p className="bg-amber-50 px-3 py-1.5 text-[11px] font-medium text-amber-800">{hint}</p>
            )}

            {emptySquad ? (
              <div className="px-4 py-12 text-center">
                <p className="text-sm font-bold text-[var(--text-primary)]">Squads not announced yet</p>
                <p className="mt-1 text-xs text-[var(--text-secondary)]">
                  Check back once both teams publish their players.
                </p>
              </div>
            ) : listTab === 'My Team' ? (
              <div className="bg-[var(--bg-surface)]">
                {myTeamPlayers.length === 0 ? (
                  <p className="px-4 py-10 text-center text-sm text-[var(--text-secondary)]">
                    No players selected yet
                  </p>
                ) : (
                  myTeamPlayers.map((p) => renderSquadRow(p, tid(p) === teamAId))
                )}
              </div>
            ) : (
              <div className="grid grid-cols-2 divide-x divide-[var(--border-subtle)] bg-[var(--bg-surface)]">
                <div className="min-w-0">
                  <div className="sticky top-0 z-[1] flex items-center justify-between bg-[var(--bg-elevated)] px-2 py-1.5 text-[9px] font-bold uppercase tracking-wide text-[var(--text-secondary)]">
                    <span>% Sel by</span>
                    <span>Credits</span>
                  </div>
                  <div className="border-b border-[var(--border-subtle)] bg-[color-mix(in_srgb,var(--team-a)_8%,white)] px-2 py-1 text-[10px] font-extrabold text-[var(--team-a)]">
                    {shortA}
                  </div>
                  {teamAPlayers.map((p) => renderSquadRow(p, true))}
                </div>
                <div className="min-w-0">
                  <div className="sticky top-0 z-[1] flex items-center justify-between bg-[var(--bg-elevated)] px-2 py-1.5 text-[9px] font-bold uppercase tracking-wide text-[var(--text-secondary)]">
                    <span>% Sel by</span>
                    <span>Credits</span>
                  </div>
                  <div className="border-b border-[var(--border-subtle)] bg-[color-mix(in_srgb,var(--team-b)_8%,white)] px-2 py-1 text-[10px] font-extrabold text-[var(--team-b)]">
                    {shortB}
                  </div>
                  {teamBPlayers.map((p) => renderSquadRow(p, false))}
                </div>
              </div>
            )}

            <div className="px-3 py-2">
              <input
                value={teamName}
                onChange={(e) => setTeamName(e.target.value)}
                className="d11-input py-2 text-xs"
                placeholder="Team name"
                maxLength={50}
                aria-label="Team name"
              />
            </div>
          </>
        )}

        {phase === 'captain' && (
          <>
            <div className="bg-[var(--bg-surface)] px-3 py-4 text-center">
              <p className="text-sm font-extrabold text-[var(--text-primary)]">
                Select Captain and Vice Captain
              </p>
              <div className="mt-3 flex items-center justify-center gap-3 text-[11px] font-semibold text-[var(--text-secondary)]">
                <span className="inline-flex items-center gap-1.5">
                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-[var(--accent-primary)] text-[10px] font-extrabold text-white">
                    C
                  </span>
                  2x (double) points
                </span>
                <span className="h-4 w-px bg-[var(--border-subtle)]" aria-hidden />
                <span className="inline-flex items-center gap-1.5">
                  <span className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-[9px] font-extrabold text-white">
                    VC
                  </span>
                  1.5x points
                </span>
              </div>
            </div>

            {/* Sort chips */}
            <div className="flex gap-2 overflow-x-auto border-y border-[var(--border-subtle)] bg-[var(--bg-surface)] px-3 py-2">
              {(
                [
                  { key: 'type' as const, label: 'Type' },
                  { key: 'points' as const, label: 'Points' },
                  { key: 'pctC' as const, label: '% Captain By' },
                  { key: 'pctVc' as const, label: '% Vice Captain By' },
                ] as const
              ).map((chip) => {
                const active = capSort === chip.key;
                return (
                  <button
                    key={chip.key}
                    type="button"
                    onClick={() => {
                      if (active) setSortAsc((v) => !v);
                      else {
                        setCapSort(chip.key);
                        setSortAsc(true);
                      }
                    }}
                    className={`shrink-0 rounded-full px-3 py-1.5 text-[11px] font-bold ${
                      active
                        ? 'bg-[var(--accent-primary)] text-white'
                        : 'border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)]'
                    }`}
                  >
                    {chip.label}
                    {active ? (sortAsc ? ' ↓' : ' ↑') : ''}
                  </button>
                );
              })}
            </div>

            <div className="grid grid-cols-[minmax(0,1fr)_40px_36px_40px_36px_40px] items-center gap-1 bg-[var(--bg-elevated)] px-3 py-1.5 text-[9px] font-bold uppercase tracking-wide text-[var(--text-secondary)]">
              <span>Type</span>
              <span className="text-center">Pts</span>
              <span className="text-center">% C</span>
              <span className="text-center">C</span>
              <span className="text-center">% VC</span>
              <span className="text-center">VC</span>
            </div>

            {hint && (
              <p className="bg-amber-50 px-3 py-1.5 text-[11px] font-medium text-amber-800">{hint}</p>
            )}

            <div className="bg-[var(--bg-surface)]">
              {captainList.map((p) => {
                const id = pid(p);
                const isC = captainId === id;
                const isVc = viceCaptainId === id;
                const code = teamLabel(p);
                return (
                  <div
                    key={id}
                    className="grid grid-cols-[minmax(0,1fr)_40px_36px_40px_36px_40px] items-center gap-1 border-b border-[var(--border-subtle)] px-3 py-2.5"
                  >
                    <div className="flex min-w-0 items-center gap-2">
                      <div className="relative shrink-0 pb-2">
                        <PlayerAvatar name={p.name} photoUrl={p.photoUrl} size="md" />
                        <span className="absolute -bottom-0.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-[var(--text-primary)] px-1 py-px text-[7px] font-extrabold text-white">
                          {code} {roleShort(p.role)}
                        </span>
                      </div>
                      <div className="min-w-0">
                        <div className="truncate text-sm font-bold text-[var(--text-primary)]">{p.name}</div>
                      </div>
                    </div>
                    <div className="text-center text-[11px] font-bold tabular-nums text-[var(--text-secondary)]">
                      0
                    </div>
                    <div className="text-center text-[10px] font-semibold tabular-nums text-[var(--text-secondary)]">
                      {selPct(id, p.creditValue).toFixed(0)}
                    </div>
                    <button
                      type="button"
                      onClick={() => setCaptain(id)}
                      className={`mx-auto flex h-9 w-9 items-center justify-center rounded-full text-[10px] font-extrabold transition ${
                        isC
                          ? 'bg-[var(--accent-primary)] text-white shadow'
                          : 'border-2 border-[var(--border-subtle)] text-[var(--text-secondary)]'
                      }`}
                      aria-label={`Captain ${p.name}`}
                      aria-pressed={isC}
                    >
                      {isC ? '2X' : 'C'}
                    </button>
                    <div className="text-center text-[10px] font-semibold tabular-nums text-[var(--text-secondary)]">
                      {selPct(id + 'vc', p.creditValue).toFixed(0)}
                    </div>
                    <button
                      type="button"
                      onClick={() => setVc(id)}
                      className={`mx-auto flex h-9 w-9 items-center justify-center rounded-full text-[9px] font-extrabold transition ${
                        isVc
                          ? 'bg-amber-500 text-white shadow'
                          : 'border-2 border-[var(--border-subtle)] text-[var(--text-secondary)]'
                      }`}
                      aria-label={`Vice captain ${p.name}`}
                      aria-pressed={isVc}
                    >
                      {isVc ? '1.5X' : 'VC'}
                    </button>
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>

      {/* Fixed bottom action bar */}
      <footer className="shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-surface)] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
        {phase === 'pick' ? (
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setPreviewOpen(true)}
              className="inline-flex min-h-11 flex-1 items-center justify-center gap-1.5 rounded-full border-2 border-[var(--border-subtle)] bg-[var(--bg-surface)] text-xs font-extrabold uppercase tracking-wide text-[var(--text-primary)]"
            >
              <Eye className="h-4 w-4 text-[var(--accent-primary)]" />
              Preview
            </button>
            <Button
              className="min-h-11 flex-[1.4] rounded-full uppercase tracking-wide"
              disabled={!canNext}
              onClick={() => {
                setPhase('captain');
                setHint('');
              }}
            >
              Next
            </Button>
          </div>
        ) : (
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setPreviewOpen(true)}
              className="inline-flex min-h-11 flex-1 items-center justify-center gap-1 rounded-full border-2 border-[var(--border-subtle)] text-[10px] font-extrabold uppercase tracking-wide text-[var(--text-primary)]"
            >
              <Eye className="h-3.5 w-3.5" />
              Preview
            </button>
            <button
              type="button"
              onClick={() => setPreviewOpen(true)}
              className="inline-flex min-h-11 flex-1 items-center justify-center gap-1 rounded-full border-2 border-[var(--border-subtle)] text-[10px] font-extrabold uppercase tracking-wide text-[var(--text-primary)]"
            >
              <RefreshCw className="h-3.5 w-3.5" />
              Lineup
            </button>
            <Button
              className="min-h-11 flex-[1.3] rounded-full !bg-[var(--accent-success)] uppercase tracking-wide hover:!brightness-95"
              loading={busy}
              disabled={!canSave}
              onClick={() => setPreviewOpen(true)}
            >
              Save
            </Button>
          </div>
        )}
      </footer>

      <TeamPitchPreview
        open={previewOpen}
        teamName={teamName.trim() || 'My XI'}
        shortA={shortA}
        shortB={shortB}
        sideA={sideCounts.a}
        sideB={sideCounts.b}
        playersCount={selectedPlayers.length}
        creditsLeft={creditsLeft}
        players={pitchPlayers}
        onClose={() => setPreviewOpen(false)}
        footer={
          phase === 'captain' && canSave ? (
            <div className="grid grid-cols-2 gap-2">
              <Button variant="outline" className="rounded-full" onClick={() => setPreviewOpen(false)}>
                Edit
              </Button>
              <Button
                className="rounded-full !bg-[var(--accent-success)] hover:!brightness-95"
                loading={busy}
                onClick={async () => {
                  setPreviewOpen(false);
                  await save();
                }}
              >
                Confirm Save
              </Button>
            </div>
          ) : (
            <Button className="w-full rounded-full" variant="outline" onClick={() => setPreviewOpen(false)}>
              Continue
            </Button>
          )
        }
      />
    </div>
  );
}