// Player profile slide-in panel

function ProfilePanel({ player, onClose, onEdit, onDelete, t, density }) {
  const [tab, setTab] = useState('overview');
  const [editing, setEditing] = useState(false);
  const [draft, setDraft] = useState(player);
  const [mounted, setMounted] = useState(true);

  useEffect(() => { setDraft(player); setEditing(false); setTab('overview'); }, [player?.id]);

  useEffect(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return () => window.removeEventListener('keydown', k);
  }, [onClose]);

  if (!player) return null;
  const club = clubByCode(player.club);
  const age = ageFromDob(player.dob);
  const rv = Object.values(player.radar);
  const avgRadar = rv.reduce((a,b)=>a+b,0) / rv.length;

  const save = () => { onEdit(draft); setEditing(false); };

  const setF = (path, v) => {
    setDraft(d => {
      const c = JSON.parse(JSON.stringify(d));
      const ks = path.split('.');
      let cur = c;
      for (let i = 0; i < ks.length - 1; i++) cur = cur[ks[i]];
      cur[ks[ks.length-1]] = v;
      return c;
    });
  };

  return (
    <>
      <div className={`profile-backdrop ${mounted?'in':''}`} onClick={onClose}></div>
      <aside className={`profile-panel ${mounted?'in':''}`}>
        <div className="profile-head" style={{'--club-color': club.color}}>
          <div className="profile-head-bg"></div>
          <button className="icon-btn close-x" onClick={onClose}>✕</button>
          <div className="profile-id">
            <image-slot
              id={`photo-${player.id}`}
              shape="rounded"
              radius="10"
              placeholder="Drop player photo"
              style={{width:'88px', height:'88px', flex:'0 0 88px'}}
            ></image-slot>
            <div className="profile-shirt mono">{player.shirt || '–'}</div>
            <div className="profile-id-text">
              <div className="profile-pos-line">
                <PosBadge pos={player.pos} t={t}/>
                {(player.altPos||[]).map((p,i) => <PosBadge key={i} pos={p} t={t}/>)}
                <span className="profile-team-pill">{player.team}</span>
              </div>
              <h2 className="profile-name">{player.name}</h2>
              <div className="profile-name-th">{player.thaiName}</div>
            </div>
          </div>
          <div className="profile-meta">
            <div className="pm-cell"><span className="pm-lab">{t('age')}</span><span className="pm-val mono">{age}</span></div>
            <div className="pm-cell"><span className="pm-lab">{t('dob')}</span><span className="pm-val mono">{player.dob}</span></div>
            <div className="pm-cell"><span className="pm-lab">{t('height')}</span><span className="pm-val mono">{player.height} cm</span></div>
            <div className="pm-cell"><span className="pm-lab">{t('foot')}</span><span className="pm-val"><FootIcon foot={player.foot}/></span></div>
            <div className="pm-cell"><span className="pm-lab">{t('club')}</span><span className="pm-val">
              <span className="club-pm">
                <image-slot
                  id={`clublogo-${player.club}`}
                  shape="rounded"
                  radius="4"
                  placeholder="logo"
                  style={{width:'22px', height:'22px', flex:'0 0 22px'}}
                ></image-slot>
                <ClubChip code={player.club}/>
              </span>
            </span></div>
            <div className="pm-cell"><span className="pm-lab">{t('caps')}</span><span className="pm-val mono">{player.caps} · {player.intGoals}g</span></div>
          </div>
        </div>

        <div className="profile-tabs">
          {['overview','attributes','career','club_stats','nt_stats'].map(k => (
            <button key={k} className={`tab ${tab===k?'on':''}`} onClick={() => setTab(k)}>
              {t(k)}
            </button>
          ))}
          <div className="tab-spacer"></div>
          {!editing ? (
            <>
              <button className="btn-ghost sm" onClick={() => setEditing(true)}>✎ {t('edit')}</button>
              {onDelete && (
                <button className="btn-ghost sm danger" style={{color:'var(--accent-red)'}}
                  onClick={() => { if(confirm(`Delete ${player.name}?`)) onDelete(player.id); }}>
                  ✕ {t('delete') || 'Delete'}
                </button>
              )}
            </>
          ) : (
            <>
              <button className="btn-ghost sm" onClick={() => { setDraft(player); setEditing(false); }}>{t('cancel')}</button>
              <button className="btn-primary sm" onClick={save}>{t('save')}</button>
            </>
          )}
        </div>

        <div className="profile-body">
          {tab === 'overview' && (
            <div className="grid-2">
              <div className="card">
                <div className="card-h">{t('attributes')}</div>
                <RadarChart values={player.radar} t={t}/>
                <div className="overall-rating">
                  <StarRating value={avgRadar}/>
                  <span className="mono dim">Avg {avgRadar.toFixed(1)} / 20</span>
                </div>
              </div>
              <div className="card">
                <div className="card-h">{t('club_stats')}</div>
                <div className="stat-grid">
                  <Stat k={t('apps')} v={player.stats.apps}/>
                  <Stat k={t('goals')} v={player.stats.goals} hl/>
                  <Stat k={t('assists')} v={player.stats.assists}/>
                  <Stat k={t('minutes')} v={player.stats.minutes}/>
                  <Stat k={t('yellows')} v={player.stats.yellows} color="#f5c542"/>
                  <Stat k={t('reds')} v={player.stats.reds} color="#d8232a"/>
                </div>
                <div className="card-h" style={{marginTop:18}}>{t('nt_stats')}</div>
                <div className="stat-grid">
                  <Stat k={t('apps')} v={player.intStats.apps}/>
                  <Stat k={t('goals')} v={player.intStats.goals} hl/>
                  <Stat k={t('assists')} v={player.intStats.assists}/>
                  <Stat k={t('minutes')} v={player.intStats.minutes}/>
                </div>
              </div>
            </div>
          )}

          {tab === 'attributes' && (
            <div className="card">
              <div className="card-h">{t('attributes')}</div>
              <div className="attr-grid">
                {['pace','shooting','passing','dribbling','defending','physical'].map(k => (
                  <div key={k} className="attr-row">
                    <span className="attr-lab">{t(k)}</span>
                    {editing ? (
                      <input type="number" min="1" max="20" value={draft.radar[k]}
                        onChange={e => setF('radar.'+k, +e.target.value)} className="num-input"/>
                    ) : (
                      <>
                        <StatBar value={player.radar[k]} color={attrColor(player.radar[k])}/>
                        <span className="mono num attr-num">{player.radar[k]}</span>
                      </>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'career' && (
            <div className="card">
              <div className="card-h">{t('career')}</div>
              <CareerTimeline career={player.career} t={t}/>
              <div style={{height:18}}></div>
              <CareerTable career={player.career} t={t}/>
            </div>
          )}

          {tab === 'club_stats' && (
            <div className="card">
              <div className="card-h">{t('club_stats')} — {clubByCode(player.club).name}</div>
              <EditableStats stats={editing ? draft.stats : player.stats} editing={editing}
                onChange={(k,v) => setF('stats.'+k, v)} t={t}/>
            </div>
          )}

          {tab === 'nt_stats' && (
            <div className="card">
              <div className="card-h">{t('nt_stats')} — {player.team}</div>
              <EditableStats stats={editing ? draft.intStats : player.intStats} editing={editing}
                onChange={(k,v) => setF('intStats.'+k, v)} t={t}/>
            </div>
          )}
        </div>
      </aside>
    </>
  );
}

function attrColor(v) {
  if (v >= 15) return 'var(--accent-blue)';
  if (v >= 11) return '#5b8fd9';
  if (v >= 7) return '#8a99b3';
  return '#5f6a82';
}

function Stat({ k, v, hl, color }) {
  return (
    <div className={`stat ${hl?'hl':''}`}>
      <div className="stat-v mono" style={color?{color}:null}>{v}</div>
      <div className="stat-k">{k}</div>
    </div>
  );
}

function EditableStats({ stats, editing, onChange, t }) {
  const keys = [['apps', t('apps')], ['goals', t('goals')], ['assists', t('assists')],
                ['minutes', t('minutes')], ['yellows', t('yellows')], ['reds', t('reds')]];
  return (
    <div className="stat-grid">
      {keys.map(([k, lab]) => (
        <div key={k} className="stat">
          {editing ? (
            <input type="number" value={stats[k]} onChange={e => onChange(k, +e.target.value)} className="num-input lg"/>
          ) : (
            <div className="stat-v mono">{stats[k]}</div>
          )}
          <div className="stat-k">{lab}</div>
        </div>
      ))}
    </div>
  );
}

window.ProfilePanel = ProfilePanel;