// house.jsx — Family sharing + Boarding/Away mode

const ROLES = [
  { id: 'admin', lbl: 'Admin',  note: 'Edit anything, invite others' },
  { id: 'carer', lbl: 'Carer',  note: 'Mark tasks done, add memories' },
  { id: 'guest', lbl: 'Guest',  note: 'View only — read recent activity' },
];

function fmtRelTime(iso) {
  if (!iso) return '';
  const m = Math.round((window.TOOLS_NOW - new Date(iso)) / 60000);
  if (m < 60) return `${Math.max(1, m)} min ago`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h} hr ago`;
  const d = Math.round(h / 24);
  return `${d}d ago`;
}

// ─── Family panel ────────────────────────────────────────────────────────
function FamilyPanel({ members, activity, onInvite, onRemove, onUpdateRole }) {
  const [inviting, setInviting] = React.useState(false);
  const [email, setEmail] = React.useState('');
  const [role, setRole] = React.useState('carer');

  const send = () => {
    if (!email.trim()) return;
    onInvite && onInvite({ id: `f-${Date.now()}`, email: email.trim(), role,
                           name: email.trim().split('@')[0], status: 'pending' });
    setEmail(''); setRole('carer'); setInviting(false);
  };

  return (
    <>
      <window.SectionHeader kicker="Household" title="Tending" accent="together" count={`${(members || []).length}`} />
      <div className="health-card fam-card">
        {(members || []).length === 0 && !inviting && (
          <div className="health-empty">
            <div className="health-empty-mark">⌂</div>
            <div className="health-empty-t">Tending solo.</div>
            <div className="health-empty-s">
              Share with a partner, family, or roommate. They'll see today's care and can check things off too.
            </div>
          </div>
        )}

        {(members || []).map((m) => {
          const r = ROLES.find((x) => x.id === m.role) || ROLES[1];
          const init = (m.name || m.email || '?')[0].toUpperCase();
          return (
            <div key={m.id} className="fam-row">
              <div className={'fam-av tint-' + ((m.id.charCodeAt(2) % 4))}>{init}</div>
              <div className="fam-body">
                <div className="fam-name">{m.name || m.email}</div>
                <div className="fam-meta">
                  <span className="fam-role-pill">{r.lbl}</span>
                  {m.status === 'pending' && <span className="fam-pending">invite pending</span>}
                  {m.status !== 'pending' && m.lastSeen && <span>{fmtRelTime(m.lastSeen)}</span>}
                </div>
              </div>
              {onUpdateRole && m.role !== 'you' && (
                <select className="fam-role" value={m.role}
                        onChange={(e) => onUpdateRole(m.id, e.target.value)}>
                  {ROLES.map((r) => <option key={r.id} value={r.id}>{r.lbl}</option>)}
                </select>
              )}
              {m.role !== 'you' && (
                <button className="r-del" onClick={() => onRemove && onRemove(m.id)} aria-label="Remove">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                       strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
                </button>
              )}
            </div>
          );
        })}

        {inviting ? (
          <div className="health-form">
            <div className="health-form-row">
              <input className="health-input" autoFocus value={email}
                     onChange={(e) => setEmail(e.target.value)} type="email"
                     placeholder="email@tendlet.app" />
            </div>
            <div className="health-form-row">
              <div className="doc-type-tabs">
                {ROLES.map((r) => (
                  <button key={r.id} type="button"
                          className={role === r.id ? 'on' : ''}
                          onClick={() => setRole(r.id)}>
                    <span>{r.lbl}</span>
                  </button>
                ))}
              </div>
              <div className="rec-help">{(ROLES.find((r) => r.id === role) || ROLES[1]).note}.</div>
            </div>
            <div className="r-add-actions">
              <button className="r-cancel" onClick={() => { setEmail(''); setRole('carer'); setInviting(false); }}>Cancel</button>
              <button className="r-save" onClick={send} disabled={!email.trim()}
                      style={{ opacity: email.trim() ? 1 : 0.4 }}>Send invite</button>
            </div>
          </div>
        ) : (
          <button className="r-add" onClick={() => setInviting(true)}>
            <span className="r-plus">+</span>
            <span>Invite someone to help</span>
          </button>
        )}
      </div>

      {/* Activity feed */}
      {activity && activity.length > 0 && (
        <>
          <window.SectionHeader kicker="Activity" title="Recently" accent="among us" count={`${activity.length}`} />
          <div className="health-card activity-card">
            {activity.slice(0, 8).map((a) => (
              <div key={a.id} className="act-row">
                <div className={'fam-av tint-' + ((a.who.charCodeAt(0) % 4))}>{a.who[0].toUpperCase()}</div>
                <div className="act-body">
                  <div className="act-line">
                    <b>{a.who}</b> {a.verb}
                  </div>
                  <div className="act-time h-mono">{fmtRelTime(a.at)}</div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
}

// ─── Away mode panel (Profile) ───────────────────────────────────────────
function AwayPanel({ awayMode, onUpdate, folks }) {
  const a = awayMode || { active: false, sitter: '', startDate: '', endDate: '', brief: '' };
  const toggle = (active) => onUpdate && onUpdate({ ...a, active });
  const set = (k, v) => onUpdate && onUpdate({ ...a, [k]: v });

  return (
    <>
      <window.SectionHeader kicker="Travel" title="Boarding" accent="& away mode" />
      <div className="health-card away-card">
        <div className="away-toggle-row">
          <div>
            <div className="away-toggle-t">Away mode</div>
            <div className="away-toggle-s">
              {a.active
                ? `Active — sitter sees a care brief for ${(folks || []).length} folk.`
                : 'Toggle on when you\'re traveling. Share a brief with whoever is caring for them.'}
            </div>
          </div>
          <button className="onb-switch" data-on={a.active ? '1' : '0'}
                  onClick={() => toggle(!a.active)}><i /></button>
        </div>

        {a.active && (
          <div className="away-form">
            <div className="health-form-row split">
              <label className="health-mini">
                <span>Sitter name</span>
                <input className="health-input" value={a.sitter || ''}
                       onChange={(e) => set('sitter', e.target.value)}
                       placeholder="e.g. Alex" />
              </label>
              <label className="health-mini">
                <span>Returns</span>
                <input className="health-input" type="date" value={a.endDate || ''}
                       onChange={(e) => set('endDate', e.target.value)} />
              </label>
            </div>
            <div className="health-form-row">
              <label className="health-mini">
                <span>Care brief</span>
                <textarea className="health-input away-brief" rows="4" value={a.brief || ''}
                          onChange={(e) => set('brief', e.target.value)}
                          placeholder={'• Luna: hay all day, greens at 8 and 6\n• Mochi: dry food twice, fresh water\n• Echo: water Tuesday only'} />
              </label>
            </div>
            <button className="r-add away-share">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="6" cy="12" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="18" cy="18" r="2"/>
                <path d="M8 11l8-4M8 13l8 4"/>
              </svg>
              <span>Share temporary care link</span>
            </button>
          </div>
        )}
      </div>
    </>
  );
}

// ─── Away banner (Today header) ──────────────────────────────────────────
function AwayBanner({ awayMode }) {
  if (!awayMode || !awayMode.active) return null;
  const ends = awayMode.endDate ? new Date(awayMode.endDate) : null;
  const endsLbl = ends && !isNaN(ends)
    ? ends.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
    : 'soon';
  return (
    <div className="away-banner">
      <div className="away-banner-ic">✈</div>
      <div className="away-banner-t">
        <b>You're away.</b>
        <span>{awayMode.sitter ? `${awayMode.sitter} is tending` : 'Sitter tending'} · returns {endsLbl}</span>
      </div>
      <div className="away-banner-pulse"></div>
    </div>
  );
}

Object.assign(window, { FamilyPanel, AwayPanel, AwayBanner, ROLES });