// StarThink Shared Components
// Exported to window for cross-file access

const ST = {
  get: (key, fallback = null) => {
    try { const v = localStorage.getItem(`st_${key}`); return v ? JSON.parse(v) : fallback; } catch { return fallback; }
  },
  set: (key, val) => {
    try { localStorage.setItem(`st_${key}`, JSON.stringify(val)); } catch {}
  }
};

// Reusable input-like components
function STInput({ value, onChange, placeholder, className = '', multiline = false, rows = 3 }) {
  const style = {
    width: '100%', background: 'transparent', border: 'none', borderBottom: '1px solid #d0d0d0',
    outline: 'none', fontFamily: 'inherit', fontSize: '13px', color: '#111', padding: '4px 2px',
    resize: 'none', boxSizing: 'border-box'
  };
  if (multiline) {
    return <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
      style={{ ...style, borderBottom: 'none', border: '1px solid #d0d0d0', borderRadius: '3px', padding: '6px', rows }} rows={rows} />;
  }
  return <input type="text" value={value} onChange={e => onChange(e.target.value)}
    placeholder={placeholder} style={style} className={className} />;
}

function STSection({ title, children, accent = '#111', style = {} }) {
  return (
    <div style={{ marginBottom: '16px', ...style }}>
      <div style={{ background: accent, color: accent === '#111' ? '#fff' : '#111', fontSize: '11px', fontWeight: '700',
        letterSpacing: '1.5px', textTransform: 'uppercase', padding: '4px 8px', marginBottom: '8px' }}>
        {title}
      </div>
      {children}
    </div>
  );
}

function STCheck({ checked, onChange, label }) {
  return (
    <div onClick={() => onChange(!checked)} style={{ display: 'flex', alignItems: 'flex-start', gap: '8px', cursor: 'pointer', marginBottom: '5px' }}>
      <div style={{ width: '14px', height: '14px', border: '1.5px solid #999', borderRadius: '2px', flexShrink: 0, marginTop: '1px',
        background: checked ? '#111' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {checked && <span style={{ color: '#fff', fontSize: '10px', lineHeight: 1 }}>✓</span>}
      </div>
      <span style={{ fontSize: '13px', color: '#333', textDecoration: checked ? 'line-through' : 'none', opacity: checked ? 0.5 : 1, flex: 1 }}>
        {label || <span style={{ color: '#aaa' }}>—</span>}
      </span>
    </div>
  );
}

function STMood({ value, onChange }) {
  const moods = [
    { e: '😄', l: 'Great' }, { e: '🙂', l: 'Good' }, { e: '😐', l: 'Okay' },
    { e: '😔', l: 'Low' }, { e: '😤', l: 'Stressed' }
  ];
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      {moods.map(m => (
        <div key={m.l} onClick={() => onChange(m.l)} title={m.l}
          style={{ cursor: 'pointer', fontSize: '20px', opacity: value === m.l ? 1 : 0.3,
            transform: value === m.l ? 'scale(1.3)' : 'scale(1)', transition: 'all 0.15s' }}>
          {m.e}
        </div>
      ))}
    </div>
  );
}

function STWater({ value = 0, onChange }) {
  return (
    <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
      {Array.from({ length: 8 }, (_, i) => (
        <div key={i} onClick={() => onChange(i < value ? i : i + 1)} title={`${i + 1} glasses`}
          style={{ fontSize: '18px', cursor: 'pointer', opacity: i < value ? 1 : 0.25, transition: 'opacity 0.1s' }}>
          🥤
        </div>
      ))}
    </div>
  );
}

function STStars({ value = 0, onChange, max = 5 }) {
  return (
    <div style={{ display: 'flex', gap: '4px' }}>
      {Array.from({ length: max }, (_, i) => (
        <span key={i} onClick={() => onChange(i + 1)} style={{ cursor: 'pointer', fontSize: '16px', color: i < value ? '#c0a000' : '#ddd' }}>★</span>
      ))}
    </div>
  );
}

function STLineList({ items, onChange, placeholder = 'Add item...', count = 5 }) {
  const list = [...(items || []), ...Array(Math.max(0, count - (items || []).length)).fill('')].slice(0, count);
  return (
    <div>
      {list.map((v, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', borderBottom: '1px solid #e0e0e0', marginBottom: '2px' }}>
          <span style={{ color: '#bbb', fontSize: '11px', marginRight: '6px', minWidth: '14px' }}>{i + 1}.</span>
          <input value={v} onChange={e => { const n = [...list]; n[i] = e.target.value; onChange(n); }}
            placeholder={placeholder} style={{ flex: 1, border: 'none', outline: 'none', fontSize: '13px', color: '#111', background: 'transparent', padding: '3px 0', fontFamily: 'inherit' }} />
        </div>
      ))}
    </div>
  );
}

function STCheckList({ items, onToggle, onEdit, placeholder = 'Task...', count = 6 }) {
  const raw = items || [];
  const list = [...raw, ...Array(Math.max(0, count - raw.length)).fill(null)].slice(0, count);
  return (
    <div>
      {list.map((rawItem, i) => {
        const item = rawItem && typeof rawItem === 'object' ? rawItem : { text: rawItem || '', done: false };
        return (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '6px', borderBottom: '1px solid #efefef', padding: '3px 0' }}>
            <div onClick={() => onToggle(i, !item.done)} style={{ width: '14px', height: '14px', border: '1.5px solid #bbb', borderRadius: '2px',
              flexShrink: 0, cursor: 'pointer', background: item.done ? '#111' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {item.done && <span style={{ color: '#fff', fontSize: '9px' }}>✓</span>}
            </div>
            <input value={item.text || ''} onChange={e => onEdit(i, e.target.value)} placeholder={placeholder}
              style={{ flex: 1, border: 'none', outline: 'none', fontSize: '13px', color: item.done ? '#aaa' : '#111',
                textDecoration: item.done ? 'line-through' : 'none', background: 'transparent', fontFamily: 'inherit', padding: '1px 0' }} />
          </div>
        );
      })}
    </div>
  );
}

function STPageHeader({ title, subtitle, date, onDateChange }) {
  return (
    <div style={{ borderBottom: '2px solid #111', marginBottom: '16px', paddingBottom: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div>
        <div style={{ fontSize: '22px', fontWeight: '800', letterSpacing: '-0.5px', color: '#111' }}>{title}</div>
        {subtitle && <div style={{ fontSize: '11px', color: '#888', letterSpacing: '1px', textTransform: 'uppercase', marginTop: '2px' }}>{subtitle}</div>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <input type="date" value={date || ''} onChange={e => onDateChange(e.target.value)}
          style={{ border: '1px solid #ccc', borderRadius: '3px', padding: '4px 8px', fontSize: '13px', fontFamily: 'inherit', color: '#333', background: '#fafafa' }} />
      </div>
    </div>
  );
}

// Export everything to window
Object.assign(window, {
  ST, STInput, STSection, STCheck, STMood, STWater, STStars, STLineList, STCheckList, STPageHeader
});