/* NEXT OS Communications: authenticated form management and client responses. */

/* ─── tiny helpers ─── */
const cfUid = () => Math.random().toString(36).slice(2, 10) + Date.now().toString(36);

/* Supabase helpers */
const getSb = () => new Promise((resolve, reject) => {
  const startedAt = Date.now();
  const check = () => {
    const sb = window.OS_DATA?.getSupabaseClient ? window.OS_DATA.getSupabaseClient() : null;
    if (sb) return resolve(sb);
    if (Date.now() - startedAt >= 15000) {
      return reject(new Error('Supabase did not initialize. Check the network connection and reload NEXT OS.'));
    }
    setTimeout(check, 100);
  };
  check();
});

async function cfLoadForms() {
  const sb = await getSb();
  const [formsResult, responsesResult] = await Promise.all([
    sb.from('os_forms').select('*').order('created_at', { ascending: false }),
    sb.from('os_form_responses').select('*').order('submitted_at', { ascending: false })
  ]);

  if (formsResult.error) throw new Error(`Could not load client forms: ${formsResult.error.message}`);
  if (responsesResult.error) throw new Error(`Could not load client responses. Check the signed-in account's form access: ${responsesResult.error.message}`);

  const forms = formsResult.data || [];
  const responses = responsesResult.data || [];
  return forms.map(f => ({
    ...f,
    created: f.created_at,
    responses: (responses || []).filter(r => r.form_id === f.id).map(r => ({
      id: r.id,
      answers: r.answers,
      submittedAt: r.submitted_at,
      seen: r.seen
    }))
  }));
}

async function cfLoadDiscoveryInbox() {
  const sb = await getSb();
  const { data, error, count } = await sb.from('discovery_submissions')
    .select('id,created_at,client_company,contact_name,contact_email,contact_phone,status', { count: 'exact' })
    .order('created_at', { ascending: false })
    .limit(100);
  if (error) throw new Error(`Could not load the Sembule discovery inbox: ${error.message}`);
  return { submissions: data || [], count: count ?? (data || []).length };
}

async function cfLoadDiscoverySubmission(id) {
  const sb = await getSb();
  const { data, error } = await sb.from('discovery_submissions')
    .select('id,created_at,client_company,contact_name,contact_email,contact_phone,status,answers')
    .eq('id', id)
    .single();
  if (error) throw new Error(`Could not open the discovery submission: ${error.message}`);
  return data;
}

async function cfDownloadDiscoveryFile(submissionId, file) {
  const path = file?.path;
  if (typeof path !== 'string' || !path.startsWith(`${submissionId}/`) ||
      !/^[-a-f0-9]{36}\/[-a-f0-9]{36}\.(png|jpe?g|webp|gif|svg|pdf|docx?|xlsx?|csv)$/i.test(path)) {
    throw new Error('This attachment path is not valid.');
  }
  const sb = await getSb();
  const { data, error } = await sb.storage.from('discovery-uploads').download(path);
  if (error) throw new Error(`Could not download ${file.name || 'the attachment'}: ${error.message}`);
  const url = URL.createObjectURL(data);
  const link = document.createElement('a');
  link.href = url;
  link.download = String(file.name || 'client-attachment').replace(/[\\/:*?"<>|]/g, '_');
  document.body.appendChild(link);
  link.click();
  link.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function cfPrintEscape(value) {
  return String(value ?? '').replace(/[&<>"']/g, char => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
  })[char]);
}

function cfPrintAnswerValue(answer) {
  const value = answer?.value;
  if (answer?.type === 'file') {
    const files = Array.isArray(value) ? value : [];
    return files.length
      ? files.map(file => `${file.name || 'Attachment'}${file.size ? ` (${Math.max(1, Math.round(Number(file.size) / 1024))} KB)` : ''}`).join('\n')
      : 'No file attached';
  }
  if (value === null || value === undefined || value === '') return 'Not provided';
  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
  if (Array.isArray(value)) {
    return value.map(item => item && typeof item === 'object'
      ? Object.entries(item).map(([key, cell]) => `${key}: ${String(cell ?? '')}`).join('\n')
      : String(item ?? '')).join('\n');
  }
  if (typeof value === 'object') return JSON.stringify(value, null, 2);
  return String(value);
}

function cfOpenResponsePdf({ title, company, contact, submittedAt, status, reference, sections, clientLogo }, printWindow = null) {
  printWindow = printWindow || window.open('', '_blank');
  if (!printWindow) throw new Error('Allow pop-ups for NEXT OS to export this response as a PDF.');

  const brandLogo = new URL('/uploads/NEXT Favicon Transperent Logo@3x.png', window.location.origin).href;
  const sectionMarkup = (sections || []).map(section => `
    <section class="answer-section">
      <h2>${cfPrintEscape(section.title || 'Answers')}</h2>
      ${(section.answers || []).map(answer => `
        <div class="answer-row">
          <div class="answer-label">${cfPrintEscape(answer.label || 'Answer')}</div>
          <div class="answer-value">${cfPrintEscape(cfPrintAnswerValue(answer))}</div>
        </div>`).join('')}
    </section>`).join('');
  const logoMarkup = clientLogo
    ? `<img class="client-logo" src="${cfPrintEscape(clientLogo)}" alt="${cfPrintEscape(company || 'Client')} logo">`
    : '';
  const safeTitle = String(title || 'Client response').replace(/[\\/:*?"<>|]+/g, '-').slice(0, 100);
  const submitted = submittedAt ? new Date(submittedAt).toLocaleString() : 'Date not available';

  printWindow.document.open();
  printWindow.document.write(`<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NEXT - ${cfPrintEscape(safeTitle)} - ${cfPrintEscape(company || 'Client response')}</title>
  <style>
    @page{size:A4;margin:16mm 15mm}*{box-sizing:border-box}body{margin:0;color:#18251f;font:13px/1.55 Arial,Helvetica,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 18px;border-bottom:3px solid #00a96a}.brand{display:flex;align-items:center;gap:12px}.brand img{width:46px;height:46px;object-fit:contain}.brand-name{font-size:22px;font-weight:800;letter-spacing:.04em;color:#16003b}.brand-caption{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#66726c}.client-logo{max-width:145px;max-height:58px;object-fit:contain}.title{margin:24px 0 4px;color:#16003b;font-size:24px;line-height:1.2}.subtitle{margin:0;color:#59655e;font-size:14px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:20px 0 24px;padding:14px 16px;background:#f1faf5;border:1px solid #d4e7dc;border-radius:8px}.meta-item{overflow-wrap:anywhere}.meta-label{display:block;margin-bottom:2px;color:#68756d;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.answer-section{margin:22px 0 0;break-inside:auto}.answer-section h2{margin:0;padding:9px 12px;background:#16003b;color:#fff;font-size:14px;break-after:avoid}.answer-row{padding:10px 12px;border-bottom:1px solid #dfe8e2;break-inside:avoid}.answer-label{margin-bottom:4px;color:#59685f;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.answer-value{white-space:pre-wrap;overflow-wrap:anywhere;color:#15221a}.footer{margin-top:28px;padding-top:10px;border-top:1px solid #dfe8e2;color:#68756d;font-size:9px;display:flex;justify-content:space-between;gap:12px}.empty{padding:24px;color:#68756d;text-align:center}@media print{.answer-section h2{break-after:avoid}.answer-row{break-inside:avoid}}
  </style></head><body>
  <header class="topbar"><div class="brand"><img src="${cfPrintEscape(brandLogo)}" alt="NEXT logo"><div><div class="brand-name">NEXT</div><div class="brand-caption">Digital Operating System</div></div></div>${logoMarkup}</header>
  <main><h1 class="title">${cfPrintEscape(title || 'Client response')}</h1><p class="subtitle">${cfPrintEscape(company || 'Client submission')}</p>
  <div class="meta"><div class="meta-item"><span class="meta-label">Contact</span>${cfPrintEscape(contact || 'Not provided')}</div><div class="meta-item"><span class="meta-label">Submitted</span>${cfPrintEscape(submitted)}</div><div class="meta-item"><span class="meta-label">Status</span>${cfPrintEscape(status || 'Received')}</div><div class="meta-item"><span class="meta-label">Reference</span>${cfPrintEscape(reference || 'Not available')}</div></div>
  ${sectionMarkup || '<div class="empty">No answers were included in this response.</div>'}</main>
  <footer class="footer"><span>NEXT Africa · Client response</span><span>${cfPrintEscape(reference || '')}</span></footer>
  <script>window.addEventListener('load',function(){window.focus();window.print();},{once:true});</script></body></html>`);
  printWindow.document.close();
}

function cfExportFormResponse(form, response) {
  const sections = [{
    title: 'Client answers',
    answers: (form.fields || []).map(field => ({ label: field.label, type: field.type, value: response.answers?.[field.id] })),
  }];
  cfOpenResponsePdf({
    title: form.title || 'Client form response',
    company: cfClientName(form, response) || 'Client submission',
    submittedAt: response.submittedAt,
    status: response.seen ? 'Reviewed' : 'New response',
    reference: response.id,
    sections,
  });
}

async function cfDiscoveryClientLogo(submission) {
  const answers = (submission.answers?.sections || []).flatMap(section => section.answers || []);
  const logoAnswer = answers.find(answer => answer.type === 'file' && /logo/i.test(answer.label || ''));
  const file = (Array.isArray(logoAnswer?.value) ? logoAnswer.value : []).find(item =>
    typeof item?.path === 'string' && item.path.startsWith(`${submission.id}/`) &&
    /^[-a-f0-9]{36}\/[-a-f0-9]{36}\.(png|jpe?g|webp|gif)$/i.test(item.path));
  if (!file) return '';

  try {
    const sb = await getSb();
    const { data, error } = await sb.storage.from('discovery-uploads').download(file.path);
    if (error || !data) return '';
    return await new Promise(resolve => {
      const reader = new FileReader();
      reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '');
      reader.onerror = () => resolve('');
      reader.readAsDataURL(data);
    });
  } catch (error) {
    return '';
  }
}

async function cfExportDiscoverySubmission(submission) {
  // Open the print tab before awaiting storage so browsers do not block the popup.
  const printWindow = window.open('', '_blank');
  if (!printWindow) throw new Error('Allow pop-ups for NEXT OS to export this response as a PDF.');
  printWindow.document.write('<!doctype html><title>Preparing client response…</title><p style="font:16px Arial;padding:24px">Preparing the branded response PDF…</p>');
  try {
    const clientLogo = await cfDiscoveryClientLogo(submission);
    const sections = (Array.isArray(submission.answers?.sections) ? submission.answers.sections : []).map(section => ({
      title: section.title,
      answers: Array.isArray(section.answers) ? section.answers : [],
    }));
    cfOpenResponsePdf({
      title: 'Project discovery response',
      company: submission.client_company,
      contact: [submission.contact_name, submission.contact_email, submission.contact_phone].filter(Boolean).join(' · '),
      submittedAt: submission.created_at,
      status: submission.status,
      reference: submission.id,
      sections,
      clientLogo,
    }, printWindow);
  } catch (error) {
    printWindow.close();
    throw error;
  }
}

async function cfSaveForm(form) {
  const sb = await getSb();
  const { id, title, description, fields, status } = form;
  let result;
  if (id.startsWith('draft-')) {
    result = await sb.from('os_forms').insert({ title, description, fields, status });
  } else {
    result = await sb.from('os_forms').update({ title, description, fields, status }).eq('id', id);
  }
  if (result.error) throw new Error(`Could not save the form: ${result.error.message}`);
}

async function cfDeleteForm(id) {
  const sb = await getSb();
  const { error } = await sb.from('os_forms').delete().eq('id', id);
  if (error) throw new Error(`Could not delete the form: ${error.message}`);
}

async function cfMarkSeen(responseId) {
  const sb = await getSb();
  const { error } = await sb.from('os_form_responses').update({ seen: true }).eq('id', responseId);
  if (error) throw new Error(`Could not mark the response as read: ${error.message}`);
}

const CF_RUNTIME = window.__NEXT_OS_FORMS_RUNTIME || (window.__NEXT_OS_FORMS_RUNTIME = {
  channel: null,
  pollTimer: null,
  starting: false,
  baselineReady: false,
  baselineIds: new Set(),
  notifiedIds: new Set(),
  discoveryBaselineIds: new Set(),
  discoveryNotifiedIds: new Set(),
  discovery: { submissions: [], count: 0, error: '' },
  status: 'CLOSED',
  authSubscription: null,
});

function cfIsAdmin(session) {
  const email = String(session?.user?.email || '').trim().toLowerCase();
  return session?.user?.app_metadata?.role === 'nextos_admin' ||
    email === 'hudson.tim.uk@gmail.com' || email === 'patrickemma143@gmail.com';
}

function cfClientName(form, response) {
  const fields = form?.fields || [];
  const nameField = fields.find(field => /\bname\b/i.test(field.label || ''));
  const value = nameField && response?.answers?.[nameField.id];
  return typeof value === 'string' ? value.trim().slice(0, 80) : '';
}

function cfDispatchChange(detail) {
  window.dispatchEvent(new CustomEvent('nextos:forms-changed', { detail: detail || {} }));
}

function cfAnnounceResponse(response, form) {
  if (!response?.id || CF_RUNTIME.notifiedIds.has(response.id)) return;
  CF_RUNTIME.notifiedIds.add(response.id);
  const name = cfClientName(form, response);
  const formTitle = form?.title || 'Client form';
  const message = `${name || 'A client'} submitted “${formTitle}”.`;
  cfDispatchChange({ type: 'response', responseId: response.id, formTitle, clientName: name });
  if (window.NEXT_OS?.notify) {
    window.NEXT_OS.notify({
      severity: 'success',
      title: 'New client form response',
      body: message,
      source: 'Communications',
      actionUrl: 'os://comms',
      actionLabel: 'View response',
      dedupeKey: `client-form-response:${response.id}`,
    });
  }
}

function cfAnnounceDiscoverySubmission(submission) {
  if (!submission?.id || CF_RUNTIME.discoveryNotifiedIds.has(submission.id)) return;
  CF_RUNTIME.discoveryNotifiedIds.add(submission.id);
  const client = [submission.contact_name, submission.client_company].filter(Boolean).join(' · ');
  const message = `${client || 'A client'} submitted the Sembule Media discovery form.`;
  cfDispatchChange({ type: 'discovery-response', submissionId: submission.id, clientName: submission.contact_name, clientCompany: submission.client_company });
  if (window.NEXT_OS?.notify) {
    window.NEXT_OS.notify({
      severity: 'success',
      title: 'New discovery submission',
      body: message,
      source: 'Communications',
      actionUrl: 'os://comms',
      actionLabel: 'View submission',
      dedupeKey: `discovery-submission:${submission.id}`,
    });
  }
}

async function cfRefreshRuntime() {
  const forms = await cfLoadForms();
  let discovery = { submissions: [], count: 0, error: '' };
  try {
    discovery = await cfLoadDiscoveryInbox();
  } catch (error) {
    discovery.error = error.message || 'Could not load the discovery inbox.';
  }
  if (CF_RUNTIME.baselineReady) {
    forms.forEach(form => (form.responses || []).forEach(response => {
      if (!CF_RUNTIME.baselineIds.has(response.id)) cfAnnounceResponse(response, form);
    }));
    discovery.submissions.forEach(submission => {
      if (!CF_RUNTIME.discoveryBaselineIds.has(submission.id)) cfAnnounceDiscoverySubmission(submission);
    });
  }
  forms.forEach(form => (form.responses || []).forEach(response => CF_RUNTIME.baselineIds.add(response.id)));
  discovery.submissions.forEach(submission => CF_RUNTIME.discoveryBaselineIds.add(submission.id));
  CF_RUNTIME.discovery = discovery;
  CF_RUNTIME.baselineReady = true;
  cfDispatchChange({ type: 'refresh', discovery });
  return forms;
}

function cfStopRealtime(sb) {
  if (CF_RUNTIME.pollTimer) clearInterval(CF_RUNTIME.pollTimer);
  CF_RUNTIME.pollTimer = null;
  if (CF_RUNTIME.channel && sb) sb.removeChannel(CF_RUNTIME.channel);
  CF_RUNTIME.channel = null;
  CF_RUNTIME.starting = false;
  CF_RUNTIME.baselineReady = false;
  CF_RUNTIME.baselineIds.clear();
  CF_RUNTIME.notifiedIds.clear();
  CF_RUNTIME.discoveryBaselineIds.clear();
  CF_RUNTIME.discoveryNotifiedIds.clear();
  CF_RUNTIME.discovery = { submissions: [], count: 0, error: '' };
  CF_RUNTIME.status = 'CLOSED';
}

async function cfStartRealtime(sb) {
  if (CF_RUNTIME.channel || CF_RUNTIME.starting) return;
  CF_RUNTIME.starting = true;
  try {
    const { data: authData, error: authError } = await sb.auth.getSession();
    if (authError) throw authError;
    if (!cfIsAdmin(authData.session)) {
      CF_RUNTIME.starting = false;
      return;
    }
    await cfRefreshRuntime();
    CF_RUNTIME.pollTimer = setInterval(() => {
      cfRefreshRuntime().catch(error => console.warn('[NEXT OS] Communications refresh failed:', error));
    }, 15000);
    CF_RUNTIME.channel = sb.channel('os_forms_channel')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'os_forms' }, () => {
        cfRefreshRuntime().catch(error => console.warn('[NEXT OS] Form refresh failed:', error));
      })
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'os_form_responses' }, async payload => {
        try {
          const forms = await cfRefreshRuntime();
          const form = forms.find(item => item.id === payload.new?.form_id);
          const response = (form?.responses || []).find(item => item.id === payload.new?.id) || payload.new;
          cfAnnounceResponse(response, form);
        } catch (error) {
          console.warn('[NEXT OS] Could not refresh after a client response:', error);
        }
      })
      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'discovery_submissions' }, async payload => {
        try {
          await cfRefreshRuntime();
          const submission = CF_RUNTIME.discovery.submissions.find(item => item.id === payload.new?.id) || payload.new;
          cfAnnounceDiscoverySubmission(submission);
        } catch (error) {
          console.warn('[NEXT OS] Could not refresh after a discovery submission:', error);
        }
      })
      .subscribe(status => {
        CF_RUNTIME.status = status;
        cfDispatchChange({ type: 'connection', status });
      });
  } catch (error) {
    CF_RUNTIME.starting = false;
    throw error;
  }
  CF_RUNTIME.starting = false;
}

// Keep response notifications active while the app is open, even off the
// Communications route. Client submissions remain public; admin reads do not.
getSb().then(async sb => {
  const { data, error } = await sb.auth.getSession();
  if (error) throw error;
  if (cfIsAdmin(data.session)) cfStartRealtime(sb);
  if (!CF_RUNTIME.authSubscription) {
    const { data: authState } = sb.auth.onAuthStateChange((_event, session) => {
      setTimeout(() => {
        if (cfIsAdmin(session)) cfStartRealtime(sb).catch(error => console.warn('[NEXT OS] Communications realtime unavailable:', error));
        else cfStopRealtime(sb);
      }, 0);
    });
    CF_RUNTIME.authSubscription = authState.subscription;
  }
}).catch(error => console.warn('[NEXT OS] Communications background listener unavailable:', error));

/* ─── field type configs ─── */
const FIELD_TYPES = [
  { type: 'text',     label: 'Short Text',   icon: '✏️' },
  { type: 'textarea', label: 'Long Text',    icon: '📝' },
  { type: 'email',    label: 'Email',        icon: '📧' },
  { type: 'phone',    label: 'Phone',        icon: '📱' },
  { type: 'number',   label: 'Number',       icon: '🔢' },
  { type: 'select',   label: 'Dropdown',     icon: '▾' },
  { type: 'radio',    label: 'Choice',       icon: '⊙' },
  { type: 'date',     label: 'Date',         icon: '📅' },
];

/* ─── colours ─── */
const C = {
  mint:        'var(--mint)',
  mintGlow:    'var(--mint-glow)',
  elevated:    'var(--bg-elevated)',
  surface:     'var(--bg-surface)',
  border:      'var(--border-subtle)',
  borderDef:   'var(--border-default)',
  textPrim:    'var(--text-primary)',
  textSec:     'var(--text-secondary)',
  textTer:     'var(--text-tertiary)',
  danger:      'var(--danger)',
  gold:        'var(--gold)',
  info:        'var(--info)',
};

/* ─── status badge ─── */
const StatusBadge = ({ status }) => {
  const map = {
    draft:    { color: C.textTer,  bg: 'rgba(255,255,255,0.06)', label: 'Draft' },
    active:   { color: C.mint,     bg: 'rgba(0,252,143,0.12)',   label: 'Active' },
    closed:   { color: C.gold,     bg: 'rgba(255,180,0,0.1)',    label: 'Closed' },
  };
  const s = map[status] || map.draft;
  return (
    <span style={{
      fontSize: 11, fontFamily: 'var(--font-mono)',
      color: s.color, background: s.bg,
      padding: '2px 8px', borderRadius: 999, fontWeight: 500,
    }}>
      {s.label}
    </span>
  );
};

/* ─── field editor row ─── */
const FieldEditor = ({ field, index, total, onChange, onRemove, onMove }) => {
  const [open, setOpen] = React.useState(false);

  const s = {
    wrap: {
      background: C.surface,
      border: `1px solid ${C.border}`,
      borderRadius: 10, marginBottom: 8,
      overflow: 'hidden',
    },
    header: {
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 14px', cursor: 'pointer',
    },
    drag: {
      color: C.textTer, fontSize: 16, cursor: 'grab', userSelect: 'none',
    },
    label: {
      flex: 1, fontSize: 13, fontWeight: 500, color: C.textPrim,
    },
    typeTag: {
      fontSize: 10, fontFamily: 'var(--font-mono)',
      color: C.textTer,
      padding: '2px 6px', borderRadius: 4,
      background: 'rgba(255,255,255,0.06)',
    },
    body: {
      padding: '0 14px 14px',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
    },
    inp: {
      width: '100%', background: C.elevated,
      border: `1px solid ${C.border}`, borderRadius: 7,
      color: C.textPrim, fontFamily: 'var(--font-body)',
      fontSize: 13, padding: '7px 10px', outline: 'none',
    },
    fullRow: { gridColumn: '1 / -1' },
    lbl: { fontSize: 11, color: C.textTer, marginBottom: 4, display: 'block' },
    iconBtn: {
      background: 'none', border: 'none', cursor: 'pointer',
      color: C.textTer, fontSize: 14, padding: '4px 6px', borderRadius: 5,
    },
  };

  return (
    <div style={s.wrap}>
      <div style={s.header} onClick={() => setOpen(o => !o)}>
        <span style={s.drag}>⠿</span>
        <span style={s.label}>{field.label || <em style={{ color: C.textTer }}>Untitled field</em>}</span>
        <span style={s.typeTag}>{field.type}</span>
        {field.required && <span style={{ ...s.typeTag, color: C.danger }}>required</span>}
        <button style={s.iconBtn} onClick={e => { e.stopPropagation(); onMove(index, -1); }} disabled={index === 0} title="Move up">▲</button>
        <button style={s.iconBtn} onClick={e => { e.stopPropagation(); onMove(index, 1); }} disabled={index === total - 1} title="Move down">▼</button>
        <button style={{ ...s.iconBtn, color: C.danger }} onClick={e => { e.stopPropagation(); onRemove(index); }} title="Remove">✕</button>
        <span style={{ color: C.textTer, fontSize: 12 }}>{open ? '▾' : '▸'}</span>
      </div>

      {open && (
        <div style={s.body}>
          <div>
            <span style={s.lbl}>Field label *</span>
            <input style={s.inp} value={field.label} onChange={e => onChange(index, 'label', e.target.value)} placeholder="e.g. Company Name" />
          </div>
          <div>
            <span style={s.lbl}>Field type</span>
            <select style={s.inp} value={field.type} onChange={e => onChange(index, 'type', e.target.value)}>
              {FIELD_TYPES.map(ft => <option key={ft.type} value={ft.type}>{ft.icon} {ft.label}</option>)}
            </select>
          </div>
          <div>
            <span style={s.lbl}>Placeholder text</span>
            <input style={s.inp} value={field.placeholder || ''} onChange={e => onChange(index, 'placeholder', e.target.value)} placeholder="Hint shown to client" />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 20 }}>
            <input type="checkbox" id={`req-${field.id}`} checked={!!field.required} onChange={e => onChange(index, 'required', e.target.checked)} style={{ accentColor: C.mint }} />
            <label htmlFor={`req-${field.id}`} style={{ fontSize: 13, color: C.textSec, cursor: 'pointer' }}>Required</label>
          </div>
          {(field.type === 'select' || field.type === 'radio') && (
            <div style={s.fullRow}>
              <span style={s.lbl}>Options (one per line)</span>
              <textarea
                style={{ ...s.inp, minHeight: 80, resize: 'vertical' }}
                value={(field.options || []).join('\n')}
                onChange={e => onChange(index, 'options', e.target.value.split('\n'))}
                placeholder={"Option A\nOption B\nOption C"}
              />
            </div>
          )}
        </div>
      )}
    </div>
  );
};

/* ─── Form Builder modal ─── */
const FormBuilder = ({ form, onSave, onCancel }) => {
  const [draft, setDraft] = React.useState(() => form || {
    id: 'draft-' + cfUid(), title: '', description: '', fields: [], status: 'draft',
    created: new Date().toISOString(), responses: [],
  });

  const updateDraft = (k, v) => setDraft(d => ({ ...d, [k]: v }));

  const addField = (type) => {
    const f = { id: cfUid(), type, label: '', placeholder: '', required: false };
    setDraft(d => ({ ...d, fields: [...d.fields, f] }));
  };
  const updateField = (idx, k, v) => {
    setDraft(d => {
      const fields = [...d.fields];
      fields[idx] = { ...fields[idx], [k]: v };
      return { ...d, fields };
    });
  };
  const removeField = (idx) => setDraft(d => ({ ...d, fields: d.fields.filter((_, i) => i !== idx) }));
  const moveField = (idx, dir) => {
    setDraft(d => {
      const fields = [...d.fields];
      const newIdx = idx + dir;
      if (newIdx < 0 || newIdx >= fields.length) return d;
      [fields[idx], fields[newIdx]] = [fields[newIdx], fields[idx]];
      return { ...d, fields };
    });
  };

  const s = {
    overlay: {
      position: 'fixed', inset: 0, zIndex: 1000,
      background: 'rgba(6,0,18,0.85)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: '40px 16px', overflowY: 'auto',
    },
    modal: {
      background: C.elevated, border: `1px solid ${C.borderDef}`,
      borderRadius: 16, width: '100%', maxWidth: 680,
      boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
    },
    header: {
      padding: '24px 28px 16px',
      borderBottom: `1px solid ${C.border}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    },
    title: { fontSize: 18, fontWeight: 700, fontFamily: 'var(--font-display)' },
    body: { padding: 28 },
    inp: {
      width: '100%', background: C.surface,
      border: `1px solid ${C.border}`, borderRadius: 8,
      color: C.textPrim, fontFamily: 'var(--font-body)',
      fontSize: 14, padding: '9px 12px', outline: 'none',
      marginBottom: 14,
    },
    lbl: { fontSize: 12, color: C.textTer, display: 'block', marginBottom: 5, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em' },
    section: { fontSize: 13, fontWeight: 600, color: C.mint, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 12, marginTop: 24 },
    fieldTypes: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
    typeBtn: {
      background: C.surface, border: `1px solid ${C.border}`,
      borderRadius: 8, padding: '6px 12px', cursor: 'pointer',
      fontSize: 12, color: C.textSec,
      display: 'flex', alignItems: 'center', gap: 5,
      transition: 'all 0.15s',
    },
    footer: {
      padding: '16px 28px', borderTop: `1px solid ${C.border}`,
      display: 'flex', gap: 10, justifyContent: 'flex-end',
    },
    btnPrimary: {
      background: C.mint, color: '#060012', fontWeight: 700,
      border: 'none', borderRadius: 8, padding: '10px 24px',
      cursor: 'pointer', fontSize: 14,
    },
    btnSecondary: {
      background: 'transparent', color: C.textSec,
      border: `1px solid ${C.border}`, borderRadius: 8,
      padding: '10px 24px', cursor: 'pointer', fontSize: 14,
    },
  };

  return (
    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onCancel()}>
      <div style={s.modal}>
        <div style={s.header}>
          <span style={s.title}>{form ? 'Edit Form' : 'New Client Form'}</span>
          <button style={{ background: 'none', border: 'none', color: C.textTer, fontSize: 20, cursor: 'pointer' }} onClick={onCancel}>✕</button>
        </div>
        <div style={s.body}>
          <label style={s.lbl}>Form title *</label>
          <input style={s.inp} value={draft.title} onChange={e => updateDraft('title', e.target.value)} placeholder="e.g. Client Onboarding — NEXT Schools OS" />

          <label style={s.lbl}>Description (shown to client)</label>
          <textarea style={{ ...s.inp, minHeight: 70, resize: 'vertical' }} value={draft.description} onChange={e => updateDraft('description', e.target.value)} placeholder="Tell the client what this form is for and how long it takes." />

          <div style={s.section}>Fields</div>

          {draft.fields.length === 0 && (
            <div style={{ textAlign: 'center', padding: '20px 0', color: C.textTer, fontSize: 13 }}>
              No fields yet. Add a field type below.
            </div>
          )}

          {draft.fields.map((f, i) => (
            <FieldEditor
              key={f.id} field={f} index={i} total={draft.fields.length}
              onChange={updateField} onRemove={removeField} onMove={moveField}
            />
          ))}

          <div style={s.fieldTypes}>
            {FIELD_TYPES.map(ft => (
              <button key={ft.type} style={s.typeBtn} onClick={() => addField(ft.type)}>
                {ft.icon} {ft.label}
              </button>
            ))}
          </div>
        </div>
        <div style={s.footer}>
          <button style={s.btnSecondary} onClick={onCancel}>Cancel</button>
          <button style={s.btnPrimary} onClick={() => {
            if (!draft.title.trim()) { alert('Please give the form a title.'); return; }
            if (draft.fields.length === 0) { alert('Add at least one field.'); return; }
            onSave(draft);
          }}>
            {form ? 'Save Changes' : 'Create Form'}
          </button>
        </div>
      </div>
    </div>
  );
};

/* ─── Share link panel ─── */
const ShareModal = ({ form, onClose }) => {
  const [copied, setCopied] = React.useState(false);
  const baseUrl = window.location.origin + window.location.pathname.replace(/[^/]*$/, '');
  const shareUrl = form.isDiscovery
    ? `${baseUrl}discovery/discovery.html`
    : `${baseUrl}client-form.html?id=${form.id}`;

  const copy = () => {
    navigator.clipboard.writeText(shareUrl).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  const s = {
    overlay: {
      position: 'fixed', inset: 0, zIndex: 1001,
      background: 'rgba(6,0,18,0.85)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
    },
    modal: {
      background: C.elevated, border: `1px solid ${C.borderDef}`,
      borderRadius: 16, maxWidth: 560, width: '100%',
      boxShadow: '0 24px 80px rgba(0,0,0,0.6)', padding: 32,
    },
    urlBox: {
      background: C.surface, border: `1px solid ${C.border}`,
      borderRadius: 10, padding: '12px 16px',
      fontFamily: 'var(--font-mono)', fontSize: 11,
      color: C.textSec, wordBreak: 'break-all',
      userSelect: 'all', marginTop: 12, marginBottom: 20,
    },
    copyBtn: {
      width: '100%', background: copied ? 'rgba(0,252,143,0.15)' : C.mint,
      color: copied ? C.mint : '#060012',
      border: copied ? `1px solid ${C.mint}` : 'none',
      borderRadius: 10, padding: '12px', cursor: 'pointer',
      fontWeight: 700, fontSize: 14,
    },
    note: { fontSize: 12, color: C.textTer, textAlign: 'center', marginTop: 12 },
  };

  return (
    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={s.modal}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700 }}>Share Form</div>
            <div style={{ fontSize: 13, color: C.textSec, marginTop: 4 }}>{form.title}</div>
          </div>
          <button style={{ background: 'none', border: 'none', color: C.textTer, fontSize: 20, cursor: 'pointer' }} onClick={onClose}>✕</button>
        </div>
        <div style={{ fontSize: 13, color: C.textSec, lineHeight: 1.6 }}>
          Share this link with your client. When they fill in the form, their response appears directly in this panel.
        </div>
        <div style={s.urlBox}>{shareUrl}</div>
        <button style={s.copyBtn} onClick={copy}>
          {copied ? '✓ Copied to clipboard!' : '⎘ Copy shareable link'}
        </button>
        <div style={s.note}>
          The client can open this link without signing in. Their response is saved to the shared database and appears in Communications.
        </div>
      </div>
    </div>
  );
};

/* ─── Response viewer modal ─── */
const ResponsesModal = ({ form, onClose }) => {
  const [exportError, setExportError] = React.useState('');
  const s = {
    overlay: {
      position: 'fixed', inset: 0, zIndex: 1001,
      background: 'rgba(6,0,18,0.85)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: '40px 16px', overflowY: 'auto',
    },
    modal: {
      background: C.elevated, border: `1px solid ${C.borderDef}`,
      borderRadius: 16, maxWidth: 680, width: '100%',
      boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
    },
    header: {
      padding: '24px 28px', borderBottom: `1px solid ${C.border}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    },
    body: { padding: 28 },
    responseCard: {
      background: C.surface, border: `1px solid ${C.border}`,
      borderRadius: 12, padding: '18px 20px', marginBottom: 14,
    },
    answerRow: {
      marginBottom: 14,
    },
    qLabel: { fontSize: 11, fontWeight: 600, color: C.textTer, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 },
    aValue: { fontSize: 14, color: C.textPrim, lineHeight: 1.5 },
    timestamp: { fontSize: 11, fontFamily: 'var(--font-mono)', color: C.textTer, marginBottom: 14 },
    exportButton: { background: 'rgba(0,252,143,0.1)', border: '1px solid rgba(0,252,143,0.3)', color: C.mint, borderRadius: 7, padding: '6px 10px', cursor: 'pointer', fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap' },
  };

  const responses = form.responses || [];

  return (
    <div style={s.overlay} onClick={e => e.target === e.currentTarget && onClose()}>
      <div style={s.modal}>
        <div style={s.header}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700 }}>
              Responses — {form.title}
            </div>
            <div style={{ fontSize: 13, color: C.textSec, marginTop: 4 }}>
              {responses.length} response{responses.length !== 1 ? 's' : ''} received
            </div>
          </div>
          <button style={{ background: 'none', border: 'none', color: C.textTer, fontSize: 20, cursor: 'pointer' }} onClick={onClose}>✕</button>
        </div>
        <div style={s.body}>
          {exportError && <div role="alert" style={{ color: '#ff9b9b', marginBottom: 14 }}>{exportError}</div>}
          {responses.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '40px 0', color: C.textTer, fontSize: 14 }}>
              <div style={{ fontSize: 32, marginBottom: 12 }}>📭</div>
              No responses yet. Share the form link with your client.
            </div>
          ) : [...responses].reverse().map((resp, i) => (
            <div key={resp.id || i} style={s.responseCard}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
                <div style={s.timestamp}>Submitted {new Date(resp.submittedAt).toLocaleString()}</div>
                <button style={s.exportButton} onClick={() => {
                  setExportError('');
                  try { cfExportFormResponse(form, resp); } catch (error) { setExportError(error.message || 'Could not export this response.'); }
                }}>Export PDF</button>
              </div>
              {form.fields.map(field => (
                <div key={field.id} style={s.answerRow}>
                  <div style={s.qLabel}>{field.label}</div>
                  <div style={s.aValue}>
                    {resp.answers?.[field.id] === undefined || resp.answers?.[field.id] === null || resp.answers?.[field.id] === ''
                      ? <em style={{ color: C.textTer }}>—</em>
                      : cfPrintAnswerValue({ type: field.type, value: resp.answers[field.id] })}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ─── Sembule discovery inbox ─── */
const DiscoveryFormCard = ({ count, ready, error, onShare, onView }) => {
  const s = {
    card: { background: C.elevated, border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 22px', display: 'flex', alignItems: 'flex-start', gap: 16 },
    icon: { width: 44, height: 44, borderRadius: 10, background: 'rgba(0,252,143,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 },
    title: { fontWeight: 600, fontSize: 15, color: C.textPrim, marginBottom: 4 },
    desc: { fontSize: 12, color: C.textTer, lineHeight: 1.5, marginBottom: 10 },
    meta: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' },
    metaItem: { fontSize: 11, fontFamily: 'var(--font-mono)', color: C.textTer },
    actionRow: { display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' },
    btn: accent => ({ background: accent ? 'rgba(0,252,143,0.1)' : 'rgba(255,255,255,0.05)', border: `1px solid ${accent ? 'rgba(0,252,143,0.3)' : C.border}`, color: accent ? C.mint : C.textSec, borderRadius: 7, padding: '6px 12px', cursor: ready ? 'pointer' : 'not-allowed', fontSize: 12, fontWeight: 500, opacity: ready ? 1 : 0.55 }),
  };
  return (
    <div style={s.card} className="project-card">
      <div style={s.icon}>🧭</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
          <div style={s.title}>Sembule Media — Project Discovery</div>
          {ready ? <StatusBadge status="active" /> : <span style={{ fontSize: 10, fontWeight: 600, color: '#ffcc66', border: '1px solid rgba(255,204,102,0.3)', borderRadius: 6, padding: '3px 8px' }}>Setup required</span>}
        </div>
        <div style={s.desc}>Tony’s guided discovery: company, brand, website, operations, systems, and supporting files. Progress saves on the client’s device.</div>
        <div style={s.meta}>
          <span style={s.metaItem}>Multi-section · file uploads · save and resume</span>
          <span style={s.metaItem}>{count} submission{count !== 1 ? 's' : ''}</span>
        </div>
        {error && <div role="status" style={{ ...s.desc, color: C.warn || '#ffcc66', marginTop: 8, marginBottom: 0 }}>Submission inbox setup required: {error}</div>}
        <div style={s.actionRow}>
          <button style={s.btn(true)} disabled={!ready} onClick={onShare}>🔗 Share discovery form</button>
          <button style={s.btn(false)} disabled={!ready} onClick={onView}>📥 View submissions</button>
        </div>
      </div>
    </div>
  );
};

const DiscoveryInboxModal = ({ submissions, count, selected, error, onSelect, onDownload, onClose }) => {
  const [downloadError, setDownloadError] = React.useState('');
  const [exportError, setExportError] = React.useState('');
  const [exporting, setExporting] = React.useState(false);
  const s = {
    overlay: { position: 'fixed', inset: 0, zIndex: 1002, background: 'rgba(6,0,18,0.85)', backdropFilter: 'blur(6px)', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '24px 16px', overflowY: 'auto' },
    modal: { background: C.elevated, border: `1px solid ${C.borderDef}`, borderRadius: 16, maxWidth: 1120, width: '100%', minHeight: 360, boxShadow: '0 24px 80px rgba(0,0,0,0.6)', overflow: 'hidden' },
    header: { padding: '20px 24px', borderBottom: `1px solid ${C.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
    layout: { display: 'grid', gridTemplateColumns: 'minmax(220px, 300px) 1fr', minHeight: 320 },
    list: { borderRight: `1px solid ${C.border}`, maxHeight: '70vh', overflowY: 'auto', padding: 12 },
    item: active => ({ width: '100%', textAlign: 'left', padding: 12, marginBottom: 8, borderRadius: 8, border: `1px solid ${active ? 'rgba(0,252,143,0.35)' : C.border}`, background: active ? 'rgba(0,252,143,0.08)' : 'transparent', color: C.textPrim, cursor: 'pointer' }),
    detail: { padding: 24, maxHeight: '70vh', overflowY: 'auto' },
    section: { borderTop: `1px solid ${C.border}`, paddingTop: 14, marginTop: 18 },
    answer: { padding: '10px 0', borderBottom: `1px solid ${C.border}` },
    label: { fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.05em', color: C.textTer, marginBottom: 4 },
    value: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', fontSize: 13, color: C.textPrim, lineHeight: 1.55 },
    exportButton: { background: 'rgba(0,252,143,0.1)', border: '1px solid rgba(0,252,143,0.3)', color: C.mint, borderRadius: 7, padding: '7px 11px', cursor: exporting ? 'wait' : 'pointer', fontSize: 12, fontWeight: 600, opacity: exporting ? 0.65 : 1 },
  };
  const renderValue = (answer, submissionId) => {
    const value = answer?.value;
    if (answer?.type === 'file') {
      const files = Array.isArray(value) ? value : [];
      return files.length ? files.map((file, index) => (
        <button key={`${file.path || file.name}-${index}`} style={{ ...s.item(false), width: 'auto', display: 'inline-flex', gap: 8, alignItems: 'center', marginRight: 8 }} onClick={async () => {
          setDownloadError('');
          try { await onDownload(submissionId, file); } catch (err) { setDownloadError(err.message || 'Download failed.'); }
        }}>⬇ {file.name || 'Attachment'} <span style={{ color: C.textTer }}>{Math.max(1, Math.round(Number(file.size || 0) / 1024))} KB</span></button>
      )) : <span style={{ color: C.textTer }}>No file attached</span>;
    }
    if (value === null || value === undefined || value === '') return <span style={{ color: C.textTer }}>Not provided</span>;
    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
    if (Array.isArray(value)) {
      if (value.every(item => item && typeof item === 'object')) return value.map((item, index) => (
        <div key={index} style={{ padding: 8, marginTop: 6, borderRadius: 6, background: 'rgba(255,255,255,0.035)' }}>
          {Object.entries(item).map(([key, cell]) => <div key={key}><strong>{key}: </strong>{String(cell ?? '')}</div>)}
        </div>
      ));
      return value.join(' · ');
    }
    if (typeof value === 'object') return <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>{JSON.stringify(value, null, 2)}</pre>;
    return String(value);
  };
  return (
    <div style={s.overlay} onClick={event => event.target === event.currentTarget && onClose()}>
      <div style={s.modal}>
        <div style={s.header}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700 }}>Sembule Media discovery submissions</div><div style={{ color: C.textTer, fontSize: 12, marginTop: 4 }}>{count} total · newest first</div></div>
          <button style={{ background: 'none', border: 'none', color: C.textTer, fontSize: 20, cursor: 'pointer' }} onClick={onClose}>✕</button>
        </div>
        {error ? <div role="alert" style={{ padding: 20, color: '#ff9b9b' }}>{error}</div> : (
          <div style={s.layout}>
            <div style={s.list}>
              {!submissions.length && <div style={{ color: C.textTer, padding: 12 }}>No submissions yet.</div>}
              {submissions.map(item => <button key={item.id} style={s.item(selected?.id === item.id)} onClick={() => onSelect(item.id)}>
                <strong>{item.client_company || 'Unnamed company'}</strong><br />
                <span style={{ fontSize: 12, color: C.textSec }}>{item.contact_name || 'Unknown contact'}</span><br />
                <span style={{ fontSize: 10, color: C.textTer }}>{new Date(item.created_at).toLocaleString()} · {item.status}</span>
              </button>)}
            </div>
            <div style={s.detail}>
              {!selected ? <div style={{ color: C.textTer }}>Choose a submission to review the answers.</div> : <>
                <h2 style={{ margin: '0 0 6px', fontSize: 21 }}>{selected.client_company}</h2>
                <div style={{ color: C.textSec, fontSize: 13 }}>{selected.contact_name} · {selected.contact_email} · {selected.contact_phone}</div>
                <div style={{ color: C.textTer, fontSize: 11, marginTop: 5 }}>Submitted {new Date(selected.created_at).toLocaleString()} · {selected.status}</div>
                <button style={{ ...s.exportButton, marginTop: 14 }} disabled={exporting} onClick={async () => {
                  setExportError('');
                  setExporting(true);
                  try { await cfExportDiscoverySubmission(selected); } catch (err) { setExportError(err.message || 'Could not export this submission.'); }
                  finally { setExporting(false); }
                }}>{exporting ? 'Preparing PDF…' : 'Export PDF'}</button>
                {exportError && <div role="alert" style={{ color: '#ff9b9b', marginTop: 10 }}>{exportError}</div>}
                {downloadError && <div role="alert" style={{ color: '#ff9b9b', marginTop: 12 }}>{downloadError}</div>}
                {(Array.isArray(selected.answers?.sections) ? selected.answers.sections : []).map(section => <section key={section.id || section.title} style={s.section}>
                  <h3 style={{ margin: '0 0 8px', color: C.mint, fontSize: 14 }}>{section.title}</h3>
                  {(Array.isArray(section.answers) ? section.answers : []).map(answer => <div key={answer.id || answer.label} style={s.answer}>
                    <div style={s.label}>{answer.label}</div><div style={s.value}>{renderValue(answer, selected.id)}</div>
                  </div>)}
                </section>)}
              </>}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

/* ─── Form card ─── */
const FormCard = ({ form, onEdit, onShare, onViewResponses, onDelete, onToggleStatus }) => {
  const respCount = (form.responses || []).length;
  const hasNew = (form.responses || []).some(r => !r.seen);

  const s = {
    card: {
      background: C.elevated,
      border: `1px solid ${C.border}`,
      borderRadius: 12, padding: '20px 22px',
      display: 'flex', alignItems: 'flex-start', gap: 16,
      transition: 'border-color 0.2s',
      cursor: 'default',
    },
    icon: {
      width: 44, height: 44, borderRadius: 10,
      background: 'rgba(0,252,143,0.08)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 22, flexShrink: 0,
    },
    title: { fontWeight: 600, fontSize: 15, color: C.textPrim, marginBottom: 4 },
    desc: { fontSize: 12, color: C.textTer, lineHeight: 1.5, marginBottom: 10 },
    meta: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' },
    metaItem: { fontSize: 11, fontFamily: 'var(--font-mono)', color: C.textTer },
    actionRow: {
      display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap',
    },
    btn: (accent) => ({
      background: accent ? 'rgba(0,252,143,0.1)' : 'rgba(255,255,255,0.05)',
      border: `1px solid ${accent ? 'rgba(0,252,143,0.3)' : C.border}`,
      color: accent ? C.mint : C.textSec,
      borderRadius: 7, padding: '6px 12px', cursor: 'pointer',
      fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5,
    }),
    responsesPill: {
      display: 'flex', alignItems: 'center', gap: 6,
      background: hasNew ? 'rgba(0,252,143,0.12)' : 'rgba(255,255,255,0.05)',
      border: `1px solid ${hasNew ? 'rgba(0,252,143,0.3)' : C.border}`,
      borderRadius: 7, padding: '6px 12px', cursor: 'pointer',
      fontSize: 12, fontWeight: 500,
      color: hasNew ? C.mint : C.textSec,
    },
  };

  return (
    <div style={s.card} className="project-card">
      <div style={s.icon}>📋</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
          <div style={s.title}>{form.title}</div>
          <StatusBadge status={form.status} />
        </div>
        {form.description && <div style={s.desc}>{form.description}</div>}
        <div style={s.meta}>
          <span style={s.metaItem}>{form.fields.length} field{form.fields.length !== 1 ? 's' : ''}</span>
          <span style={s.metaItem}>Created {new Date(form.created).toLocaleDateString()}</span>
        </div>
        <div style={s.actionRow}>
          <button style={s.responsesPill} onClick={() => onViewResponses(form)}>
            {hasNew && <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.mint, display: 'inline-block' }} />}
            📥 {respCount} response{respCount !== 1 ? 's' : ''}
          </button>
          {form.status !== 'closed' && (
            <button style={s.btn(true)} onClick={() => onShare(form)}>🔗 Share Link</button>
          )}
          <button style={s.btn(false)} onClick={() => onEdit(form)}>✏️ Edit</button>
          <button style={s.btn(false)} onClick={() => onToggleStatus(form)}>
            {form.status === 'active' ? '🔒 Close' : '▶ Activate'}
          </button>
          <button style={{ ...s.btn(false), color: C.danger, borderColor: 'rgba(255,71,87,0.2)' }} onClick={() => onDelete(form.id)}>🗑</button>
        </div>
      </div>
    </div>
  );
};

/* ─── Activity feed entry ─── */
const ActivityEntry = ({ item }) => (
  <div style={{
    display: 'flex', gap: 12, padding: '10px 0',
    borderBottom: `1px solid ${C.border}`,
  }}>
    <span style={{ fontSize: 18 }}>{item.icon}</span>
    <div>
      <div style={{ fontSize: 13, color: C.textSec }}>{item.text}</div>
      <div style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: C.textTer, marginTop: 2 }}>
        {new Date(item.ts).toLocaleString()}
      </div>
    </div>
  </div>
);

/* Public client-facing form links; submissions remain private to authorized admins. */
const PublicClientFormsPanel = () => {
  const [forms, setForms] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState('');
  const [sharing, setSharing] = React.useState(null);

  React.useEffect(() => {
    let active = true;
    getSb().then(async sb => {
      const { data, error } = await sb.from('os_forms')
        .select('id,title,description,fields,status,created_at')
        .eq('status', 'active')
        .order('created_at', { ascending: false });
      if (!active) return;
      if (error) setLoadError(error.message || 'Could not load active client forms.');
      else setForms(data || []);
      setLoading(false);
    }).catch(error => {
      if (!active) return;
      setLoadError(error.message || 'Could not connect to the forms service.');
      setLoading(false);
    });
    return () => { active = false; };
  }, []);

  const page = { fontFamily: 'var(--font-body)' };
  const pageHeader = { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20, flexWrap: 'wrap', gap: 12 };
  const heading = { fontFamily: 'var(--font-display)', fontSize: 25, fontWeight: 800, color: C.textPrim };
  const subheading = { fontSize: 13, color: C.textSec, marginTop: 4 };
  const card = { background: C.elevated, border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 22px' };
  const secondaryButton = { background: 'transparent', border: `1px solid ${C.border}`, color: C.textSec, borderRadius: 8, padding: '8px 14px', cursor: 'pointer', fontSize: 12 };
  const button = { background: 'rgba(0,252,143,0.1)', border: '1px solid rgba(0,252,143,0.3)', color: C.mint, borderRadius: 7, padding: '8px 13px', cursor: 'pointer', fontSize: 12, fontWeight: 600 };

  return (
    <div style={page}>
      <div style={pageHeader}>
        <div>
          <div style={heading}>Forms for clients</div>
          <div style={subheading}>Open a form and share its link. Clients can fill it out without signing in.</div>
        </div>
        <div style={subheading}>View submitted client responses in Communications.</div>
      </div>

      <div style={{ display: 'grid', gap: 12 }}>
        <div style={card}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ width: 42, height: 42, borderRadius: 10, background: 'rgba(0,252,143,0.08)', display: 'grid', placeItems: 'center', fontSize: 21, flexShrink: 0 }}>🧭</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 15, fontWeight: 600, color: C.textPrim }}>Sembule Media — Project Discovery</div>
              <div style={{ fontSize: 12, color: C.textTer, lineHeight: 1.55, margin: '5px 0 12px' }}>Tony’s guided discovery form for company, brand, website, operations, systems, and supporting files.</div>
              <button style={button} onClick={() => setSharing({ id: 'sembule-discovery', title: 'Sembule Media — Project Discovery', isDiscovery: true })}>🔗 Share discovery form</button>
            </div>
          </div>
        </div>

        {loading && <div style={{ ...card, color: C.textTer, fontSize: 13 }}>Loading active client forms…</div>}
        {loadError && <div role="alert" style={{ ...card, color: '#ff9b9b', fontSize: 13 }}>Could not load other client forms: {loadError}</div>}
        {!loading && !loadError && forms.length === 0 && <div style={{ ...card, color: C.textTer, fontSize: 13 }}>No other active forms yet. The discovery form above is ready to share.</div>}
        {forms.map(form => (
          <div key={form.id} style={card}>
            <div style={{ fontSize: 15, fontWeight: 600, color: C.textPrim }}>{form.title}</div>
            {form.description && <div style={{ fontSize: 12, color: C.textTer, lineHeight: 1.55, margin: '5px 0 12px' }}>{form.description}</div>}
            <button style={button} onClick={() => setSharing(form)}>🔗 Share form</button>
          </div>
        ))}
      </div>

      <div style={{ ...card, marginTop: 16, fontSize: 12, color: C.textSec, lineHeight: 1.6 }}>
        Client responses and uploaded files are available to authorized NEXT OS accounts.
      </div>
      {sharing && <ShareModal form={sharing} onClose={() => setSharing(null)} />}
    </div>
  );
};

/* ─── Main Forms Page ─── */
const CommsPage = ({ onNavigate, embedded = false }) => {
  const [forms, setForms] = React.useState([]);
  const [discoverySubmissions, setDiscoverySubmissions] = React.useState(CF_RUNTIME.discovery.submissions || []);
  const [discoveryCount, setDiscoveryCount] = React.useState(CF_RUNTIME.discovery.count || 0);
  const [discoveryError, setDiscoveryError] = React.useState(CF_RUNTIME.discovery.error || '');
  const [discoveryLoading, setDiscoveryLoading] = React.useState(true);
  const [loading, setLoading] = React.useState(true);
  const [loadError, setLoadError] = React.useState('');
  const [session, setSession] = React.useState(null);
  const [authLoading, setAuthLoading] = React.useState(true);
  const [liveStatus, setLiveStatus] = React.useState(CF_RUNTIME.status);
  const [building, setBuilding] = React.useState(null);    // null | 'new' | form object (edit)
  const [sharing, setSharing] = React.useState(null);      // form to share
  const [viewing, setViewing] = React.useState(null);      // form whose responses to view
  const [discoveryInboxOpen, setDiscoveryInboxOpen] = React.useState(false);
  const [discoverySelected, setDiscoverySelected] = React.useState(null);
  const [activity, setActivity] = React.useState([]);
  const [search, setSearch] = React.useState('');
  const [filter, setFilter] = React.useState('all');

  const loadData = async () => {
    try {
      const data = await cfLoadForms();
      setForms(data);
      setLoadError('');
    } catch (error) {
      setLoadError(error.message || 'Could not load client forms and responses.');
    } finally {
      setLoading(false);
    }
    try {
      const inbox = await cfLoadDiscoveryInbox();
      setDiscoverySubmissions(inbox.submissions);
      setDiscoveryCount(inbox.count);
      setDiscoveryError('');
      CF_RUNTIME.discovery = inbox;
    } catch (error) {
      const message = error.message || 'Could not load the discovery inbox.';
      setDiscoverySubmissions([]);
      setDiscoveryCount(0);
      setDiscoveryError(message);
      CF_RUNTIME.discovery = { submissions: [], count: 0, error: message };
    } finally {
      setDiscoveryLoading(false);
    }
  };

  React.useEffect(() => {
    let active = true;
    let authSubscription;
    (async () => {
      const sb = await getSb();
      const { data, error } = await sb.auth.getSession();
      if (error) throw error;
      if (!active) return;
      setSession(data.session);
      setAuthLoading(false);
      if (cfIsAdmin(data.session)) cfStartRealtime(sb).catch(error => setLoadError(error.message));

      const { data: authState } = sb.auth.onAuthStateChange((_event, nextSession) => {
        if (!active) return;
        setSession(nextSession);
        setTimeout(() => {
          if (cfIsAdmin(nextSession)) cfStartRealtime(sb).catch(error => setLoadError(error.message));
          else cfStopRealtime(sb);
        }, 0);
      });
      authSubscription = authState.subscription;
    })().catch(error => {
      if (!active) return;
      setLoadError(error.message || 'Could not connect to Supabase authentication.');
      setAuthLoading(false);
      setLoading(false);
    });

    const onFormsChanged = event => {
      const detail = event.detail || {};
      if (detail.type === 'connection') setLiveStatus(detail.status);
      if (detail.type === 'response') {
        const who = detail.clientName ? `${detail.clientName} submitted` : 'A client submitted';
        setActivity(items => [{
          id: detail.responseId,
          icon: '📥', ts: new Date().toISOString(),
          text: `${who} “${detail.formTitle || 'a form'}”.`,
        }, ...items.filter(item => item.id !== detail.responseId)].slice(0, 20));
      }
      if (detail.type === 'discovery-response') {
        const who = [detail.clientName, detail.clientCompany].filter(Boolean).join(' from ');
        setActivity(items => [{
          id: detail.submissionId,
          icon: '🧭', ts: new Date().toISOString(),
          text: `${who || 'A client'} submitted the Sembule Media discovery form.`,
        }, ...items.filter(item => item.id !== detail.submissionId)].slice(0, 20));
      }
      if (detail.type === 'refresh') {
        if (Array.isArray(detail.forms)) setForms(detail.forms);
        if (detail.discovery) {
          setDiscoverySubmissions(detail.discovery.submissions || []);
          setDiscoveryCount(detail.discovery.count || 0);
          setDiscoveryError(detail.discovery.error || '');
        }
        setLoadError('');
      }
      if (detail.type === 'response') loadData();
    };
    window.addEventListener('nextos:forms-changed', onFormsChanged);
    return () => {
      active = false;
      window.removeEventListener('nextos:forms-changed', onFormsChanged);
      if (authSubscription) authSubscription.unsubscribe();
    };
  }, []);

  React.useEffect(() => {
    if (session) loadData();
    else setLoading(false);
  }, [session]);

  const handleSave = async (draft) => {
    try {
      await cfSaveForm(draft);
      if (draft.id.startsWith('draft-')) {
        setActivity(a => [{ icon: '🆕', ts: new Date().toISOString(), text: `Form created: "${draft.title}"` }, ...a].slice(0, 20));
      }
      await loadData();
      setBuilding(null);
    } catch (error) {
      setLoadError(error.message || 'Could not save the form.');
    }
  };

  const handleDelete = async (id) => {
    if (!confirm('Delete this form and all its responses?')) return;
    try { await cfDeleteForm(id); await loadData(); }
    catch (error) { setLoadError(error.message || 'Could not delete the form.'); }
  };

  const handleToggleStatus = async (form) => {
    const next = form.status === 'active' ? 'closed' : 'active';
    try {
      await cfSaveForm({ ...form, status: next });
      setActivity(a => [{ icon: next === 'active' ? '▶' : '🔒', ts: new Date().toISOString(), text: `"${form.title}" ${next === 'active' ? 'activated' : 'closed'}` }, ...a].slice(0, 20));
      await loadData();
    } catch (error) { setLoadError(error.message || 'Could not update the form status.'); }
  };

  const handleViewResponses = async (form) => {
    // Mark all responses as seen in the DB
    const unread = (form.responses || []).filter(r => !r.seen);
    if (unread.length > 0) {
      try {
        await Promise.all(unread.map(r => cfMarkSeen(r.id)));
        await loadData();
      } catch (error) { setLoadError(error.message || 'Could not update response status.'); }
    }
    setViewing(form);
  };

  const handleViewDiscovery = async () => {
    setDiscoveryInboxOpen(true);
    setDiscoverySelected(null);
    const first = discoverySubmissions[0];
    if (!first) return;
    try { setDiscoverySelected(await cfLoadDiscoverySubmission(first.id)); }
    catch (error) { setDiscoveryError(error.message || 'Could not open the discovery submission.'); }
  };

  const handleSelectDiscovery = async (id) => {
    try { setDiscoverySelected(await cfLoadDiscoverySubmission(id)); }
    catch (error) { setDiscoveryError(error.message || 'Could not open the discovery submission.'); }
  };

  /* When sharing, first set form to active if it's a draft */
  const handleShare = async (form) => {
    if (form.status === 'draft') {
      try {
        await cfSaveForm({ ...form, status: 'active' });
        const updated = { ...form, status: 'active' };
        await loadData();
        setSharing(updated);
      } catch (error) { setLoadError(error.message || 'Could not activate the form.'); }
    } else {
      setSharing(form);
    }
  };

  const filtered = forms
    .filter(f => filter === 'all' || f.status === filter)
    .filter(f => !search || f.title.toLowerCase().includes(search.toLowerCase()));

  const discoveryMatches = (filter === 'all' || filter === 'active') &&
    (!search || 'Sembule Media Project Discovery'.toLowerCase().includes(search.toLowerCase()));

  const totalResponses = forms.reduce((s, f) => s + (f.responses || []).length, 0) + discoveryCount;
  const activeForms = forms.filter(f => f.status === 'active').length + (discoveryError ? 0 : 1);
  const newResponses = forms.reduce((s, f) => s + (f.responses || []).filter(r => !r.seen).length, 0);

  const s = {
    page: { fontFamily: 'var(--font-body)' },
    pageHeader: {
      display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
      marginBottom: 28, flexWrap: 'wrap', gap: 12,
    },
    heading: { fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 800, color: C.textPrim },
    subheading: { fontSize: 14, color: C.textSec, marginTop: 4 },
    newBtn: {
      background: C.mint, color: '#060012', fontWeight: 700,
      border: 'none', borderRadius: 10, padding: '11px 22px',
      cursor: 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', gap: 7,
    },
    kpiRow: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 28 },
    kpiCard: {
      background: C.elevated, border: `1px solid ${C.border}`,
      borderRadius: 10, padding: '16px 20px',
    },
    kpiVal: { fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700 },
    kpiLbl: { fontSize: 11, color: C.textTer, textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 4 },
    toolbar: { display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' },
    searchBox: {
      flex: 1, minWidth: 200,
      background: C.elevated, border: `1px solid ${C.border}`,
      borderRadius: 8, padding: '9px 14px', color: C.textPrim,
      fontFamily: 'var(--font-body)', fontSize: 13, outline: 'none',
    },
    filterBtn: (active) => ({
      background: active ? 'rgba(0,252,143,0.1)' : 'transparent',
      border: `1px solid ${active ? 'rgba(0,252,143,0.3)' : C.border}`,
      color: active ? C.mint : C.textSec,
      borderRadius: 8, padding: '8px 14px', cursor: 'pointer', fontSize: 12,
    }),
    grid: { display: 'flex', flexDirection: 'column', gap: 14 },
    empty: {
      textAlign: 'center', padding: '60px 20px',
      color: C.textTer, fontSize: 14,
    },
    layout: { display: 'grid', gridTemplateColumns: '1fr 300px', gap: 24 },
    sidebar: {},
    error: { padding: '12px 14px', marginBottom: 16, color: '#ff9b9b', background: 'rgba(255,71,87,0.1)', border: '1px solid rgba(255,71,87,0.25)', borderRadius: 9, fontSize: 13 },
    loginCard: { width: '100%', maxWidth: 440, margin: '8vh auto', padding: 28, background: C.elevated, border: `1px solid ${C.border}`, borderRadius: 14 },
    loginInput: { width: '100%', padding: '12px 14px', marginTop: 7, marginBottom: 16, color: C.textPrim, background: C.surface, border: `1px solid ${C.border}`, borderRadius: 8, fontSize: 14 },
    sidebarCard: {
      background: C.elevated, border: `1px solid ${C.border}`,
      borderRadius: 12, padding: '20px',
      marginBottom: 16,
    },
    sidebarTitle: { fontSize: 12, fontWeight: 600, color: C.mint, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 14 },
  };

  if (authLoading) return <div style={s.page}><div style={s.empty}>Connecting to secure Communications…</div></div>;

  if (!session) return (
    <div style={s.page}>
      <div style={s.loginCard}>
        <div style={s.heading}>NEXT OS session required</div>
        <div style={{ ...s.subheading, marginTop: 12 }}>Communications uses your existing NEXT OS sign-in. Reload NEXT OS to restore your session.</div>
      </div>
    </div>
  );

  if (embedded && !cfIsAdmin(session)) return <PublicClientFormsPanel />;

  if (!cfIsAdmin(session)) return (
    <div style={s.page}>
      <div style={s.loginCard}>
        <div style={s.heading}>Admin access required</div>
        <div role="alert" style={{ ...s.subheading, marginTop: 12, marginBottom: 20 }}>
          This signed-in account is not authorized to review client responses.
        </div>
      </div>
    </div>
  );

  return (
    <div style={s.page}>
      <div style={s.pageHeader}>
        <div>
          <div style={s.heading}>{embedded ? 'Forms for clients' : 'Communications'}</div>
          <div style={s.subheading}>{embedded ? 'Share forms and review client submissions. New responses trigger an in-app notification.' : 'Client Forms: submissions appear here with an in-app notification.'}</div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={s.newBtn} onClick={() => setBuilding('new')}>+ New Form</button>
        </div>
      </div>

      {loadError && <div role="alert" style={s.error}>{loadError} <button style={s.filterBtn(false)} onClick={loadData}>Retry</button></div>}

      {/* KPI row */}
      <div style={s.kpiRow}>
        <div style={s.kpiCard}>
          <div style={s.kpiVal}>{forms.length + 1}</div>
          <div style={s.kpiLbl}>Total Forms</div>
        </div>
        <div style={{ ...s.kpiCard, borderColor: activeForms > 0 ? 'rgba(0,252,143,0.2)' : C.border }}>
          <div style={{ ...s.kpiVal, color: C.mint }}>{activeForms}</div>
          <div style={s.kpiLbl}>Active</div>
        </div>
        <div style={{ ...s.kpiCard, borderColor: newResponses > 0 ? 'rgba(0,252,143,0.25)' : C.border }}>
          <div style={{ ...s.kpiVal, color: newResponses > 0 ? C.mint : C.textPrim }}>
            {totalResponses}
            {newResponses > 0 && <span style={{ fontSize: 14, marginLeft: 6, verticalAlign: 'middle' }}>+{newResponses} new</span>}
          </div>
          <div style={s.kpiLbl}>Responses</div>
        </div>
      </div>

      <div style={s.layout}>
        {/* Main forms list */}
        <div>
          {/* Toolbar */}
          <div style={s.toolbar}>
            <input
              style={s.searchBox}
              placeholder="🔍 Search forms…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
            {['all', 'active', 'draft', 'closed'].map(f => (
              <button key={f} style={s.filterBtn(filter === f)} onClick={() => setFilter(f)}>
                {f.charAt(0).toUpperCase() + f.slice(1)}
              </button>
            ))}
          </div>

          {/* Forms */}
          <div style={s.grid}>
            {loading ? (
              <div style={s.empty}>Loading forms and responses…</div>
            ) : filtered.length === 0 && !discoveryMatches ? (
              <div style={s.empty}>
                <div style={{ fontSize: 36, marginBottom: 12 }}>📋</div>
                {forms.length === 0 && !discoveryMatches
                  ? <>No forms yet. Click <strong>+ New Form</strong> to create your first client form.</>
                  : 'No forms match your filter.'}
              </div>
            ) : <>
              {discoveryMatches && <DiscoveryFormCard
                count={discoveryCount}
                ready={!discoveryLoading && !discoveryError}
                error={discoveryError}
                onShare={() => setSharing({ id: 'sembule-discovery', title: 'Sembule Media — Project Discovery', isDiscovery: true })}
                onView={handleViewDiscovery}
              />}
              {filtered.map(form => (
                <FormCard
                  key={form.id}
                  form={form}
                  onEdit={f => setBuilding(f)}
                  onShare={handleShare}
                  onViewResponses={handleViewResponses}
                  onDelete={handleDelete}
                  onToggleStatus={handleToggleStatus}
                />
              ))}
            </>}
          </div>
        </div>

        {/* Right sidebar: activity */}
        <div style={s.sidebar}>
          <div style={s.sidebarCard}>
            <div style={s.sidebarTitle}>📡 Live Activity</div>
            <div style={{ fontSize: 11, color: C.textTer, marginBottom: 12 }}>
              {liveStatus === 'SUBSCRIBED' ? 'Live updates connected' : 'Live connection unavailable; checking every 15 seconds'}
            </div>
            {activity.length === 0 ? (
              <div style={{ fontSize: 12, color: C.textTer, textAlign: 'center', padding: '20px 0' }}>
                No activity yet. Responses appear here in real-time.
              </div>
            ) : activity.map((item, i) => <ActivityEntry key={i} item={item} />)}
          </div>

          <div style={s.sidebarCard}>
            <div style={s.sidebarTitle}>💡 How it works</div>
            <div style={{ fontSize: 12, color: C.textSec, lineHeight: 1.8 }}>
              <div>1. <strong>Create</strong> a form with custom fields</div>
              <div>2. <strong>Share</strong> the link with your client</div>
              <div>3. Client fills it out in their browser</div>
              <div>4. Response lands <strong>right here</strong></div>
            </div>
          </div>
        </div>
      </div>

      {/* Modals */}
      {building && (
        <FormBuilder
          form={building === 'new' ? null : building}
          onSave={handleSave}
          onCancel={() => setBuilding(null)}
        />
      )}
      {sharing && <ShareModal form={sharing} onClose={() => setSharing(null)} />}
      {viewing && <ResponsesModal form={viewing} onClose={() => setViewing(null)} />}
      {discoveryInboxOpen && <DiscoveryInboxModal
        submissions={discoverySubmissions}
        count={discoveryCount}
        selected={discoverySelected}
        error={discoveryError}
        onSelect={handleSelectDiscovery}
        onDownload={cfDownloadDiscoveryFile}
        onClose={() => setDiscoveryInboxOpen(false)}
      />}
    </div>
  );
};

window.CommsPage = CommsPage;