import { useEffect, useState } from "react";
import { gameApi, useGame } from "../store.js";

export default function EmotionBar() {
  const recording = useGame((s) => s.scriptRecording);
  const playing = useGame((s) => s.scriptPlaying);
  const actions = useGame((s) => s.scriptActions);
  const saved = useGame((s) => s.savedScripts);
  const entered = useGame((s) => s.entered);
  const bootDone = useGame((s) => s.bootDone);
  const menuOpen = useGame((s) => s.menuOpen);
  const [name, setName] = useState("");
  const [selected, setSelected] = useState("");
  const [collapsed, setCollapsed] = useState(false);
  const [aiText, setAiText] = useState("");
  useEffect(() => { if (playing) setCollapsed(true); }, [playing]);
  const toggleRecording = () => {
    if (!recording) setCollapsed(false);
    gameApi.script?.toggle();
  };
  const hasEditor = recording || actions.length > 0 || saved.length > 0;
  if (!entered || !bootDone || menuOpen) return null;
  return <div className="emotion-bar" aria-label="Robot script">
    <button disabled={playing} onClick={toggleRecording}>{recording ? "STOP SCRIPT" : "SCRIPT"}</button>
    {hasEditor && <div className={`script-editor${collapsed ? " is-collapsed" : ""}`}>
      <button className="script-collapse" aria-label={collapsed ? "Expand script" : "Collapse script"} onClick={() => setCollapsed((value) => !value)}>{collapsed ? "▲" : "▼"}</button>
      {collapsed ? <strong>Script ({actions.length} actions)</strong> : <>
        <strong>{recording ? "Recording actions" : "Script"}</strong>
        <ol>{actions.map((action) => {
          const reachyAction = action.label.startsWith("Reachy");
          const actor = reachyAction ? "reachy-mini" : "microduck";
          return <li key={action.id}><label className="script-parallel-check"><input type="checkbox" checked={!!action.parallel || !!action.parallelGroup} onChange={() => gameApi.script?.toggleParallel(action.index)} />parallel</label><span className={`script-actor ${reachyAction ? "actor-orange" : "actor-blue"}`}>{actor}</span><span>{action.label}</span>{(action.parallel || action.parallelGroup) && <label className="script-delay">départ après <input aria-label={`Delay ${action.label}`} type="number" min="0" step="0.1" value={action.delay || 0} onChange={(e) => gameApi.script?.setDelay(action.index, e.target.value)} /> s</label>}<button className="script-remove" aria-label={`Remove ${action.label}`} onClick={() => gameApi.script?.remove(action.index)}>×</button></li>;
        })}</ol>
        {recording && <button onClick={() => gameApi.script?.clear()}>Clear</button>}
        <input value={name} placeholder="Script name" onChange={(e) => setName(e.target.value)} />
        <button disabled={!name.trim() || !actions.length} onClick={() => { gameApi.script?.save(name); setSelected(name.trim()); }}>Save</button>
        <button disabled={playing || !actions.length} onClick={() => gameApi.script?.run()}>{playing ? "RUNNING" : "Run current"}</button>
        {saved.length > 0 && <select value={selected} onChange={(e) => setSelected(e.target.value)}><option value="">Saved scripts</option>{saved.map((script) => <option key={script} value={script}>{script}</option>)}</select>}
        <button disabled={playing || !selected} onClick={() => gameApi.script?.runSaved(selected)}>Run saved</button>
        <textarea className="script-ai" value={aiText} placeholder='JSON script: {"actions":[{"robot":"reachy-mini","action":"say","text":"Hello","parallel":true}]}' onChange={(e) => setAiText(e.target.value)} />
        <button onClick={() => navigator.clipboard?.writeText('Generate JSON only with an actions array. Use robot "microduck" or "reachy-mini", action "emotion", "say", or "wait"; use parallel:true only for actions that should overlap.')}>Copy format</button>
        <button disabled={!aiText.trim() || playing} onClick={() => { try { gameApi.script?.load(aiText); setAiText(""); } catch (error) { window.alert(error.message); } }}>Load JSON</button>
      </>}
    </div>}
  </div>;
}