// Komonichi — Focus Timer. Wabi-sabi ink-circle progress, with bell, breathing entry.
const { useKomonichi, actions, sel, fmtMin } = window.KomonichiState;

function FocusTimer({ defaultTaskId = null, onClose }) {
  const [state] = useKomonichi();
  const [taskId, setTaskId] = React.useState(defaultTaskId || (state.tasks.find(t => t.status === 'open')?.id) || null);
  const [mode, setMode] = React.useState('pomodoro'); // pomodoro | custom
  const [duration, setDuration] = React.useState(state.settings.pomodoroMin); // minutes
  const [running, setRunning] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(0); // seconds
  const [phase, setPhase] = React.useState('focus'); // focus | break
  const [breakLen, setBreakLen] = React.useState(state.settings.breakMin);
  const [showCongrats, setShowCongrats] = React.useState(false);
  const [askCompleted, setAskCompleted] = React.useState(false);

  const total = duration * 60;
  const remaining = Math.max(0, total - elapsed);

  React.useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setElapsed(e => e + 1), 1000);
    return () => clearInterval(id);
  }, [running]);

  React.useEffect(() => {
    if (running && elapsed >= total) {
      setRunning(false);
      // bell at end — two soft strikes
      window.KomonichiSound?.bellPair();
      if (phase === 'focus') {
        // minutes logged: round up at least 1
        const loggedMin = Math.max(1, Math.round(total / 60));
        actions.logSession({ taskId, minutes: loggedMin, mode });
        const before = sel.todayMinutes(window.KomonichiState.getState()) - loggedMin;
        const after = sel.todayMinutes(window.KomonichiState.getState());
        const target = window.KomonichiState.getState().settings.dailyFocusTargetMin;
        if (before < target && after >= target) setShowCongrats(true);
        setAskCompleted(true);
      } else {
        setPhase('focus');
        setElapsed(0);
      }
    }
  }, [elapsed, running, total, phase, taskId, mode]);

  const start = () => {
    if (!taskId) return;
    setElapsed(0);
    setPhase('focus');
    setAskCompleted(false);
    // two bells on start
    window.KomonichiSound?.bellPair();
    setRunning(true);
  };
  const pause = () => setRunning(false);
  const resume = () => setRunning(true);
  const stop = () => { setRunning(false); setElapsed(0); setAskCompleted(false); };

  const startBreak = () => {
    setAskCompleted(false);
    setPhase('break');
    setElapsed(0);
    setDuration(breakLen);
    window.KomonichiSound?.bellPair();
    setRunning(true);
  };
  const anotherSession = () => {
    setAskCompleted(false);
    setPhase('focus');
    setElapsed(0);
    if (mode === 'pomodoro') setDuration(state.settings.pomodoroMin);
    window.KomonichiSound?.bellPair();
    setRunning(true);
  };
  const markTaskDone = () => {
    if (taskId) actions.toggleTaskDone(taskId);
    setAskCompleted(false);
  };

  const pickLength = (val) => setDuration(val);

  const pct = total > 0 ? Math.min(1, elapsed / total) : 0;
  const mins = Math.floor(remaining / 60);
  const secs = remaining % 60;

  // SVG enso progress
  const R = 110, C = 2 * Math.PI * R;
  const offset = C - C * pct;

  const task = state.tasks.find(t => t.id === taskId);
  const openTasks = state.tasks.filter(t => t.status === 'open');

  return (
    <div className="card breath-in" style={{ background: 'rgba(255,254,250,0.75)' }}>
      <div className="cap">
        <div>
          <div className="label">Focus practice</div>
          <h3 className="title" style={{ marginTop: 6 }}>
            <span className="display">a single</span> bell
          </h3>
        </div>
        {onClose ? <button className="btn ghost tiny" onClick={onClose}>close</button> : null}
      </div>

      {/* mode + duration */}
      {!running && phase === 'focus' && !askCompleted && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18, alignItems: 'flex-end', marginBottom: 22 }}>
          <div>
            <div className="label" style={{ marginBottom: 6 }}>shape</div>
            <div style={{ display: 'flex', gap: 0 }}>
              {['pomodoro', 'custom'].map(m => (
                <button key={m}
                  onClick={() => { setMode(m); if (m === 'pomodoro') setDuration(state.settings.pomodoroMin); }}
                  className="btn tiny"
                  style={{
                    borderRight: m === 'pomodoro' ? 0 : '1px solid var(--ink-soft)',
                    background: mode === m ? 'var(--ink)' : 'transparent',
                    color: mode === m ? 'var(--paper)' : 'var(--ink)',
                  }}>{m}</button>
              ))}
            </div>
          </div>
          <div>
            <div className="label" style={{ marginBottom: 6 }}>length</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {[15, 25, 30, 45, 60].map(n => (
                <button key={n} onClick={() => pickLength(n)} className="btn tiny"
                  style={{
                    background: duration === n ? 'var(--ink)' : 'transparent',
                    color:      duration === n ? 'var(--paper)' : 'var(--ink)',
                  }}>{n}m</button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* task selector */}
      {!running && !askCompleted && (
        <div style={{ marginBottom: 22 }}>
          <div className="label" style={{ marginBottom: 6 }}>tend to</div>
          {React.createElement(window.ThemedSelect, {
            value: taskId || '',
            onChange: setTaskId,
            placeholder: '— choose a task —',
            options: openTasks.map(t => ({ value: t.id, label: t.title })),
          })}
        </div>
      )}

      {/* the bell — enso ring */}
      <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 22px' }}>
        <div style={{ position: 'relative', width: 260, height: 260 }} className={running ? 'breathe' : ''}>
          <svg viewBox="0 0 260 260" style={{ width: '100%', height: '100%' }}>
            <defs>
              <filter id="ink" x="-20%" y="-20%" width="140%" height="140%">
                <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="2" seed="3"/>
                <feDisplacementMap in="SourceGraphic" scale="2"/>
              </filter>
            </defs>
            <circle cx="130" cy="130" r={R} fill="none" stroke="var(--paper-line)" strokeWidth="1.2" />
            <circle cx="130" cy="130" r={R} fill="none"
              stroke={phase === 'break' ? 'var(--moss)' : 'var(--ink)'}
              strokeWidth="2.5" strokeLinecap="round"
              strokeDasharray={C}
              strokeDashoffset={offset}
              transform="rotate(-90 130 130)"
              style={{ transition: 'stroke-dashoffset 1s linear', filter: 'url(#ink)' }}
            />
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
            <div className="label" style={{ marginBottom: 6 }}>
              {phase === 'break' ? 'breathe' : (running ? 'attending' : (askCompleted ? 'a pause' : 'awaiting'))}
            </div>
            <div className="num" style={{ fontSize: 58, lineHeight: 1, fontWeight: 300, letterSpacing: '-0.02em' }}>
              {String(mins).padStart(2, '0')}<span style={{ opacity: 0.4 }}>:</span>{String(secs).padStart(2, '0')}
            </div>
            {task && !askCompleted ? (
              <div className="display" style={{ marginTop: 12, color: 'var(--ink-soft)', maxWidth: 200, fontSize: 16 }}>
                {task.title}
              </div>
            ) : null}
          </div>
        </div>
      </div>

      {/* controls */}
      {!askCompleted ? (
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          {!running && elapsed === 0 && (
            <button className="btn warm" onClick={start} disabled={!taskId}>begin</button>
          )}
          {running && (
            <button className="btn" onClick={pause}>pause</button>
          )}
          {!running && elapsed > 0 && (
            <>
              <button className="btn warm" onClick={resume}>continue</button>
              <button className="btn ghost" onClick={stop}>release</button>
            </>
          )}
        </div>
      ) : (
        <div className="fade-in" style={{ textAlign: 'center' }}>
          <div className="haiku" style={{ margin: '0 auto 18px' }}>
            <span className="line">A bowl was kept.</span>
            <span className="line">Is the task complete,</span>
            <span className="line">or does the cup need refilling?</span>
          </div>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn warm" onClick={markTaskDone}>task complete</button>
            <button className="btn" onClick={anotherSession}>another bowl</button>
            <button className="btn ghost" onClick={startBreak}>{breakLen}m rest</button>
          </div>
        </div>
      )}

      {/* congrats overlay */}
      {showCongrats && (
        <div className="fade-in" style={{
          position: 'fixed', inset: 0, background: 'rgba(250,246,236,0.95)',
          zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
        }} onClick={() => setShowCongrats(false)}>
          <div style={{ maxWidth: 520, textAlign: 'center' }}>
            <div className="enso breathe" style={{ width: 110, height: 110, margin: '0 auto 28px' }}></div>
            <div className="label" style={{ color: 'var(--persimmon)' }}>the day's mark</div>
            <h2 className="display" style={{ fontSize: 46, margin: '12px 0 16px', color: 'var(--ink)' }}>
              you've reached it.
            </h2>
            <div className="haiku" style={{ margin: '0 auto 24px' }}>
              <span className="line">The bell is held.</span>
              <span className="line">The afternoon now opens.</span>
              <span className="line">Nothing more is owed.</span>
            </div>
            <button className="btn warm" onClick={() => setShowCongrats(false)}>return</button>
          </div>
        </div>
      )}
    </div>
  );
}

window.FocusTimer = FocusTimer;