// StarThink — Life Plan
// Yearly goals, lifelong vision, values, legacy

function LifePlan() {
  const year = new Date().getFullYear();
  const [data, setData] = React.useState(() => ST.get('lifeplan', {
    vision: '', values: ['','','','',''],
    yearly: {}, shortGoals: [], medGoals: [], longGoals: [], lifeGoals: [],
    legacy: '', bucketList: [], milestones: []
  }));
  const save = (v) => { setData(v); ST.set('lifeplan', v); };
  const upd = (f, v) => save({ ...data, [f]: v });

  const [tab, setTab] = React.useState('vision');
  const tabs = [
    { id: 'vision', label: 'Life Vision' },
    { id: 'yearly', label: `${year} Goals` },
    { id: 'goals', label: 'Goal Roadmap' },
    { id: 'bucket', label: 'Bucket List' }
  ];

  const TA = ({ value, onChange, placeholder, rows = 4 }) => (
    <textarea value={value || ''} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{ width: '100%', minHeight: rows * 22 + 'px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '8px', fontSize: '13px', fontFamily: 'inherit', resize: 'vertical', outline: 'none', boxSizing: 'border-box', color: '#333', lineHeight: '1.8' }} />
  );

  const GoalList = ({ items, onChange, placeholder, count = 6 }) => {
    const list = [...(items || []), ...Array(Math.max(0, count - (items || []).length)).fill({ text: '', done: false })].slice(0, count);
    return (
      <div>
        {list.map((item, i) => {
          const it = (item && typeof item === 'object') ? item : { text: item || '', done: false };
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '5px 0', borderBottom: '1px solid #f5f5f5' }}>
              <div onClick={() => { const a = [...(items || [])]; if (!a[i]) a[i] = { text: '', done: false }; a[i] = { ...a[i], done: !a[i].done }; onChange(a); }}
                style={{ width: '16px', height: '16px', border: '2px solid', borderRadius: '3px', flexShrink: 0, cursor: 'pointer',
                  borderColor: it.done ? '#111' : '#ccc', background: it.done ? '#111' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                {it.done && <span style={{ color: '#fff', fontSize: '10px' }}>✓</span>}
              </div>
              <input value={it.text || ''} onChange={e => { const a = [...(items || [])]; if (!a[i]) a[i] = { text: '', done: false }; a[i] = { ...a[i], text: e.target.value }; onChange(a); }}
                placeholder={placeholder}
                style={{ flex: 1, border: 'none', outline: 'none', fontSize: '13px', color: it.done ? '#bbb' : '#111', textDecoration: it.done ? 'line-through' : 'none', background: 'transparent', fontFamily: 'inherit', padding: '2px 0' }} />
            </div>
          );
        })}
        <button onClick={() => onChange([...(items || []), { text: '', done: false }])}
          style={{ marginTop: '8px', background: 'none', border: '1px dashed #ddd', borderRadius: '4px', padding: '4px 12px', fontSize: '11px', color: '#aaa', cursor: 'pointer', fontFamily: 'inherit' }}>
          + Add
        </button>
      </div>
    );
  };

  const lifeAreas = ['Health & Body', 'Career & Finance', 'Relationships', 'Personal Growth', 'Adventure & Fun', 'Home & Environment', 'Spirituality', 'Contribution'];

  return (
    <div className="planner-page" style={{ maxWidth: '900px' }}>
      <div style={{ marginBottom: '24px' }}>
        <div style={{ fontSize: '28px', fontWeight: '800', letterSpacing: '-0.5px' }}>Life Plan</div>
        <div style={{ fontSize: '11px', color: '#999', letterSpacing: '2px', textTransform: 'uppercase', marginTop: '3px' }}>StarThink · The Big Picture</div>
      </div>

      <div style={{ display: 'flex', gap: '2px', marginBottom: '28px', borderBottom: '2px solid #111' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            style={{ padding: '7px 18px', fontSize: '12px', fontWeight: tab === t.id ? '700' : '400', border: 'none', cursor: 'pointer',
              background: tab === t.id ? '#111' : 'transparent', color: tab === t.id ? '#fff' : '#666', fontFamily: 'inherit' }}>
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'vision' && (
        <div>
          <div style={{ marginBottom: '28px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '10px' }}>MY LIFE VISION</div>
            <div style={{ fontSize: '12px', color: '#aaa', marginBottom: '10px' }}>Describe the life you want to live. Who do you want to be? What do you want to feel every day?</div>
            <TA value={data.vision} onChange={v => upd('vision', v)} placeholder="In my ideal life, I am..." rows={6} />
          </div>

          <div style={{ marginBottom: '28px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '10px' }}>CORE VALUES</div>
            <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
              {[0,1,2,3,4].map(i => (
                <input key={i} value={(data.values || [])[i] || ''} onChange={e => { const v = [...(data.values || [])]; v[i] = e.target.value; upd('values', v); }}
                  placeholder={`Value ${i + 1}`}
                  style={{ border: '2px solid #111', borderRadius: '30px', padding: '6px 16px', fontSize: '13px', fontFamily: 'inherit', outline: 'none', textAlign: 'center', fontWeight: '600' }} />
              ))}
            </div>
          </div>

          <div style={{ marginBottom: '28px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '10px' }}>MY LEGACY — WHAT DO I WANT TO BE REMEMBERED FOR?</div>
            <TA value={data.legacy} onChange={v => upd('legacy', v)} placeholder="The impact I want to leave on the world..." rows={4} />
          </div>

          <div style={{ marginBottom: '28px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '16px' }}>LIFE WHEEL — INTENTIONS BY AREA</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
              {lifeAreas.map(area => (
                <div key={area} style={{ padding: '14px', border: '1px solid #e8e8e8', borderRadius: '6px' }}>
                  <div style={{ fontSize: '12px', fontWeight: '700', color: '#333', marginBottom: '6px' }}>{area}</div>
                  <input value={(data.lifeWheel || {})[area] || ''} onChange={e => upd('lifeWheel', { ...(data.lifeWheel || {}), [area]: e.target.value })}
                    placeholder="My intention for this area..."
                    style={{ width: '100%', border: 'none', borderBottom: '1px solid #e8e8e8', outline: 'none', fontSize: '12px', color: '#555', background: 'transparent', fontFamily: 'inherit', padding: '3px 0', boxSizing: 'border-box' }} />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'yearly' && (
        <div>
          <div style={{ fontSize: '24px', fontWeight: '800', marginBottom: '4px' }}>My {year} Goals</div>
          <div style={{ fontSize: '13px', color: '#aaa', marginBottom: '24px' }}>What do you want this year to look like? Set intentions for each area of life.</div>

          <div style={{ marginBottom: '20px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '8px' }}>THIS YEAR I WANT TO...</div>
            <TA value={data.yearIntent} onChange={v => upd('yearIntent', v)} placeholder="My word/theme for this year is... I want to feel... I want to accomplish..." rows={3} />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
            {lifeAreas.map(area => (
              <div key={area} style={{ border: '1px solid #e8e8e8', borderRadius: '6px', padding: '14px' }}>
                <div style={{ fontSize: '12px', fontWeight: '700', color: '#333', borderBottom: '2px solid #111', paddingBottom: '6px', marginBottom: '10px' }}>{area}</div>
                <GoalList
                  items={(data.yearly || {})[area] || []}
                  onChange={v => upd('yearly', { ...(data.yearly || {}), [area]: v })}
                  placeholder="Goal..."
                  count={4}
                />
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === 'goals' && (
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px' }}>
            <div>
              <div style={{ fontSize: '15px', fontWeight: '700', marginBottom: '4px' }}>Short Term</div>
              <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '14px' }}>Within 1 year</div>
              <GoalList items={data.shortGoals} onChange={v => upd('shortGoals', v)} placeholder="Goal..." count={8} />
            </div>
            <div>
              <div style={{ fontSize: '15px', fontWeight: '700', marginBottom: '4px' }}>Medium Term</div>
              <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '14px' }}>2–5 years</div>
              <GoalList items={data.medGoals} onChange={v => upd('medGoals', v)} placeholder="Goal..." count={8} />
            </div>
            <div>
              <div style={{ fontSize: '15px', fontWeight: '700', marginBottom: '4px' }}>Long Term</div>
              <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '14px' }}>5–10 years</div>
              <GoalList items={data.longGoals} onChange={v => upd('longGoals', v)} placeholder="Goal..." count={8} />
            </div>
            <div>
              <div style={{ fontSize: '15px', fontWeight: '700', marginBottom: '4px' }}>Life Goals</div>
              <div style={{ fontSize: '11px', color: '#aaa', marginBottom: '14px' }}>Before I die</div>
              <GoalList items={data.lifeGoals} onChange={v => upd('lifeGoals', v)} placeholder="Goal..." count={8} />
            </div>
          </div>

          <div style={{ marginTop: '28px' }}>
            <div style={{ fontSize: '11px', fontWeight: '700', letterSpacing: '2px', color: '#888', marginBottom: '12px' }}>LIFE MILESTONES</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
              {(data.milestones || [{},{},{},{},{},{}]).map((m, i) => (
                <div key={i} style={{ border: '1px solid #e8e8e8', borderRadius: '6px', padding: '12px' }}>
                  <input value={m.title || ''} onChange={e => { const ms = [...(data.milestones || [{},{},{},{},{},{}])]; ms[i] = { ...ms[i], title: e.target.value }; upd('milestones', ms); }}
                    placeholder="Milestone..." style={{ width: '100%', border: 'none', borderBottom: '2px solid #111', outline: 'none', fontSize: '13px', fontWeight: '700', color: '#111', background: 'transparent', fontFamily: 'inherit', padding: '3px 0', marginBottom: '6px', boxSizing: 'border-box' }} />
                  <input value={m.date || ''} onChange={e => { const ms = [...(data.milestones || [{},{},{},{},{},{}])]; ms[i] = { ...ms[i], date: e.target.value }; upd('milestones', ms); }}
                    placeholder="By when..." style={{ width: '100%', border: 'none', outline: 'none', fontSize: '11px', color: '#888', background: 'transparent', fontFamily: 'inherit', padding: '2px 0', boxSizing: 'border-box' }} />
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {tab === 'bucket' && (
        <div>
          <div style={{ fontSize: '13px', color: '#aaa', marginBottom: '20px' }}>Things to do, see, experience and achieve in your lifetime.</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
            {['Travel & Places', 'Experiences & Adventure', 'Skills & Learning', 'Relationships & People', 'Health & Physical', 'Career & Creative', 'Give & Contribute', 'Other Dreams'].map(cat => (
              <div key={cat} style={{ border: '1px solid #e8e8e8', borderRadius: '6px', padding: '14px' }}>
                <div style={{ fontSize: '12px', fontWeight: '700', color: '#333', borderBottom: '2px solid #111', paddingBottom: '6px', marginBottom: '10px' }}>{cat}</div>
                <GoalList
                  items={(data.bucketList || {})[cat] || []}
                  onChange={v => upd('bucketList', { ...(data.bucketList || {}), [cat]: v })}
                  placeholder="Add to bucket list..."
                  count={5}
                />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.LifePlan = LifePlan;