/* global React, ReactDOM, fmt, I, MiniMap, HeroImg, SourceBadge, VisibilityDot */
// Detail drawer / modal + Save flow.

const { useState: useS, useEffect: useE } = React;

// ── Detail Drawer (desktop primary) ──────────────────────────────
function DetailDrawer({ p, onClose, onUpdate }) {
  useE(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [onClose]);
  const [note, setNote] = useS(p.note);
  useE(() => setNote(p.note), [p.id]);

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', inset: 0, zIndex: 50,
    }} onClick={onClose}>
      {/* scrim */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(31,27,22,.36)',
        backdropFilter: 'blur(2px)',
        animation: 'hhdFadeIn .2s ease',
      }} />
      <aside onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, bottom: 0,
        width: 'min(640px, 92vw)',
        background: 'var(--paper)',
        boxShadow: '-24px 0 64px rgba(31,27,22,.18)',
        animation: 'hhdSlideIn .25s cubic-bezier(.2,.7,.3,1)',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        <DetailHeader p={p} onClose={onClose} onUpdate={onUpdate} />
        <div className="no-scrollbar" style={{ flex: 1, overflowY: 'auto' }}>
          <DetailBody p={p} note={note} setNote={setNote} onUpdate={onUpdate} />
        </div>
      </aside>
    </div>,
    document.body,
  );
}

function DetailModal({ p, onClose, onUpdate }) {
  useE(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [onClose]);
  const [note, setNote] = useS(p.note);

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', inset: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 32,
    }} onClick={onClose}>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,27,22,.5)' }} />
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'relative',
        width: 'min(880px, 100%)', maxHeight: '92vh',
        background: 'var(--paper)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-3)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <DetailHeader p={p} onClose={onClose} onUpdate={onUpdate} />
        <div className="no-scrollbar" style={{ flex: 1, overflowY: 'auto' }}>
          <DetailBody p={p} note={note} setNote={setNote} onUpdate={onUpdate} />
        </div>
      </div>
    </div>,
    document.body,
  );
}

function DetailSheet({ p, onClose, onUpdate }) {
  useE(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [onClose]);
  const [note, setNote] = useS(p.note);
  useE(() => setNote(p.note), [p.id]);

  return ReactDOM.createPortal(
    <div style={{ position: 'fixed', inset: 0, zIndex: 60 }} onClick={onClose}>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(31,27,22,.42)', animation: 'hhdFadeIn .2s ease' }} />
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', inset: 0,
        background: 'var(--paper)',
        animation: 'hhdSlideIn .25s cubic-bezier(.2,.7,.3,1)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <DetailHeader p={p} onClose={onClose} onUpdate={onUpdate} />
        <div className="no-scrollbar" style={{ flex: 1, overflowY: 'auto' }}>
          <DetailBody p={p} note={note} setNote={setNote} onUpdate={onUpdate} />
        </div>
      </div>
    </div>,
    document.body,
  );
}

function DetailHeader({ p, onClose, onUpdate }) {
  return (
    <div style={{
      padding: '14px 20px',
      borderBottom: '1px solid var(--line-2)',
      display: 'flex', alignItems: 'center', gap: 10,
      background: 'var(--paper)',
    }}>
      <button onClick={onClose} style={{
        width: 32, height: 32, borderRadius: 999,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--ink-2)',
      }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--paper-3)'}
         onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
        {I.close(16)}
      </button>
      <div style={{ flex: 1, fontSize: 12, color: 'var(--ink-3)' }}>
        Saved {p.saved} {p.source !== 'private' && <>· via {p.source}</>}
      </div>
      <button onClick={() => onUpdate({ visibility: p.visibility === 'public' ? 'private' : 'public' })} style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 10px', borderRadius: 999,
        background: p.visibility === 'public' ? 'var(--accent-soft)' : 'var(--paper-2)',
        color: p.visibility === 'public' ? 'var(--accent-ink)' : 'var(--ink-2)',
        border: '1px solid var(--line-2)',
        fontSize: 12, fontWeight: 500,
      }}>
        {p.visibility === 'public' ? I.globe(13) : I.lock(13)}
        {p.visibility === 'public' ? 'Public' : 'Private'}
      </button>
      <button style={{
        padding: '6px 10px', borderRadius: 999,
        background: 'var(--paper-2)', border: '1px solid var(--line-2)',
        fontSize: 12, fontWeight: 500, color: 'var(--ink-2)',
        display: 'inline-flex', alignItems: 'center', gap: 6,
      }}>{I.external(13)} Open source</button>
    </div>
  );
}

function DetailBody({ p, note, setNote, onUpdate }) {
  return (
    <div style={{ padding: '24px 28px 64px' }}>
      <div style={{
        position: 'relative', borderRadius: 'var(--r-md)', overflow: 'hidden',
        boxShadow: 'var(--shadow-2)',
      }}>
        <HeroImg p={p} h={320} />
        <SourceBadge source={p.source} position="topleft" dark />
      </div>
      {/* image strip — fake gallery */}
      <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
        {[0.7, 0.9, 1.1].map((m, i) => (
          <div key={i} className="hhd-img-ph" style={{
            flex: 1, height: 70, borderRadius: 'var(--r-sm)',
            '--ph-bg': p.color, '--ph-label': '""',
            opacity: m,
          }} />
        ))}
        <div style={{
          width: 70, height: 70, borderRadius: 'var(--r-sm)',
          border: '1px dashed var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--ink-3)', fontSize: 11, textAlign: 'center', lineHeight: 1.2,
        }}>+ add<br/>photos</div>
      </div>

      <div style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--ink-3)' }}>
          {I.pin(14)} <span style={{ color: 'var(--ink-2)' }}>{p.neighborhood}</span>
          <span className="dot" /> {p.region} <span className="dot" /> {p.city}
        </div>
        <h2 style={{
          margin: '8px 0 0', fontFamily: 'var(--serif)', fontSize: 28,
          fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.2,
          color: 'var(--ink)', textWrap: 'pretty',
        }}>{p.title}</h2>
        <div style={{
          marginTop: 14, display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap',
        }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 24, fontWeight: 600, color: 'var(--ink)' }}>
            {fmt.priceFull(p.price)}
          </div>
          <div style={{ display: 'flex', gap: 14, color: 'var(--ink-2)', fontSize: 13 }}>
            {p.beds && <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>{I.bed(14)} {p.beds} bd</span>}
            {p.baths && <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>{I.bath(14)} {p.baths} ba</span>}
            {p.sqft && <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}>{I.sqft(14)} {p.sqft.toLocaleString()} sf</span>}
            {!p.sqft && <span style={{ color: 'var(--ink-3)', fontStyle: 'italic' }}>square footage unknown</span>}
          </div>
        </div>
      </div>

      {/* Status row */}
      <div style={{
        marginTop: 22, padding: '12px 14px',
        background: 'var(--paper-2)', borderRadius: 'var(--r-md)',
        display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
      }}>
        <span style={{ fontSize: 12, color: 'var(--ink-3)', marginRight: 4 }}>How are you feeling about it?</span>
        {[
          { id: 'shortlisted', label: 'Shortlist', color: 'var(--shortlist)', icon: I.bookmark(12, true) },
          { id: 'visited',     label: 'Visited',   color: 'var(--visited)',   icon: I.eye(12) },
          { id: 'favorite',    label: 'Favorite',  color: 'var(--accent)',    icon: I.heart(12, true) },
        ].map((s) => {
          const active = p.status === s.id;
          return (
            <button key={s.id} onClick={() => onUpdate({ status: active ? null : s.id })} style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '5px 10px', borderRadius: 999,
              background: active ? '#fff' : 'transparent',
              border: '1px solid ' + (active ? s.color : 'var(--line)'),
              color: active ? s.color : 'var(--ink-2)',
              fontSize: 12, fontWeight: 500,
            }}>{s.icon}{s.label}</button>
          );
        })}
      </div>

      {/* Map block — bigger, real-feeling */}
      <Section title="Where it is">
        <div style={{
          borderRadius: 'var(--r-md)', overflow: 'hidden',
          border: '1px solid var(--line-2)', position: 'relative',
        }}>
          <MiniMap width={584} height={200} neighborhood={p.neighborhood} accent={p.accent} />
          <div style={{
            position: 'absolute', left: 14, bottom: 14,
            padding: '8px 10px', borderRadius: 'var(--r-sm)',
            background: 'rgba(247,243,236,.95)', backdropFilter: 'blur(4px)',
            boxShadow: 'var(--shadow-1)',
            fontSize: 12, color: 'var(--ink)',
          }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 2 }}>{p.neighborhood}</div>
            <div style={{ color: 'var(--ink-3)' }}>{p.region} · {p.city}</div>
          </div>
          {p.commute && (
            <div style={{
              position: 'absolute', right: 14, top: 14,
              padding: '6px 10px', borderRadius: 999,
              background: 'rgba(31,27,22,.78)', color: '#f3ece0',
              fontSize: 11, fontFamily: 'var(--mono)',
            }}>{p.commute}</div>
          )}
        </div>
      </Section>

      {/* Notes */}
      <Section title="Your notes">
        <textarea
          value={note} onChange={(e) => setNote(e.target.value)}
          onBlur={() => onUpdate({ note })}
          placeholder="What did you notice? What questions do you have?"
          rows={4}
          style={{
            width: '100%', padding: '12px 14px',
            background: '#fffef9', border: '1px solid var(--line-2)',
            borderRadius: 'var(--r-md)',
            fontFamily: 'var(--serif)', fontSize: 14, fontStyle: 'italic',
            lineHeight: 1.5, color: 'var(--ink)',
            outline: 'none', resize: 'vertical',
          }}
        />
      </Section>

      {/* Tags */}
      <Section title="Tags">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {(p.tags || []).map((t) => (
            <span key={t} style={{
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--paper-2)', border: '1px solid var(--line-2)',
              fontSize: 12, color: 'var(--ink-2)',
            }}>{t}</span>
          ))}
          <button style={{
            padding: '4px 10px', borderRadius: 999,
            border: '1px dashed var(--line)', color: 'var(--ink-3)',
            fontSize: 12,
          }}>+ add tag</button>
        </div>
      </Section>

      {/* Activity */}
      <Section title="Activity">
        <ul style={{ margin: 0, padding: 0, listStyle: 'none', fontSize: 13, color: 'var(--ink-2)' }}>
          <li style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--line-2)' }}>
            <span style={{ color: 'var(--ink-3)', minWidth: 80 }}>{p.saved}</span>
            <span>You saved this home {p.source !== 'private' ? `from ${p.source}` : 'manually'}.</span>
          </li>
          {p.note && (
            <li style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--line-2)' }}>
              <span style={{ color: 'var(--ink-3)', minWidth: 80 }}>{p.saved}</span>
              <span>You wrote a note.</span>
            </li>
          )}
          {p.status && (
            <li style={{ display: 'flex', gap: 10, padding: '8px 0' }}>
              <span style={{ color: 'var(--ink-3)', minWidth: 80 }}>recently</span>
              <span>You marked this {p.status}.</span>
            </li>
          )}
        </ul>
      </Section>
    </div>
  );
}

function Section({ title, children }) {
  return (
    <section style={{ marginTop: 28 }}>
      <h3 style={{
        margin: '0 0 10px', fontSize: 11, fontWeight: 600,
        letterSpacing: 0.6, textTransform: 'uppercase',
        color: 'var(--ink-3)',
      }}>{title}</h3>
      {children}
    </section>
  );
}

// ── Save modal ─────────────────────────────────────────────
function SaveModal({ onClose, onSave }) {
  const [step, setStep] = useS('paste'); // paste | review
  const [url, setUrl] = useS('');
  const [draft, setDraft] = useS(null);
  const [busy, setBusy] = useS(false);

  useE(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, [onClose]);

  function importUrl() {
    setBusy(true);
    setTimeout(() => {
      const sources = ['Redfin', 'Zillow', 'Compass', 'private'];
      const source = sources[Math.floor(Math.random() * 3)];
      setDraft({
        id: 'new-' + Date.now(),
        title: 'Two-story craftsman with the fenced yard',
        label: 'Two-story craftsman',
        neighborhood: 'Hawthorne',
        city: 'Portland, OR',
        region: 'Inner SE',
        price: 645000,
        beds: 3, baths: 2, sqft: 1720,
        source,
        saved: 'just now',
        note: '',
        tags: [],
        status: null,
        visibility: 'private',
        color: '#b88e6a',
        accent: '#7a5237',
        commute: '21 min to downtown',
        aspect: 0.95,
      });
      setStep('review');
      setBusy(false);
    }, 700);
  }

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 60,
      background: 'rgba(31,27,22,.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 'min(560px, 100%)',
        background: 'var(--paper)', borderRadius: 'var(--r-lg)',
        boxShadow: 'var(--shadow-3)', overflow: 'hidden',
      }}>
        <div style={{
          padding: '16px 20px', borderBottom: '1px solid var(--line-2)',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            fontFamily: 'var(--serif)', fontSize: 18, fontWeight: 600,
            color: 'var(--ink)',
          }}>Save a home</div>
          <div style={{ flex: 1 }} />
          <button onClick={onClose} style={{
            width: 28, height: 28, borderRadius: 999,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: 'var(--ink-3)',
          }}>{I.close(15)}</button>
        </div>
        {step === 'paste' && (
          <div style={{ padding: '20px 22px 22px' }}>
            <p style={{
              margin: '0 0 14px', fontFamily: 'var(--serif)', fontSize: 14,
              fontStyle: 'italic', color: 'var(--ink-2)', lineHeight: 1.45,
            }}>Paste a link from anywhere. We'll pull what we can — you fill in what we miss.</p>
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--ink-3)' }}>{I.link(15)}</span>
              <input
                autoFocus
                value={url} onChange={(e) => setUrl(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && importUrl()}
                placeholder="https://www.redfin.com/..."
                style={{
                  width: '100%', padding: '12px 14px 12px 40px',
                  background: '#fffef9',
                  border: '1px solid var(--line-2)', borderRadius: 'var(--r-md)',
                  fontSize: 13.5, color: 'var(--ink)',
                  fontFamily: 'inherit', outline: 'none',
                }}
                onFocus={(e) => e.target.style.borderColor = 'var(--accent)'}
                onBlur={(e) => e.target.style.borderColor = 'var(--line-2)'}
              />
            </div>
            <div style={{
              marginTop: 10, fontSize: 12, color: 'var(--ink-3)',
              display: 'flex', gap: 8, flexWrap: 'wrap',
            }}>
              <span style={{ color: 'var(--ink-2)' }}>Works with:</span>
              <span>Redfin</span><span>·</span>
              <span>Zillow</span><span>·</span>
              <span>Compass</span><span>·</span>
              <span>Realtor.com</span><span>·</span>
              <span>most listing sites</span>
            </div>
            <div style={{
              marginTop: 18, padding: '12px 14px',
              background: 'var(--paper-2)', borderRadius: 'var(--r-md)',
              display: 'flex', alignItems: 'flex-start', gap: 10,
            }}>
              <div style={{ marginTop: 1, color: 'var(--accent)' }}>{I.note(14)}</div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.4 }}>
                <strong style={{ fontWeight: 600, color: 'var(--ink)' }}>No link?</strong> {' '}
                <button onClick={() => { setDraft({
                  id: 'new-' + Date.now(), title: '', label: '', neighborhood: '',
                  city: '', region: 'NE', price: null, beds: null, baths: null, sqft: null,
                  source: 'private', saved: 'just now', note: '', tags: [],
                  status: null, visibility: 'private',
                  color: '#c2a87f', accent: '#7a5d3a', commute: null, aspect: 0.9,
                }); setStep('review'); }}
                  style={{ color: 'var(--accent-ink)', fontWeight: 500, textDecoration: 'underline' }}>
                  Add it manually
                </button> — or use the browser extension for one-click saves from any site.
              </div>
            </div>
            <div style={{ marginTop: 20, display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <button onClick={onClose} style={{
                padding: '9px 14px', borderRadius: 999,
                color: 'var(--ink-2)', fontSize: 13, fontWeight: 500,
              }}>Cancel</button>
              <button onClick={importUrl} disabled={!url || busy} style={{
                padding: '9px 16px', borderRadius: 999,
                background: url ? 'var(--ink)' : 'var(--paper-3)',
                color: url ? 'var(--paper)' : 'var(--ink-3)',
                fontSize: 13, fontWeight: 500, opacity: busy ? .6 : 1,
                cursor: url ? 'pointer' : 'default',
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>{busy ? 'Reading...' : <>Import {I.arrow(13)}</>}</button>
            </div>
          </div>
        )}
        {step === 'review' && draft && (
          <SaveReview draft={draft} setDraft={setDraft} onSave={() => onSave(draft)} onBack={() => setStep('paste')} />
        )}
      </div>
    </div>,
    document.body,
  );
}

function SaveReview({ draft, setDraft, onSave, onBack }) {
  const set = (k) => (e) => setDraft({ ...draft, [k]: e.target.value });
  const setNum = (k) => (e) => setDraft({ ...draft, [k]: e.target.value ? Number(e.target.value) : null });
  return (
    <div style={{ padding: '20px 22px 22px' }}>
      {draft.title ? (
        <div style={{
          padding: '8px 12px', borderRadius: 'var(--r-sm)',
          background: 'var(--accent-soft)', color: 'var(--accent-ink)',
          fontSize: 12, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent-ink)' }} />
          We pulled what we could from {draft.source}. Review and add anything missing.
        </div>
      ) : (
        <div style={{
          padding: '8px 12px', borderRadius: 'var(--r-sm)',
          background: 'var(--paper-2)', color: 'var(--ink-2)',
          fontSize: 12, marginBottom: 14,
        }}>Manual entry — fill in what you know. You can always come back to it.</div>
      )}
      <div style={{ display: 'grid', gap: 12, gridTemplateColumns: '1fr 1fr' }}>
        <Field label="Title" full>
          <input value={draft.title} onChange={set('title')} placeholder="A name you'll remember it by" style={fieldStyle} />
        </Field>
        <Field label="Neighborhood">
          <input value={draft.neighborhood} onChange={set('neighborhood')} placeholder="e.g. Sellwood" style={fieldStyle} />
        </Field>
        <Field label="City">
          <input value={draft.city} onChange={set('city')} placeholder="e.g. Portland, OR" style={fieldStyle} />
        </Field>
        <Field label="Price ($)">
          <input type="number" value={draft.price ?? ''} onChange={setNum('price')} placeholder="—" style={fieldStyle} />
        </Field>
        <Field label="Beds / Baths">
          <div style={{ display: 'flex', gap: 8 }}>
            <input type="number" value={draft.beds ?? ''} onChange={setNum('beds')} placeholder="bd" style={{ ...fieldStyle, width: '50%' }} />
            <input type="number" value={draft.baths ?? ''} onChange={setNum('baths')} placeholder="ba" style={{ ...fieldStyle, width: '50%' }} />
          </div>
        </Field>
        <Field label="Note" full>
          <textarea value={draft.note} onChange={set('note')} placeholder="What caught your eye?" rows={2} style={{ ...fieldStyle, resize: 'vertical', fontFamily: 'var(--serif)', fontStyle: 'italic' }} />
        </Field>
      </div>
      <div style={{
        marginTop: 16, display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>Visibility:</span>
        {['private', 'public'].map((v) => (
          <button key={v} onClick={() => setDraft({ ...draft, visibility: v })} style={{
            padding: '5px 10px', borderRadius: 999,
            background: draft.visibility === v ? 'var(--ink)' : 'transparent',
            color: draft.visibility === v ? 'var(--paper)' : 'var(--ink-2)',
            border: '1px solid ' + (draft.visibility === v ? 'var(--ink)' : 'var(--line)'),
            fontSize: 12, fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>{v === 'public' ? I.globe(12) : I.lock(12)} {v === 'public' ? 'Public' : 'Private'}</button>
        ))}
      </div>
      <div style={{ marginTop: 20, display: 'flex', gap: 10, justifyContent: 'space-between' }}>
        <button onClick={onBack} style={{
          padding: '9px 14px', borderRadius: 999,
          color: 'var(--ink-2)', fontSize: 13, fontWeight: 500,
        }}>← Back</button>
        <button onClick={onSave} style={{
          padding: '9px 18px', borderRadius: 999,
          background: 'var(--accent)', color: '#fff',
          fontSize: 13, fontWeight: 500,
        }}>Add to my diary</button>
      </div>
    </div>
  );
}

function Field({ label, full, children }) {
  return (
    <label style={{
      display: 'flex', flexDirection: 'column', gap: 5,
      gridColumn: full ? '1 / -1' : 'auto',
    }}>
      <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', letterSpacing: 0.4, textTransform: 'uppercase' }}>{label}</span>
      {children}
    </label>
  );
}

const fieldStyle = {
  padding: '9px 11px', borderRadius: 'var(--r-sm)',
  background: '#fffef9', border: '1px solid var(--line-2)',
  fontSize: 13, color: 'var(--ink)',
  fontFamily: 'inherit', outline: 'none',
  width: '100%',
};

Object.assign(window, { DetailDrawer, DetailModal, DetailSheet, SaveModal });