// Main app — composes the list and profile, owns state + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "EN",
  "density": "comfortable",
  "fontScale": 1.0,
  "palette": ["#0e1620", "#d8232a", "#2444a1"]
}/*EDITMODE-END*/;

// ── API helpers ──────────────────────────────────────────────────────────────
const api = {
  get:  (p)       => fetch(p).then(r => r.ok ? r.json() : null),
  put:  (p, body) => fetch(p, { method:'PUT',    headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) }),
  post: (p, body) => fetch(p, { method:'POST',   headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) }),
  del:  (p)       => fetch(p, { method:'DELETE' }),
};

// ── App ──────────────────────────────────────────────────────────────────────
function App() {
  const [players, setPlayers] = useState(window.TWNT_DATA.PLAYERS);
  const [selected, setSelected] = useState(null);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [apiReady, setApiReady] = useState(false);

  const t = useI18n(tweaks.lang);

  // Load live data from D1 on mount
  useEffect(() => {
    api.get('/api/players').then(data => {
      if (data?.players?.length) {
        setPlayers(data.players);
        setApiReady(true);
      }
    }).catch(() => {});
  }, []);

  useEffect(() => {
    const root = document.documentElement;
    root.dataset.density = tweaks.density;
    root.style.setProperty('--font-scale', tweaks.fontScale);
    if (tweaks.palette && tweaks.palette.length >= 3) {
      root.style.setProperty('--bg-deep', tweaks.palette[0]);
      root.style.setProperty('--accent-red', tweaks.palette[1]);
      root.style.setProperty('--accent-blue', tweaks.palette[2]);
    }
  }, [tweaks.density, tweaks.fontScale, tweaks.palette]);

  const handleImport = (newPlayers) => {
    setPlayers(curr => {
      const map = new Map(curr.map(p => [p.id, p]));
      for (const np of newPlayers) {
        const existing = map.get(np.id);
        const merged = existing ? { ...existing, ...np } : np;
        if (!merged.career) merged.career = [];
        map.set(np.id, merged);
        if (apiReady) {
          existing
            ? api.put(`/api/players/${np.id}`, merged).catch(console.error)
            : api.post('/api/players', merged).catch(console.error);
        }
      }
      return Array.from(map.values());
    });
  };

  const handleExportCsv = () => downloadFile('thailand-wnt-players.csv', toCsv(players), 'text/csv');
  const handleExportXml = () => downloadFile('thailand-wnt-players.xml', toXml(players), 'application/xml');

  const handleEditPlayer = (updated) => {
    setPlayers(curr => curr.map(p => p.id === updated.id ? updated : p));
    setSelected(updated);
    if (apiReady) api.put(`/api/players/${updated.id}`, updated).catch(console.error);
  };

  const handleDeletePlayer = (id) => {
    setPlayers(curr => curr.filter(p => p.id !== id));
    setSelected(null);
    if (apiReady) api.del(`/api/players/${id}`).catch(console.error);
  };

  const handleAddPlayer = () => {
    const id = 'p_' + Date.now();
    const blank = {
      id, name: 'New Player', thaiName: '',
      pos: 'CM', altPos: [], dob: '2005-01-01', foot: 'R', height: 165,
      team: 'Senior', club: 'BG', shirt: 0, caps: 0, intGoals: 0,
      stats:    { apps:0, goals:0, assists:0, yellows:0, reds:0, minutes:0 },
      intStats: { apps:0, goals:0, assists:0, yellows:0, reds:0, minutes:0 },
      radar:    { pace:10, shooting:10, passing:10, dribbling:10, defending:10, physical:10 },
      career:   [],
    };
    if (apiReady) api.post('/api/players', blank).catch(console.error);
    setPlayers(curr => [blank, ...curr]);
    setSelected(blank);
  };

  return (
    <>
      <PlayerList
        players={players}
        onSelect={setSelected}
        onImport={handleImport}
        onExportCsv={handleExportCsv}
        onExportXml={handleExportXml}
        onAddPlayer={handleAddPlayer}
        t={t}
        lang={tweaks.lang}
        density={tweaks.density}
        apiReady={apiReady}
      />

      {selected && (
        <ProfilePanel
          player={selected}
          onClose={() => setSelected(null)}
          onEdit={handleEditPlayer}
          onDelete={handleDeletePlayer}
          t={t}
          density={tweaks.density}
        />
      )}

      <TweaksPanel title={t('tweaks_title')}>
        <TweakSection label="Display"/>
        <TweakRadio label="Language" value={tweaks.lang} options={['EN', 'TH']}
          onChange={v => setTweak('lang', v)}/>
        <TweakRadio label="Density" value={tweaks.density} options={['comfortable', 'compact']}
          onChange={v => setTweak('density', v)}/>
        <TweakSlider label="Font scale" value={tweaks.fontScale} min={0.85} max={1.25} step={0.05}
          unit="×" onChange={v => setTweak('fontScale', v)}/>

        <TweakSection label="Theme"/>
        <TweakColor label="Palette" value={tweaks.palette}
          options={[
            ['#0e1620', '#d8232a', '#2444a1'],
            ['#0a0d14', '#e6394a', '#3b6fcc'],
            ['#1a0d0d', '#e8323a', '#1d4eaa'],
            ['#0c1330', '#e44a52', '#5079d8'],
            ['#16161d', '#ef4f57', '#8a6cf4'],
          ]}
          onChange={v => setTweak('palette', v)}/>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);