const QuestsScreen = ({ state, onCompleteTask, onToggleSubtask, onAddTask, onAddProject, onDeleteProject }) => {
  const [openProjects, setOpenProjects] = React.useState(state.projects.map(p => p.id));
  const [openTasks,    setOpenTasks]    = React.useState([]);
  const [taskModal,    setTaskModal]    = React.useState(false);
  const [projModal,    setProjModal]    = React.useState(false);
  const [confirmDel,   setConfirmDel]   = React.useState(null); // projectId to delete
  const [popups,       setPopups]       = React.useState([]);

  const [taskForm, setTaskForm] = React.useState({ name: '', projectId: '', skillId: 's1', difficulty: 2, due: '' });
  const [projForm, setProjForm] = React.useState({ name: '', color: '#ef4444' });

  const PROJ_COLORS = ['#ef4444','#f59e0b','#a78bfa','#34d399','#60a5fa','#f472b6','#fb923c'];

  // Keep openProjects in sync when projects are added
  React.useEffect(() => {
    setOpenProjects(p => {
      const ids = state.projects.map(x => x.id);
      const newIds = ids.filter(id => !p.includes(id));
      return [...p.filter(id => ids.includes(id)), ...newIds];
    });
  }, [state.projects.length]);

  const toggleProject = id => setOpenProjects(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]);
  const toggleTask    = id => setOpenTasks(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id]);

  const handleComplete = (task, projectId) => {
    const pid = Date.now();
    setPopups(p => [...p, { id: pid, xp: task.xp }]);
    setTimeout(() => setPopups(p => p.filter(x => x.id !== pid)), 1600);
    onCompleteTask(task, projectId);
  };

  const handleAddTask = () => {
    if (!taskForm.name.trim()) return;
    const pId = taskForm.projectId || state.projects[0]?.id;
    onAddTask({ ...taskForm, projectId: pId, id: 't' + Date.now(), done: false, subtasks: [] });
    setTaskForm({ name: '', projectId: '', skillId: 's1', difficulty: 2, due: '' });
    setTaskModal(false);
  };

  const handleAddProject = () => {
    if (!projForm.name.trim()) return;
    onAddProject({ ...projForm, id: 'p' + Date.now(), tasks: [] });
    setProjForm({ name: '', color: '#ef4444' });
    setProjModal(false);
  };

  const handleDeleteProject = (id) => {
    onDeleteProject(id);
    setConfirmDel(null);
  };

  const { projects, skills } = state;
  const total = projects.flatMap(p => p.tasks).length;
  const done  = projects.flatMap(p => p.tasks).filter(t => t.done).length;

  const selectSx = {
    width: '100%', padding: '10px 13px', background: '#07070e',
    border: '1px solid rgba(255,255,255,.07)', borderRadius: 4, color: '#eee',
    fontSize: 14, outline: 'none', colorScheme: 'dark'
  };

  return (
    <div style={{ padding: '28px', maxWidth: 840, margin: '0 auto', position: 'relative' }}>

      {/* XP float fx */}
      {popups.map(p => (
        <div key={p.id} style={{
          position: 'fixed', top: '38%', left: '55%', zIndex: 998, pointerEvents: 'none',
          fontFamily: "'Exo 2',sans-serif", fontWeight: 900, fontSize: 24, color: 'var(--accent)',
          animation: 'floatUp 1.6s ease forwards', textShadow: '0 0 20px rgba(245,158,11,.5)'
        }}>+{p.xp} XP</div>
      ))}

      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 26 }}>
        <div>
          <SLabel>クエスト管理</SLabel>
          <h1 style={{ margin: 0, fontFamily: "'Exo 2',sans-serif", fontSize: 26, fontWeight: 900, color: '#f0f0f2', letterSpacing: -.3 }}>
            クエスト一覧
          </h1>
          <div style={{ marginTop: 5, fontSize: 11, color: '#606074', fontFamily: "'Exo 2',sans-serif", letterSpacing: .5 }}>
            {done} / {total} 件完了
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn variant="ghost" onClick={() => setProjModal(true)} style={{ fontSize: 11 }}>+ プロジェクト</Btn>
          <Btn onClick={() => { setTaskForm(f => ({...f, projectId: projects[0]?.id || ''})); setTaskModal(true); }}>+ クエスト追加</Btn>
        </div>
      </div>

      {/* Empty state */}
      {projects.length === 0 && (
        <div style={{ textAlign: 'center', padding: '60px 20px', color: '#606074' }}>
          <div style={{ fontSize: 36, marginBottom: 12 }}>◈</div>
          <div style={{ fontFamily: "'Exo 2',sans-serif", fontSize: 14, letterSpacing: 1, marginBottom: 8 }}>プロジェクトがありません</div>
          <div style={{ fontSize: 12 }}>「+ プロジェクト」から最初のプロジェクトを作成しよう</div>
        </div>
      )}

      {/* Project groups */}
      {projects.map(project => {
        const isOpen = openProjects.includes(project.id);
        const pDone  = project.tasks.filter(t => t.done).length;
        const isDelConfirm = confirmDel === project.id;
        return (
          <div key={project.id} style={{ marginBottom: 12 }}>
            {/* Project header */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
              background: '#0d0d14',
              borderTop: `1px solid ${project.color}25`,
              border: `1px solid rgba(255,255,255,.05)`,
              borderLeft: `2px solid ${project.color}`,
              borderRadius: isOpen ? '5px 5px 0 0' : 5,
            }}>
              <div onClick={() => toggleProject(project.id)} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
                <span style={{ fontFamily: "'Exo 2',sans-serif", fontWeight: 700, fontSize: 13, color: '#d0d0d8', letterSpacing: .3 }}>
                  {project.name}
                </span>
                <span style={{ fontSize: 10, color: '#606074', fontFamily: "'Exo 2',sans-serif" }}>
                  {pDone}/{project.tasks.length}
                </span>
              </div>

              {/* Delete controls */}
              {isDelConfirm ? (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11 }}>
                  <span style={{ color: '#ef4444', fontFamily: "'Exo 2',sans-serif" }}>削除する？</span>
                  <button onClick={() => handleDeleteProject(project.id)} style={{
                    background: '#ef444420', border: '1px solid #ef444440', borderRadius: 3, padding: '3px 8px',
                    color: '#ef4444', cursor: 'pointer', fontSize: 10, fontFamily: "'Exo 2',sans-serif", fontWeight: 700
                  }}>はい</button>
                  <button onClick={() => setConfirmDel(null)} style={{
                    background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.08)', borderRadius: 3, padding: '3px 8px',
                    color: '#666', cursor: 'pointer', fontSize: 10, fontFamily: "'Exo 2',sans-serif"
                  }}>いいえ</button>
                </div>
              ) : (
                <button onClick={() => setConfirmDel(project.id)} style={{
                  background: 'none', border: 'none', color: '#606074', cursor: 'pointer', fontSize: 13, padding: '2px 6px',
                  lineHeight: 1, transition: 'color .15s'
                }}
                  onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
                  onMouseLeave={e => e.currentTarget.style.color = '#606074'}
                  title="プロジェクトを削除">✕</button>
              )}

              <div onClick={() => toggleProject(project.id)} style={{
                color: '#606074', fontSize: 10, cursor: 'pointer', padding: '2px 4px',
                transition: 'transform .2s', display: 'inline-block',
                transform: isOpen ? 'rotate(90deg)' : 'none'
              }}>▶</div>
            </div>

            {/* Tasks */}
            {isOpen && (
              <div style={{ border: '1px solid rgba(255,255,255,.04)', borderTop: 'none', borderRadius: '0 0 5px 5px', overflow: 'hidden' }}>
                {project.tasks.length === 0 && (
                  <div style={{ padding: '20px 28px', fontSize: 12, color: '#606074', fontFamily: "'Exo 2',sans-serif", letterSpacing: .5 }}>
                    クエストなし — 追加してみよう
                  </div>
                )}
                {project.tasks.map((task, ti) => {
                  const isTaskOpen = openTasks.includes(task.id);
                  const stDone = task.subtasks.filter(s => s.done).length;
                  return (
                    <div key={task.id} style={{ background: ti % 2 === 0 ? '#090910' : '#0b0b12' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '11px 14px 11px 24px' }}>
                        {/* Checkbox */}
                        <div onClick={() => !task.done && handleComplete(task, project.id)} style={{
                          width: 17, height: 17, borderRadius: 3, flexShrink: 0,
                          border: task.done ? 'none' : '1.5px solid rgba(255,255,255,.12)',
                          background: task.done ? 'var(--accent)' : 'transparent',
                          cursor: task.done ? 'default' : 'pointer',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          transition: 'all .2s',
                          boxShadow: task.done ? '0 0 10px rgba(245,158,11,.35)' : 'none'
                        }}>
                          {task.done && <span style={{ color: '#000', fontSize: 9, fontWeight: 900, lineHeight: 1 }}>✓</span>}
                        </div>

                        {/* Info */}
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 13, color: task.done ? '#606074' : '#d0d0d8',
                            textDecoration: task.done ? 'line-through' : 'none', marginBottom: 4 }}>{task.name}</div>
                          <div style={{ display: 'flex', gap: 7, alignItems: 'center', flexWrap: 'wrap' }}>
                            <SkillTag skillId={task.skillId} skills={skills} />
                            <Stars n={task.difficulty} />
                            {task.due && <span style={{ fontSize: 10, color: '#606074' }}>{task.due}</span>}
                            {task.subtasks.length > 0 && <span style={{ fontSize: 10, color: '#606074' }}>{stDone}/{task.subtasks.length}</span>}
                          </div>
                        </div>

                        <div style={{ textAlign: 'right', flexShrink: 0, marginRight: 4 }}>
                          <div style={{ fontFamily: "'Exo 2',sans-serif", fontWeight: 900, fontSize: 13,
                            color: task.done ? '#606074' : 'var(--accent)' }}>+{task.xp}</div>
                          <div style={{ fontSize: 9, color: '#606074', letterSpacing: 1 }}>XP</div>
                        </div>

                        {task.subtasks.length > 0 && (
                          <div onClick={() => toggleTask(task.id)} style={{ color: '#606074', fontSize: 10, cursor: 'pointer', padding: '4px 2px' }}>
                            {isTaskOpen ? '▲' : '▼'}
                          </div>
                        )}
                      </div>

                      {/* Subtasks */}
                      {isTaskOpen && task.subtasks.map(st => (
                        <div key={st.id} onClick={() => onToggleSubtask?.(st.id, task.id, project.id)} style={{
                          display: 'flex', alignItems: 'center', gap: 10,
                          padding: '8px 14px 8px 46px',
                          background: '#070710', borderTop: '1px solid rgba(255,255,255,.03)', cursor: 'pointer'
                        }}>
                          <div style={{ width: 12, height: 12, borderRadius: 2, flexShrink: 0,
                            border: st.done ? 'none' : '1.5px solid rgba(255,255,255,.1)',
                            background: st.done ? 'rgba(245,158,11,.5)' : 'transparent',
                            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            {st.done && <span style={{ color: '#000', fontSize: 7, fontWeight: 900 }}>✓</span>}
                          </div>
                          <span style={{ fontSize: 12, color: st.done ? '#606074' : '#777',
                            textDecoration: st.done ? 'line-through' : 'none' }}>{st.name}</span>
                        </div>
                      ))}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        );
      })}

      {/* ── Add Quest Modal ── */}
      <Modal open={taskModal} onClose={() => setTaskModal(false)} title="新しいクエストを追加">
        <Field label="クエスト名" value={taskForm.name} onChange={v => setTaskForm(p => ({...p, name: v}))} placeholder="タスクの名前を入力..." />
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 10, color: '#727288', marginBottom: 7, fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.8, textTransform: 'uppercase' }}>プロジェクト</div>
          <select value={taskForm.projectId || projects[0]?.id} onChange={e => setTaskForm(p => ({...p, projectId: e.target.value}))} style={selectSx}>
            {projects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
        </div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 10, color: '#727288', marginBottom: 7, fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.8, textTransform: 'uppercase' }}>スキル</div>
          <select value={taskForm.skillId} onChange={e => setTaskForm(p => ({...p, skillId: e.target.value}))} style={selectSx}>
            {skills.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </div>
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 10, color: '#727288', marginBottom: 8, fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.8, textTransform: 'uppercase' }}>難易度</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[1,2,3,4,5].map(n => (
              <button key={n} onClick={() => setTaskForm(p => ({...p, difficulty: n}))} style={{
                flex: 1, padding: '8px 0', borderRadius: 3, cursor: 'pointer', fontSize: 14,
                background: taskForm.difficulty >= n ? 'rgba(245,158,11,.1)' : '#07070e',
                border: `1px solid ${taskForm.difficulty >= n ? 'rgba(245,158,11,.35)' : 'rgba(255,255,255,.07)'}`,
                color: taskForm.difficulty >= n ? 'var(--accent)' : '#606074', transition: 'all .15s'
              }}>★</button>
            ))}
          </div>
        </div>
        <Field label="期日" value={taskForm.due} onChange={v => setTaskForm(p => ({...p, due: v}))} type="date" />
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 6 }}>
          <Btn variant="ghost" onClick={() => setTaskModal(false)}>キャンセル</Btn>
          <Btn onClick={handleAddTask} disabled={!taskForm.name.trim()}>追加する</Btn>
        </div>
      </Modal>

      {/* ── Add Project Modal ── */}
      <Modal open={projModal} onClose={() => setProjModal(false)} title="新しいプロジェクトを追加" width={400}>
        <Field label="プロジェクト名" value={projForm.name} onChange={v => setProjForm(p => ({...p, name: v}))} placeholder="例：ポートフォリオ、クライアントA..." />
        <div style={{ marginBottom: 22 }}>
          <div style={{ fontSize: 10, color: '#727288', marginBottom: 8, fontFamily: "'Exo 2',sans-serif", letterSpacing: 1.8, textTransform: 'uppercase' }}>カラー</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {PROJ_COLORS.map(c => (
              <div key={c} onClick={() => setProjForm(p => ({...p, color: c}))} style={{
                width: 30, height: 30, borderRadius: 5, background: c, cursor: 'pointer',
                border: projForm.color === c ? '2px solid #fff' : '2px solid transparent',
                boxShadow: projForm.color === c ? `0 0 10px ${c}` : 'none', transition: 'all .15s'
              }} />
            ))}
          </div>
        </div>
        {/* Preview */}
        <div style={{ padding: '10px 14px', background: '#07070e', borderRadius: 4,
          borderLeft: `2px solid ${projForm.color}`, border: `1px solid rgba(255,255,255,.06)`, borderLeft: `3px solid ${projForm.color}`,
          marginBottom: 20, fontFamily: "'Exo 2',sans-serif", fontSize: 13, color: '#bbb' }}>
          {projForm.name || 'プロジェクト名'}
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Btn variant="ghost" onClick={() => setProjModal(false)}>キャンセル</Btn>
          <Btn onClick={handleAddProject} disabled={!projForm.name.trim()}>作成する</Btn>
        </div>
      </Modal>
    </div>
  );
};

Object.assign(window, { QuestsScreen });