import { useState, useEffect, useRef } from "react";

// ─── CONSTANTS ────────────────────────────────────────────────────────────────
const TASK_COLORS = [
  { name: "Blue",   ring: "#4a90d9", glow: "rgba(74,144,217,0.5)"  },
  { name: "Purple", ring: "#9b59b6", glow: "rgba(155,89,182,0.5)"  },
  { name: "Teal",   ring: "#56b4d3", glow: "rgba(86,180,211,0.5)"  },
  { name: "Amber",  ring: "#e67e22", glow: "rgba(230,126,34,0.5)"  },
  { name: "Green",  ring: "#2ecc71", glow: "rgba(46,204,113,0.5)"  },
  { name: "Pink",   ring: "#e91e8c", glow: "rgba(233,30,140,0.5)"  },
];

const TASK_ICONS = ["🌅","👕","🦷","🎒","🥣","📚","👟","🧴","🌙","💊","🍎","🚿","🧠","✏️","💧","🎵"];

const DEFAULT_TASKS = [
  { id: "t1", label: "Wake Up",        icon: "🌅", duration: 60,  colorIdx: 0 },
  { id: "t2", label: "Get Dressed",    icon: "👕", duration: 300, colorIdx: 1 },
  { id: "t3", label: "Brush Teeth",    icon: "🦷", duration: 120, colorIdx: 2 },
  { id: "t4", label: "Pack Backpack",  icon: "🎒", duration: 180, colorIdx: 3 },
  { id: "t5", label: "Eat Breakfast",  icon: "🥣", duration: 240, colorIdx: 4 },
];

const CIRCUMFERENCE = 2 * Math.PI * 88;

const C = {
  bg: "#070d14", card: "#0e1920", cardBorder: "#192635",
  text: "#e8edf2", muted: "#5a7590", accent: "#56b4d3",
};

const genId = () => Date.now().toString(36) + Math.random().toString(36).slice(2);
const fmtTime = s => `${Math.floor(s/60)}:${(s%60).toString().padStart(2,"0")}`;

// ─── SHARED UI ────────────────────────────────────────────────────────────────
const Btn = ({ children, onClick, color = C.accent, outline, small, disabled, style: extra = {} }) => (
  <button onClick={onClick} disabled={disabled} style={{
    padding: small ? "7px 16px" : "10px 22px",
    borderRadius: 30,
    background: outline ? "transparent" : disabled ? "#1a2a38" : color,
    border: `1px solid ${outline ? C.cardBorder : disabled ? "#1a2a38" : color}`,
    color: outline ? C.muted : disabled ? C.muted : color === "transparent" ? C.muted : "#070d14",
    fontFamily: "'DM Sans', sans-serif",
    fontWeight: 600, fontSize: small ? 12 : 13,
    cursor: disabled ? "default" : "pointer",
    transition: "all 0.2s",
    ...extra,
  }}>{children}</button>
);

const IconBtn = ({ children, onClick, disabled, danger }) => (
  <button onClick={onClick} disabled={disabled} style={{
    width: 28, height: 28, borderRadius: 6,
    background: "#080d14", border: `1px solid ${C.cardBorder}`,
    color: disabled ? "#1e2e3e" : danger ? "#e74c3c" : C.muted,
    cursor: disabled ? "default" : "pointer",
    fontSize: 12, display: "flex", alignItems: "center", justifyContent: "center",
  }}>{children}</button>
);

const Field = ({ label, children }) => (
  <div style={{ marginBottom: 16 }}>
    <div style={{ fontSize: 11, color: C.muted, letterSpacing: 1, textTransform: "uppercase", marginBottom: 8 }}>{label}</div>
    {children}
  </div>
);

const inputStyle = {
  width: "100%", background: "#080d14", border: `1px solid ${C.cardBorder}`,
  color: C.text, borderRadius: 8, padding: "10px 14px", fontSize: 14,
  fontFamily: "'DM Sans', sans-serif", outline: "none", boxSizing: "border-box",
};

const Stat = ({ icon, value, label }) => (
  <div style={{ background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 16, padding: "20px 22px" }}>
    <div style={{ fontSize: 22, marginBottom: 8 }}>{icon}</div>
    <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 30, fontWeight: 800, color: C.accent, lineHeight: 1 }}>{value}</div>
    <div style={{ fontSize: 12, color: C.muted, marginTop: 6 }}>{label}</div>
  </div>
);

// ─── DEVICE PUCK ─────────────────────────────────────────────────────────────
function Puck({ task, progress, running, celebrating, done, animate }) {
  const color = TASK_COLORS[task?.colorIdx ?? 0];
  const dashOffset = CIRCUMFERENCE * (1 - progress);
  const rainbowColors = ["#e74c3c","#e67e22","#f1c40f","#2ecc71","#3498db","#9b59b6"];

  return (
    <div style={{ position: "relative", width: 200, height: 200, margin: "0 auto" }}>
      {/* Outer glow */}
      <div style={{
        position: "absolute", inset: -28, borderRadius: "50%",
        background: `radial-gradient(circle, ${celebrating ? "rgba(46,204,113,0.55)" : done ? "rgba(86,180,211,0.3)" : color.glow} 0%, transparent 70%)`,
        animation: animate && running ? "glowPulse 2.2s ease-in-out infinite" : "none",
      }} />

      {/* Body */}
      <div style={{
        width: 200, height: 200, borderRadius: "50%",
        background: "radial-gradient(circle at 33% 33%, #1a2d3d, #07090f)",
        border: `3px solid ${C.cardBorder}`,
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative", overflow: "hidden",
        boxShadow: "inset 0 2px 10px rgba(255,255,255,0.04), 0 10px 40px rgba(0,0,0,0.6)",
      }}>
        {/* SVG ring */}
        {!done && task && (
          <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="88" fill="none" stroke={color.ring} strokeWidth="6" opacity="0.12"/>
            {celebrating ? (
              rainbowColors.map((c, i) => {
                const seg = CIRCUMFERENCE / rainbowColors.length;
                return (
                  <circle key={i} cx="100" cy="100" r="88" fill="none" stroke={c}
                    strokeWidth="8" strokeDasharray={`${seg} ${CIRCUMFERENCE - seg}`}
                    strokeDashoffset={-(i * seg)}
                    transform="rotate(-90 100 100)"
                    style={{ filter: `drop-shadow(0 0 6px ${c})`, animation: "spin 2s linear infinite" }}
                  />
                );
              })
            ) : (
              <circle cx="100" cy="100" r="88" fill="none" stroke={color.ring}
                strokeWidth="8" strokeDasharray={CIRCUMFERENCE} strokeDashoffset={dashOffset}
                strokeLinecap="round" transform="rotate(-90 100 100)"
                style={{ filter: `drop-shadow(0 0 8px ${color.ring})`, transition: "stroke-dashoffset 1s linear" }}
              />
            )}
          </svg>
        )}

        {/* Haptic ripples */}
        {animate && running && !celebrating && [0,1,2].map(i => (
          <div key={i} style={{
            position: "absolute", inset: 0, borderRadius: "50%",
            border: `2px solid ${color.ring}40`, opacity: 0,
            animation: `ripple 2.2s ease-out ${i * 0.73}s infinite`,
          }} />
        ))}

        {/* Icon */}
        <div style={{
          fontSize: 50, zIndex: 2, userSelect: "none",
          animation: celebrating ? "bounce 0.45s ease-in-out infinite alternate" : "none",
          filter: celebrating ? "drop-shadow(0 0 12px rgba(46,204,113,0.8))" : "none",
        }}>
          {done ? "🌟" : celebrating ? "🎉" : task?.icon ?? "💤"}
        </div>
      </div>
    </div>
  );
}

// ─── DEVICE VIEW ──────────────────────────────────────────────────────────────
function DeviceView({ tasks, voiceNotes, onSessionComplete }) {
  const [running, setRunning]       = useState(false);
  const [taskIdx, setTaskIdx]       = useState(0);
  const [timeLeft, setTimeLeft]     = useState(tasks[0]?.duration ?? 60);
  const [nudges, setNudges]         = useState(0);
  const [sessionLog, setSessionLog] = useState([]);
  const [done, setDone]             = useState(false);
  const [celebrating, setCelebrating] = useState(false);
  const audioRef  = useRef(null);
  const logRef    = useRef([]);

  const task  = tasks[taskIdx];
  const color = TASK_COLORS[task?.colorIdx ?? 0];
  const progress = task ? timeLeft / task.duration : 1;

  // countdown
  useEffect(() => {
    if (!running || !task || celebrating) return;
    const iv = setInterval(() => {
      setTimeLeft(prev => {
        if (prev <= 1) { clearInterval(iv); completeTask(); return 0; }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(iv);
  }, [running, taskIdx, celebrating]);

  const completeTask = () => {
    setCelebrating(true);
    const entry = { taskId: task.id, taskLabel: task.label, icon: task.icon, totalTime: task.duration, nudges, completedAt: new Date().toLocaleTimeString() };
    logRef.current = [...logRef.current, entry];
    setSessionLog([...logRef.current]);
    setTimeout(() => {
      setCelebrating(false);
      const nextIdx = taskIdx + 1;
      if (nextIdx >= tasks.length) {
        setRunning(false); setDone(true);
        onSessionComplete([...logRef.current]);
      } else {
        setTaskIdx(nextIdx); setTimeLeft(tasks[nextIdx].duration); setNudges(0);
      }
    }, 2200);
  };

  const handleStart = () => {
    if (!tasks.length) return;
    logRef.current = [];
    setRunning(true); setTaskIdx(0); setTimeLeft(tasks[0].duration);
    setNudges(0); setSessionLog([]); setDone(false);
  };

  const handleNudge = () => {
    setNudges(n => n + 1);
    const note = voiceNotes[task?.id];
    if (note?.url) {
      if (audioRef.current) { audioRef.current.pause(); }
      const a = new Audio(note.url);
      a.play().catch(() => {});
      audioRef.current = a;
    }
  };

  const handleSkip = () => completeTask();

  // Progress bar width per task in queue
  const queueProgress = (t, i) => {
    if (i < taskIdx) return 100;
    if (i === taskIdx && running) return Math.round((1 - progress) * 100);
    return 0;
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>
      {/* Left: Puck + controls */}
      <div style={{ background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 20, padding: "36px 28px", display: "flex", flexDirection: "column", alignItems: "center", gap: 22 }}>
        <Puck task={task} progress={progress} running={running} celebrating={celebrating} done={done} animate />

        {/* Time display */}
        {running && task && !celebrating && (
          <div style={{ textAlign: "center", animation: "fadeUp 0.3s ease" }}>
            <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 42, fontWeight: 800, color: color.ring, lineHeight: 1, letterSpacing: -2 }}>
              {fmtTime(timeLeft)}
            </div>
            <div style={{ color: C.muted, fontSize: 12, marginTop: 4, textTransform: "uppercase", letterSpacing: 1 }}>remaining</div>
          </div>
        )}

        {/* Label */}
        <div style={{ textAlign: "center" }} key={taskIdx + String(done)}>
          <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 20, fontWeight: 700, marginBottom: 4 }}>
            {done ? "Routine Complete! 🌟" : celebrating ? "Task Done!" : running ? task?.label : "Ready to Begin"}
          </div>
          <div style={{ color: C.muted, fontSize: 13 }}>
            {running && !done && !celebrating ? `Step ${taskIdx + 1} of ${tasks.length}` :
             !running && !done ? "Start the morning routine below." : ""}
          </div>
        </div>

        {/* Voice note preview */}
        {running && voiceNotes[task?.id] && (
          <div style={{ fontSize: 11, color: C.accent, background: "#0a1e2e", border: `1px solid ${C.accent}30`, borderRadius: 8, padding: "6px 12px" }}>
            🎙 Voice note ready for this task
          </div>
        )}

        {/* Controls */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center" }}>
          {!running && !done && <Btn onClick={handleStart} disabled={!tasks.length}>▶ Start Routine</Btn>}
          {running && !celebrating && (
            <>
              <Btn onClick={handleNudge} color="#e67e22">🎙 Send Nudge</Btn>
              <Btn onClick={handleSkip} outline small>Skip →</Btn>
            </>
          )}
          {done && <Btn onClick={handleStart}>↺ Run Again</Btn>}
        </div>

        {/* Nudge count */}
        {running && nudges > 0 && (
          <div style={{ fontSize: 12, color: C.muted }}>{nudges} nudge{nudges > 1 ? "s" : ""} sent this task</div>
        )}
      </div>

      {/* Right: Queue */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ fontSize: 11, color: C.muted, letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 4 }}>
          Today's Routine
        </div>
        {!tasks.length && (
          <div style={{ color: C.muted, fontSize: 13, padding: 24, textAlign: "center", border: `1px dashed ${C.cardBorder}`, borderRadius: 12 }}>
            No tasks. Add them in Routine Builder →
          </div>
        )}
        {tasks.map((t, i) => {
          const tc   = TASK_COLORS[t.colorIdx];
          const isDone = done || i < taskIdx || (i === taskIdx && celebrating);
          const isCurrent = running && i === taskIdx && !done;
          const pct  = queueProgress(t, i);
          return (
            <div key={t.id} style={{
              position: "relative", overflow: "hidden",
              borderRadius: 12, padding: "12px 16px",
              background: isCurrent ? "#0c1c2c" : "#09121b",
              border: `1px solid ${isCurrent ? tc.ring : C.cardBorder}`,
              opacity: !running && !done ? 1 : isDone ? 0.45 : isCurrent ? 1 : 0.65,
              transition: "all 0.3s",
            }}>
              {/* Progress fill */}
              {pct > 0 && !isDone && (
                <div style={{ position: "absolute", inset: 0, width: `${pct}%`, background: `${tc.ring}12`, transition: "width 1s linear" }} />
              )}
              <div style={{ display: "flex", alignItems: "center", gap: 12, position: "relative", zIndex: 1 }}>
                <span style={{ fontSize: 20 }}>{t.icon}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: isCurrent ? 600 : 400, color: isCurrent ? C.text : C.muted }}>{t.label}</div>
                  <div style={{ fontSize: 11, color: C.muted, marginTop: 2 }}>
                    {fmtTime(t.duration)} · {voiceNotes[t.id] ? "🎙 voice ready" : "no voice note"}
                  </div>
                </div>
                {isCurrent && <div style={{ width: 8, height: 8, borderRadius: "50%", background: tc.ring, boxShadow: `0 0 8px ${tc.ring}`, animation: "glowPulse 1.5s ease-in-out infinite" }} />}
                {isDone    && <span style={{ color: "#2ecc71", fontSize: 14 }}>✓</span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── ROUTINE BUILDER ─────────────────────────────────────────────────────────
function RoutineBuilder({ tasks, setTasks }) {
  const BLANK = { label: "", icon: "⭐", duration: 120, colorIdx: 0 };
  const [form,    setForm]    = useState(BLANK);
  const [editing, setEditing] = useState(null); // id or "new"

  const openAdd  = ()    => { setForm(BLANK); setEditing("new"); };
  const openEdit = (t)   => { setForm({ label: t.label, icon: t.icon, duration: t.duration, colorIdx: t.colorIdx }); setEditing(t.id); };
  const cancel   = ()    => setEditing(null);
  const move     = (i, d) => {
    const arr = [...tasks];
    const j = i + d;
    if (j < 0 || j >= arr.length) return;
    [arr[i], arr[j]] = [arr[j], arr[i]];
    setTasks(arr);
  };
  const save = () => {
    if (!form.label.trim()) return;
    if (editing === "new") setTasks(prev => [...prev, { id: genId(), ...form }]);
    else setTasks(prev => prev.map(t => t.id === editing ? { ...t, ...form } : t));
    setEditing(null);
  };
  const del = (id) => { setTasks(prev => prev.filter(t => t.id !== id)); if (editing === id) setEditing(null); };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "start" }}>

      {/* Task list */}
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <div style={{ fontSize: 11, color: C.muted, letterSpacing: 1.2, textTransform: "uppercase" }}>Tasks ({tasks.length})</div>
          <Btn onClick={openAdd} small>+ Add Task</Btn>
        </div>
        {!tasks.length && (
          <div style={{ color: C.muted, fontSize: 13, padding: 24, textAlign: "center", border: `1px dashed ${C.cardBorder}`, borderRadius: 12 }}>
            No tasks yet. Add your first one.
          </div>
        )}
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {tasks.map((t, i) => {
            const tc = TASK_COLORS[t.colorIdx];
            const isEditing = editing === t.id;
            return (
              <div key={t.id} style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "12px 14px", borderRadius: 12,
                background: isEditing ? "#0c1c2c" : C.card,
                border: `1px solid ${isEditing ? tc.ring : C.cardBorder}`,
                transition: "all 0.2s",
              }}>
                <div style={{ width: 10, height: 10, borderRadius: "50%", background: tc.ring, flexShrink: 0, boxShadow: `0 0 6px ${tc.ring}` }} />
                <span style={{ fontSize: 18 }}>{t.icon}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.label}</div>
                  <div style={{ fontSize: 11, color: C.muted }}>{fmtTime(t.duration)}</div>
                </div>
                <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
                  <IconBtn onClick={() => move(i, -1)} disabled={i === 0}>↑</IconBtn>
                  <IconBtn onClick={() => move(i, 1)}  disabled={i === tasks.length - 1}>↓</IconBtn>
                  <IconBtn onClick={() => openEdit(t)}>✏</IconBtn>
                  <IconBtn onClick={() => del(t.id)} danger>✕</IconBtn>
                </div>
              </div>
            );
          })}
        </div>

        {/* Summary bar */}
        {tasks.length > 0 && (
          <div style={{ marginTop: 16, padding: "12px 16px", background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 12, fontSize: 12, color: C.muted, display: "flex", gap: 16, flexWrap: "wrap" }}>
            <span>⏱ Total: <strong style={{ color: C.text }}>{fmtTime(tasks.reduce((s,t) => s+t.duration, 0))}</strong></span>
            <span>📋 Steps: <strong style={{ color: C.text }}>{tasks.length}</strong></span>
          </div>
        )}
      </div>

      {/* Edit / Add form */}
      {editing ? (
        <div style={{ background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 20, padding: 24, animation: "fadeUp 0.25s ease" }}>
          <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 16, fontWeight: 700, marginBottom: 20 }}>
            {editing === "new" ? "New Task" : "Edit Task"}
          </div>

          <Field label="Task Name">
            <input value={form.label} onChange={e => setForm(f => ({...f, label: e.target.value}))}
              placeholder="e.g. Brush Teeth" style={inputStyle} />
          </Field>

          <Field label="Icon">
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
              {TASK_ICONS.map(ic => (
                <button key={ic} onClick={() => setForm(f => ({...f, icon: ic}))} style={{
                  width: 36, height: 36, borderRadius: 8, fontSize: 18,
                  background: form.icon === ic ? "#122030" : "#08111a",
                  border: `1px solid ${form.icon === ic ? C.accent : C.cardBorder}`,
                  cursor: "pointer",
                }}>{ic}</button>
              ))}
            </div>
          </Field>

          <Field label={`Duration · ${fmtTime(form.duration)}`}>
            <input type="range" min="30" max="1800" step="30" value={form.duration}
              onChange={e => setForm(f => ({...f, duration: +e.target.value}))}
              style={{ width: "100%", accentColor: C.accent, cursor: "pointer" }} />
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: C.muted, marginTop: 4 }}>
              <span>30s</span><span>30min</span>
            </div>
          </Field>

          <Field label="Ring Color">
            <div style={{ display: "flex", gap: 8 }}>
              {TASK_COLORS.map((tc, idx) => (
                <button key={idx} onClick={() => setForm(f => ({...f, colorIdx: idx}))} style={{
                  width: 30, height: 30, borderRadius: "50%", background: tc.ring,
                  border: `3px solid ${form.colorIdx === idx ? "#fff" : "transparent"}`,
                  cursor: "pointer", boxShadow: form.colorIdx === idx ? `0 0 10px ${tc.ring}` : "none",
                  transition: "all 0.2s",
                }} />
              ))}
            </div>
          </Field>

          <div style={{ display: "flex", gap: 8, marginTop: 20 }}>
            <Btn onClick={save}>Save Task</Btn>
            <Btn onClick={cancel} outline>Cancel</Btn>
          </div>
        </div>
      ) : (
        <div style={{
          background: C.card, border: `1px dashed ${C.cardBorder}`, borderRadius: 20,
          padding: 32, display: "flex", flexDirection: "column", alignItems: "center",
          justifyContent: "center", gap: 12, minHeight: 240,
        }}>
          <div style={{ fontSize: 36 }}>✏️</div>
          <div style={{ color: C.muted, fontSize: 13, textAlign: "center", lineHeight: 1.7 }}>
            Click a task to edit it,<br />or add a new one above.
          </div>
        </div>
      )}
    </div>
  );
}

// ─── VOICE STUDIO ─────────────────────────────────────────────────────────────
function VoiceStudio({ tasks, voiceNotes, setVoiceNotes }) {
  const [recording, setRecording] = useState(null);
  const [playing,   setPlaying]   = useState(null);
  const [recTime,   setRecTime]   = useState(0);
  const mrRef     = useRef(null);
  const chunksRef = useRef([]);
  const audioRef  = useRef({});
  const timerRef  = useRef(null);

  const startRec = async (taskId) => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mr = new MediaRecorder(stream);
      chunksRef.current = [];
      mr.ondataavailable = e => chunksRef.current.push(e.data);
      mr.onstop = () => {
        const blob = new Blob(chunksRef.current, { type: "audio/webm" });
        setVoiceNotes(prev => ({ ...prev, [taskId]: { url: URL.createObjectURL(blob) } }));
        stream.getTracks().forEach(t => t.stop());
      };
      mr.start();
      mrRef.current = mr;
      setRecording(taskId);
      setRecTime(0);
      timerRef.current = setInterval(() => setRecTime(t => t + 1), 1000);
    } catch {
      alert("Microphone access denied. Please allow it in your browser settings.");
    }
  };

  const stopRec = () => {
    mrRef.current?.stop();
    mrRef.current = null;
    clearInterval(timerRef.current);
    setRecording(null);
    setRecTime(0);
  };

  const playNote = (taskId) => {
    const note = voiceNotes[taskId];
    if (!note?.url) return;
    if (audioRef.current[taskId]) {
      audioRef.current[taskId].pause();
      delete audioRef.current[taskId];
      setPlaying(null);
      return;
    }
    const a = new Audio(note.url);
    a.onended = () => { setPlaying(null); delete audioRef.current[taskId]; };
    a.play().catch(() => {});
    audioRef.current[taskId] = a;
    setPlaying(taskId);
  };

  const deleteNote = (taskId) => {
    if (audioRef.current[taskId]) { audioRef.current[taskId].pause(); delete audioRef.current[taskId]; }
    setPlaying(p => p === taskId ? null : p);
    setVoiceNotes(prev => { const n = {...prev}; delete n[taskId]; return n; });
  };

  if (!tasks.length) return (
    <div style={{ textAlign: "center", padding: "60px 20px" }}>
      <div style={{ fontSize: 48, marginBottom: 14 }}>🎙</div>
      <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 18, fontWeight: 700, marginBottom: 8 }}>No Tasks Yet</div>
      <div style={{ color: C.muted, fontSize: 13 }}>Add tasks in the Routine Builder first.</div>
    </div>
  );

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20, flexWrap: "wrap", gap: 10 }}>
        <div>
          <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 18, fontWeight: 700, marginBottom: 4 }}>Voice Studio</div>
          <div style={{ color: C.muted, fontSize: 13 }}>Record your voice for each task. These play when your child needs a nudge.</div>
        </div>
        <div style={{ fontSize: 12, color: C.muted, background: "#0a1520", border: `1px solid ${C.cardBorder}`, borderRadius: 8, padding: "6px 12px" }}>
          🔒 Stored locally · Never uploaded
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {tasks.map(task => {
          const tc      = TASK_COLORS[task.colorIdx];
          const note    = voiceNotes[task.id];
          const isRec   = recording === task.id;
          const isPlay  = playing === task.id;

          return (
            <div key={task.id} style={{
              background: C.card, borderRadius: 18, padding: "20px 20px",
              border: `1px solid ${isRec ? tc.ring : C.cardBorder}`,
              transition: "border-color 0.3s",
            }}>
              {/* Header */}
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
                <div style={{ width: 36, height: 36, borderRadius: "50%", background: `${tc.ring}20`, border: `1px solid ${tc.ring}50`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>
                  {task.icon}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{task.label}</div>
                  <div style={{ fontSize: 11, color: C.muted }}>{fmtTime(task.duration)}</div>
                </div>
                {note && <div style={{ marginLeft: "auto", fontSize: 11, color: "#2ecc71" }}>✓ Recorded</div>}
              </div>

              {/* Waveform */}
              <div style={{
                height: 44, background: "#07101a", borderRadius: 10, marginBottom: 14,
                display: "flex", alignItems: "center", justifyContent: "center", gap: 2.5,
                border: `1px solid ${C.cardBorder}`, padding: "0 12px",
                overflow: "hidden",
              }}>
                {(note || isRec) ? (
                  Array.from({ length: 28 }, (_, i) => (
                    <div key={i} style={{
                      width: 3, borderRadius: 3, flexShrink: 0,
                      height: `${isRec ? (6 + Math.random() * 26) : (10 + Math.sin(i * 0.7 + 1) * 13)}px`,
                      background: isPlay ? tc.ring : isRec ? tc.ring : `${tc.ring}70`,
                      animation: (isPlay || isRec) ? `waveBar 0.4s ease-in-out ${i * 0.04}s infinite alternate` : "none",
                      transition: "height 0.1s",
                    }} />
                  ))
                ) : (
                  <span style={{ fontSize: 12, color: C.muted }}>No recording yet</span>
                )}
              </div>

              {/* Recording time */}
              {isRec && (
                <div style={{ textAlign: "center", fontSize: 12, color: tc.ring, marginBottom: 10, fontWeight: 600 }}>
                  ● Recording {fmtTime(recTime)}
                </div>
              )}

              {/* Controls */}
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {!isRec ? (
                  <Btn onClick={() => startRec(task.id)} color={tc.ring} small>🎙 Record</Btn>
                ) : (
                  <Btn onClick={stopRec} color="#e74c3c" small style={{ animation: "glowPulse 1s ease-in-out infinite" }}>⏹ Stop</Btn>
                )}
                {note && <>
                  <Btn onClick={() => playNote(task.id)} color={tc.ring} outline small>
                    {isPlay ? "⏸ Stop" : "▶ Play"}
                  </Btn>
                  <Btn onClick={() => deleteNote(task.id)} color="#e74c3c" outline small>✕</Btn>
                </>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── DASHBOARD ───────────────────────────────────────────────────────────────
function Dashboard({ sessions }) {
  if (!sessions.length) return (
    <div style={{ textAlign: "center", padding: "60px 20px" }}>
      <div style={{ fontSize: 48, marginBottom: 14 }}>📊</div>
      <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 20, fontWeight: 700, marginBottom: 8 }}>No Sessions Yet</div>
      <div style={{ color: C.muted, fontSize: 14 }}>Run a routine from the Device tab to see results here.</div>
    </div>
  );

  const allTasks   = sessions.flat();
  const totalNudges = allTasks.reduce((s, t) => s + t.nudges, 0);
  const zeroNudge  = allTasks.filter(t => t.nudges === 0).length;
  const successRate = allTasks.length ? Math.round((zeroNudge / allTasks.length) * 100) : 0;

  // Tasks by nudge count
  const nudgeMap = {};
  allTasks.forEach(t => { nudgeMap[t.taskLabel] = (nudgeMap[t.taskLabel] || 0) + t.nudges; });
  const hardTasks = Object.entries(nudgeMap).sort((a, b) => b[1] - a[1]).slice(0, 3);

  return (
    <div>
      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 28 }}>
        <Stat icon="🔄" value={sessions.length} label="Sessions Run" />
        <Stat icon="✅" value={allTasks.length} label="Tasks Completed" />
        <Stat icon="🎯" value={`${successRate}%`} label="No-Nudge Rate" />
      </div>

      {/* Insight */}
      {hardTasks.length > 0 && (
        <div style={{ background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 16, padding: "20px 24px", marginBottom: 24 }}>
          <div style={{ fontSize: 11, color: C.muted, letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 14 }}>Tasks That Need Most Nudges</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {hardTasks.map(([label, count]) => {
              const pct = hardTasks[0][1] > 0 ? (count / hardTasks[0][1]) * 100 : 0;
              return (
                <div key={label}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 5 }}>
                    <span>{label}</span>
                    <span style={{ color: count > 2 ? "#e67e22" : C.muted }}>{count} nudge{count !== 1 ? "s" : ""}</span>
                  </div>
                  <div style={{ height: 6, background: "#0a131c", borderRadius: 4, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${pct}%`, background: count > 2 ? "#e67e22" : C.accent, borderRadius: 4, transition: "width 0.8s ease" }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Session history */}
      <div style={{ fontSize: 11, color: C.muted, letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 14 }}>Session History</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {[...sessions].reverse().map((session, si) => {
          const sessionNudges = session.reduce((s, t) => s + t.nudges, 0);
          return (
            <div key={si} style={{ background: C.card, border: `1px solid ${C.cardBorder}`, borderRadius: 16, overflow: "hidden" }}>
              <div style={{ padding: "14px 20px", borderBottom: `1px solid ${C.cardBorder}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Session {sessions.length - si}</div>
                  <div style={{ fontSize: 12, background: sessionNudges === 0 ? "#0d2a1a" : "#1a1204", color: sessionNudges === 0 ? "#2ecc71" : "#e67e22", border: `1px solid ${sessionNudges === 0 ? "#2ecc7140" : "#e67e2240"}`, borderRadius: 20, padding: "2px 10px" }}>
                    {sessionNudges === 0 ? "Perfect run ✓" : `${sessionNudges} nudge${sessionNudges > 1 ? "s" : ""}`}
                  </div>
                </div>
                <div style={{ fontSize: 12, color: C.muted }}>{session[session.length - 1]?.completedAt}</div>
              </div>
              <div style={{ padding: "12px 20px", display: "flex", flexDirection: "column", gap: 7 }}>
                {session.map((task, ti) => (
                  <div key={ti} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13 }}>
                    <span>{task.icon}</span>
                    <span style={{ flex: 1 }}>{task.taskLabel}</span>
                    <span style={{ color: C.muted, fontSize: 12 }}>{fmtTime(task.totalTime)}</span>
                    <span style={{ fontSize: 12, color: task.nudges > 0 ? "#e67e22" : "#2ecc71" }}>
                      {task.nudges > 0 ? `${task.nudges} nudge${task.nudges > 1 ? "s" : ""}` : "No nudges ✓"}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ─── TABS ─────────────────────────────────────────────────────────────────────
const TABS = [
  { id: "device",   label: "Device",          icon: "⭕" },
  { id: "builder",  label: "Routine Builder",  icon: "✏️" },
  { id: "voice",    label: "Voice Studio",     icon: "🎙" },
  { id: "dashboard",label: "Dashboard",        icon: "📊" },
];

// ─── ROOT ─────────────────────────────────────────────────────────────────────
export default function WhisprroApp() {
  const [tab,        setTab]        = useState("device");
  const [tasks,      setTasks]      = useState(DEFAULT_TASKS);
  const [voiceNotes, setVoiceNotes] = useState({});
  const [sessions,   setSessions]   = useState([]);

  return (
    <div style={{ minHeight: "100vh", background: C.bg, fontFamily: "'DM Sans', 'Segoe UI', sans-serif", color: C.text }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Syne:wght@700;800&display=swap');
        @keyframes glowPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.07)} }
        @keyframes ripple    { 0%{transform:scale(1);opacity:.45} 100%{transform:scale(2.5);opacity:0} }
        @keyframes bounce    { from{transform:translateY(0)} to{transform:translateY(-9px)} }
        @keyframes spin      { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
        @keyframes waveBar   { from{transform:scaleY(.5)} to{transform:scaleY(1.2)} }
        @keyframes fadeUp    { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
        * { box-sizing: border-box; }
        input,button { font-family: inherit; }
        input[type=range] { cursor: pointer; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: ${C.bg}; }
        ::-webkit-scrollbar-thumb { background: ${C.cardBorder}; border-radius: 3px; }
      `}</style>

      {/* Header */}
      <div style={{ padding: "22px 32px 0", borderBottom: `1px solid ${C.cardBorder}`, position: "sticky", top: 0, background: C.bg, zIndex: 10 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18, flexWrap: "wrap", gap: 10 }}>
          <div>
            <div style={{ fontFamily: "'Syne', sans-serif", fontSize: 22, fontWeight: 800, letterSpacing: "-0.5px", lineHeight: 1 }}>
              whisprro
              <span style={{ fontSize: 10, fontWeight: 400, color: C.muted, marginLeft: 10, fontFamily: "'DM Sans', sans-serif", letterSpacing: 1, textTransform: "uppercase", verticalAlign: "middle" }}>
                Parent Hub · Prototype
              </span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
              <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#2ecc71", boxShadow: "0 0 6px #2ecc71", animation: "glowPulse 2s ease-in-out infinite" }} />
              <span style={{ fontSize: 12, color: C.muted }}>Offline · Zero-Trace</span>
            </div>
            <div style={{ display: "flex", gap: 14, fontSize: 12, color: C.muted }}>
              <span>📋 {tasks.length} tasks</span>
              <span>🎙 {Object.keys(voiceNotes).length} voice notes</span>
              <span>📊 {sessions.length} sessions</span>
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 2 }}>
          {TABS.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: "10px 20px", borderRadius: "10px 10px 0 0",
              background: tab === t.id ? C.card : "transparent",
              border: `1px solid ${tab === t.id ? C.cardBorder : "transparent"}`,
              borderBottom: tab === t.id ? `1px solid ${C.card}` : `1px solid transparent`,
              color: tab === t.id ? C.text : C.muted,
              fontFamily: "'DM Sans', sans-serif",
              fontWeight: tab === t.id ? 600 : 400,
              fontSize: 13, cursor: "pointer",
              marginBottom: tab === t.id ? -1 : 0,
              transition: "all 0.2s",
              whiteSpace: "nowrap",
            }}>
              {t.icon} {t.label}
            </button>
          ))}
        </div>
      </div>

      {/* Content */}
      <div style={{ maxWidth: 920, margin: "0 auto", padding: "32px 24px 80px", animation: "fadeUp 0.3s ease" }} key={tab}>
        {tab === "device"    && <DeviceView tasks={tasks} voiceNotes={voiceNotes} onSessionComplete={log => setSessions(p => [...p, log])} />}
        {tab === "builder"   && <RoutineBuilder tasks={tasks} setTasks={setTasks} />}
        {tab === "voice"     && <VoiceStudio tasks={tasks} voiceNotes={voiceNotes} setVoiceNotes={setVoiceNotes} />}
        {tab === "dashboard" && <Dashboard sessions={sessions} />}
      </div>
    </div>
  );
}