// Timer panel: separate file because it's the biggest interaction.

function TimerPanel({
  state, setState,
  elapsedSec,
  sessionTitle, setSessionTitle,
  sessionTag, setSessionTag,
  sessionHabits, setSessionHabits,
  startSession, pauseSession, resumeSession, stopSession,
}) {
  const isRunning = !!state.activeSession;
  const isPaused = !!state.activeSession?.paused;
  const isRecording = isRunning && !isPaused;
  const activeTag = state.activeSession?.tagId ? state.tags.find(t => t.id === state.activeSession.tagId) : null;

  const tH = Math.floor(elapsedSec / 3600);
  const tM = Math.floor((elapsedSec % 3600) / 60);
  const tS = elapsedSec % 60;

  return (
    <div className="mb-10 relative z-10">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <span
            className="text-[11px] tracking-[0.25em] uppercase font-medium bracket-label"
            style={{ color: isPaused ? 'var(--warn)' : isRecording ? 'var(--danger)' : 'var(--text-2)' }}
          >
            {isPaused ? 'paused' : isRecording ? 'recording' : 'new session'}
          </span>
          {isRecording && <div className="w-1.5 h-1.5 rounded-full rec-dot" style={{ background: 'var(--danger)' }} />}
          {isPaused && <div className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--warn)' }} />}
        </div>
        {isRunning && (
          <span className="text-[11px] tracking-[0.25em] uppercase tabular" style={{ color: 'var(--text-2)' }}>
            started {new Date(state.activeSession.startTime).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false })}
          </span>
        )}
      </div>

      <div
        className={`surface transition-all duration-500 ${isRecording ? 'rec-glow' : ''}`}
        style={{
          borderColor: isRecording ? 'color-mix(in oklch, var(--danger) 50%, transparent)' :
                       isPaused ? 'color-mix(in oklch, var(--warn) 40%, transparent)' :
                       'var(--line)',
          background: isRecording
            ? 'linear-gradient(180deg, color-mix(in oklch, var(--danger) 8%, var(--bg-1)), var(--bg-1))'
            : isPaused
            ? 'linear-gradient(180deg, color-mix(in oklch, var(--warn) 8%, var(--bg-1)), var(--bg-1))'
            : 'var(--bg-1)',
        }}
      >
        {isRunning ? (
          <div className="p-14 fade-up text-center relative">
            {/* Animated concentric rings when recording */}
            {isRecording && (
              <>
                <div
                  aria-hidden
                  style={{
                    position: 'absolute',
                    inset: 0,
                    pointerEvents: 'none',
                    background: 'radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--danger) 10%, transparent), transparent 60%)',
                  }}
                />
              </>
            )}

            <div
              className="display font-medium tabular mb-8 tracking-tighter leading-[0.85] transition-colors duration-500"
              style={{
                fontSize: 'clamp(120px, 16vw, 220px)',
                color: isPaused ? 'var(--text-2)' : 'var(--text-0)',
                position: 'relative',
                zIndex: 1,
                textShadow: isRecording ? '0 0 60px color-mix(in oklch, var(--danger) 30%, transparent)' : 'none',
              }}
            >
              {pad2(tH)}
              <span className={isPaused ? 'colon-static' : 'colon-red'}>:</span>
              {pad2(tM)}
              <span className={isPaused ? 'colon-static' : 'colon-red'}>:</span>
              {pad2(tS)}
            </div>

            <div
              className="display text-3xl mb-6 font-light transition-colors duration-500"
              style={{ color: isPaused ? 'var(--text-2)' : 'var(--text-0)' }}
            >
              {state.activeSession.title}
            </div>

            <div className="flex items-center gap-3 mb-10 flex-wrap justify-center">
              {activeTag && (
                <div
                  className="flex items-center gap-2 px-3 py-1.5 rounded-full border"
                  style={{ borderColor: activeTag.color + '80', background: 'var(--bg-2)' }}
                >
                  <div className="w-1.5 h-1.5 rounded-full" style={{ background: activeTag.color }} />
                  <span className="text-xs" style={{ color: activeTag.color }}>{activeTag.name}</span>
                </div>
              )}
              {state.activeSession.habitIds?.map(hid => {
                const h = state.habits.find(x => x.id === hid);
                return h ? (
                  <div key={hid} className="flex items-center gap-2 px-3 py-1.5 rounded-full border"
                    style={{
                      borderColor: 'color-mix(in oklch, var(--accent) 40%, transparent)',
                      background: 'color-mix(in oklch, var(--accent) 10%, transparent)',
                      color: 'var(--accent)',
                    }}
                  >
                    <CheckIcon size={11} strokeWidth={3} />
                    <span className="text-xs">{h.name}</span>
                  </div>
                ) : null;
              })}
            </div>

            <div className="flex items-center justify-center gap-3">
              {isPaused ? (
                <button onClick={resumeSession} className="btn btn-primary">
                  <PlayIcon size={14} fill="currentColor" />
                  <span>RESUME</span>
                </button>
              ) : (
                <button onClick={pauseSession} className="btn btn-ghost">
                  <PauseIcon size={14} fill="currentColor" />
                  <span>PAUSE</span>
                </button>
              )}
              <button onClick={stopSession} className="btn btn-stop">
                <SquareIcon size={14} fill="currentColor" />
                <span>STOP &amp; LOG</span>
              </button>
            </div>
          </div>
        ) : (
          <div className="p-14 text-center scale-in">
            <input
              value={sessionTitle}
              onChange={(e) => setSessionTitle(e.target.value)}
              placeholder="what are you working on?"
              onKeyDown={(e) => e.key === 'Enter' && startSession()}
              className="display w-full bg-transparent outline-none text-center text-5xl font-light mb-10 tracking-tight"
              style={{ color: 'var(--text-0)' }}
            />
            <div className="flex items-center gap-2 mb-4 flex-wrap justify-center">
              <span className="text-[11px] tracking-wide mr-1" style={{ color: 'var(--text-2)' }}>tag</span>
              {state.tags.map(t => {
                const active = sessionTag === t.id;
                return (
                  <button
                    key={t.id}
                    onClick={() => setSessionTag(active ? null : t.id)}
                    className="pill flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs"
                    data-active={active}
                    style={active
                      ? { borderColor: t.color, background: t.color + '1F', color: t.color }
                      : { borderColor: 'var(--line)', color: 'var(--text-1)' }}
                  >
                    <div className="w-2 h-2 rounded-full" style={{ background: t.color }} />
                    <span>{t.name}</span>
                    {active && <CheckIcon size={11} strokeWidth={3} />}
                  </button>
                );
              })}
            </div>
            <div className="flex items-center gap-2 mb-10 flex-wrap justify-center">
              <span className="text-[11px] tracking-wide mr-1" style={{ color: 'var(--text-2)' }}>link habits</span>
              {state.habits.map(h => {
                const active = sessionHabits.includes(h.id);
                return (
                  <button
                    key={h.id}
                    onClick={() => setSessionHabits(active ? sessionHabits.filter(x => x !== h.id) : [...sessionHabits, h.id])}
                    className="pill flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs"
                    data-active={active}
                    style={active
                      ? { borderColor: 'var(--accent)', background: 'color-mix(in oklch, var(--accent) 10%, transparent)', color: 'var(--accent)' }
                      : { borderColor: 'var(--line)', color: 'var(--text-2)' }}
                  >
                    {active && <CheckIcon size={11} strokeWidth={3} />}
                    {h.name}
                  </button>
                );
              })}
            </div>
            <button
              onClick={startSession}
              disabled={!sessionTitle.trim()}
              className="btn btn-primary mx-auto"
            >
              <PlayIcon size={14} fill="currentColor" /> START SESSION
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

window.TimerPanel = TimerPanel;