// AiStage.jsx — Ny AI-meny på dashboard (UX del A, §2). Erstatter DashAIStage.
//
// Alt-i-ett-første-bildet: fritekstfelt (valgfri instruks) + tre klikkbare kort,
// hvert med en modus-nedtrekk nederst. Klikk på kortet KJØRER med valgt modus;
// klikk på nedtrekket endrer bare modus. Enter i fritekstfeltet kjører sist
// brukte kort. Valgt modus + sist brukte kort persisteres i localStorage.
//
// «Prioriter for meg» kjører den ekte plattformen (AiWorkspace). Coach og «Lag
// noe nytt» kjører midlertidig mot eksisterende mock-paneler via renderCoach/
// renderDraft-callbacks fra Dashboard (§2.2), til de bygges ekte (E6).

const { useState: useStageState, useEffect: useStageEffect, useRef: useStageRef } = React;

const AI_STAGE_CARDS = [
  {
    key: 'prioritize', title: 'Prioriter for meg', desc: 'La meg rangere og planlegge det viktigste for deg.',
    accent: '#8b7cf6', tint: 'rgba(139,124,246,0.16)', icon: 'ti-arrow-bar-to-up', real: true,
    modes: [
      { id: 'prioritize.day_plan', label: 'Lag dagsplan' },
      { id: 'prioritize.week_plan', label: 'Lag ukeplan' },
      { id: 'prioritize.revise_todos', label: 'Revider hele todo-listen' },
    ],
  },
  {
    key: 'coach', title: 'Coach meg', desc: 'Innsikt, refleksjon og motivasjon.',
    accent: '#f08a6b', tint: 'rgba(240,138,107,0.16)', icon: 'ti-heart-handshake', real: false,
    modes: [{ id: 'coach.insight', label: 'Innsikt' }],
  },
  {
    key: 'draft', title: 'Lag noe nytt', desc: 'Mål, prosjekt, rutine eller tracker.',
    accent: '#00d4aa', tint: 'rgba(0,212,170,0.14)', icon: 'ti-sparkles', real: false,
    modes: [{ id: 'draft.goal', label: 'Mål' }],
  },
];

function aiStageLoadModes() {
  const m = {};
  for (const c of AI_STAGE_CARDS) {
    const saved = localStorage.getItem(`el-ai-mode-${c.key}`);
    m[c.key] = c.modes.some(x => x.id === saved) ? saved : c.modes[0].id;
  }
  return m;
}

function AiStage({ tasks, routines, renderCoach, renderDraft, onExitAi }) {
  const [wpFilter] = useWpFilter();
  const [view, setView] = useStageState('menu');           // 'menu' | 'work'
  const [runConfig, setRunConfig] = useStageState(null);   // { action, instruction }
  const [mockView, setMockView] = useStageState(null);     // 'coach' | 'draft'
  const [instruction, setInstruction] = useStageState('');
  const [modes, setModes] = useStageState(aiStageLoadModes);
  const [lastCard, setLastCard] = useStageState(() => localStorage.getItem('el-ai-last-card') || 'prioritize');
  const [openDrop, setOpenDrop] = useStageState(null);
  const rootRef = useStageRef(null);

  // Lukk nedtrekk ved klikk utenfor.
  useStageEffect(() => {
    if (!openDrop) return;
    function onDoc(e) { if (rootRef.current && !e.target.closest('.ai2-mode')) setOpenDrop(null); }
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [openDrop]);

  function setMode(cardKey, modeId) {
    setModes(m => ({ ...m, [cardKey]: modeId }));
    localStorage.setItem(`el-ai-mode-${cardKey}`, modeId);
    setOpenDrop(null);
  }

  function runCard(cardKey) {
    const card = AI_STAGE_CARDS.find(c => c.key === cardKey);
    if (!card) return;
    setLastCard(cardKey);
    localStorage.setItem('el-ai-last-card', cardKey);
    const instr = instruction.trim();
    if (card.real) {
      setRunConfig({ action: modes[cardKey], instruction: instr });
      setMockView(null);
    } else {
      setMockView(cardKey);
      setRunConfig(null);
    }
    setInstruction('');
    setView('work');
  }

  function backToMenu() { setView('menu'); setRunConfig(null); setMockView(null); }

  function submitFreeText(e) {
    e && e.preventDefault();
    runCard(lastCard);
  }

  // Enter et til (uten at noe spesifikt er fokusert) kjører «Prioriter for
  // meg» → «Lag dagsplan» direkte, uansett hva som sist var i bruk (§1).
  useStageEffect(() => {
    if (view !== 'menu') return;
    function onKey(e) {
      if (e.key !== 'Enter' || e.repeat) return;
      const tag = e.target && e.target.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target && e.target.isContentEditable)) return;
      e.preventDefault();
      setLastCard('prioritize');
      localStorage.setItem('el-ai-last-card', 'prioritize');
      setRunConfig({ action: 'prioritize.day_plan', instruction: instruction.trim() });
      setMockView(null);
      setInstruction('');
      setView('work');
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [view, instruction]);

  // ── Arbeidsvisning ────────────────────────────────────────────────────
  if (view === 'work') {
    if (runConfig) {
      const scheduleView = localStorage.getItem('el-schedule-view') === 'true';
      return (
        <div className="dash-ai-stage">
          <AiWorkspace
            action={runConfig.action}
            wpFilter={wpFilter}
            instruction={runConfig.instruction}
            scheduleHint={scheduleView}
            onClose={backToMenu}
            onAllDone={() => { backToMenu(); onExitAi && onExitAi(); }}
            onApplied={() => { try { window.dispatchEvent(new CustomEvent('el-today-refresh')); } catch (e) {} }}
          />
        </div>
      );
    }
    if (mockView === 'coach' && renderCoach) return <div className="dash-ai-stage">{renderCoach({ onBack: backToMenu })}</div>;
    if (mockView === 'draft' && renderDraft) return <div className="dash-ai-stage">{renderDraft({ onBack: backToMenu })}</div>;
    // Fallback hvis mock ikke er tilgjengelig.
    return (
      <div className="dash-ai-stage">
        <div className="ai-ws-empty-friendly">
          <div className="ai-ws-empty-ic"><i className="ti ti-tool"></i></div>
          <div>Denne funksjonen bygges snart.</div>
          <button className="ai-ws-btn ai-ws-btn-ghost" onClick={backToMenu}><i className="ti ti-arrow-left"></i>Tilbake</button>
        </div>
      </div>
    );
  }

  // ── Meny ──────────────────────────────────────────────────────────────
  return (
    <div className="dash-ai-stage" ref={rootRef}>
      <div className="ai2-menu">
        <div className="dash-ai-menu2-bg" aria-hidden="true"></div>

        <form className="ai2-search" onSubmit={submitFreeText}>
          <input
            className="ai2-search-input"
            value={instruction}
            onChange={e => setInstruction(e.target.value)}
            placeholder="Valgfri instruks … f.eks. «fokuser på jobb» eller «jeg har bare 3 timer»"
            maxLength={1000}
            autoComplete="off"
          />
          <button type="submit" className="ai2-search-go" title="Kjør sist brukte kort" aria-label="Kjør">
            <i className="ti ti-arrow-right"></i>
          </button>
        </form>

        <div className="ai2-cards">
          {AI_STAGE_CARDS.map(card => {
            const modeId = modes[card.key];
            const mode = card.modes.find(m => m.id === modeId) || card.modes[0];
            const isEnter = card.key === lastCard;
            return (
              <div
                key={card.key}
                className={`ai2-card${isEnter ? ' is-enter' : ''}`}
                style={{ '--nc': card.accent, '--nt': card.tint }}
                role="button" tabIndex={0}
                onClick={() => runCard(card.key)}
                onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); runCard(card.key); } }}
              >
                {isEnter && <span className="ai2-card-enter" title="Enter kjører dette kortet"><i className="ti ti-corner-down-left"></i></span>}
                <span className="ai2-card-ic"><i className={`ti ${card.icon}`}></i></span>
                <span className="ai2-card-h">{card.title}</span>
                <span className="ai2-card-p">{card.desc}</span>

                <div
                  className={`ai2-mode${openDrop === card.key ? ' is-open' : ''}`}
                  onClick={e => { e.stopPropagation(); setOpenDrop(o => o === card.key ? null : card.key); }}
                  role="button" tabIndex={0}
                  onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.stopPropagation(); e.preventDefault(); setOpenDrop(o => o === card.key ? null : card.key); } }}
                >
                  <span className="ai2-mode-label">{mode.label}</span>
                  <i className="ti ti-chevron-down ai2-mode-chev"></i>
                  {openDrop === card.key && (
                    <div className="ai2-mode-pop" onClick={e => e.stopPropagation()}>
                      {card.modes.map(m => (
                        <button
                          key={m.id}
                          className={`ai2-mode-opt${m.id === modeId ? ' is-sel' : ''}`}
                          onClick={e => { e.stopPropagation(); setMode(card.key, m.id); }}
                        >
                          {m.id === modeId && <i className="ti ti-check"></i>}
                          <span>{m.label}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.AiStage = AiStage;