// Portal Settings — edit per-house cleaning rates + the cleaner form fields.
// Live mobile preview (CleanerMobileForm) updates as you edit.
function PortalSettingsPage({ store, onNav }) {
  // Local draft state so changes only apply on Save
  const [fields, setFields] = React.useState(() => store.cleanerFormFields.map(f => ({ ...f, items: f.items ? [...f.items] : undefined })));
  const [houseRates, setHouseRates] = React.useState(() =>
    Object.fromEntries(store.houses.map(h => [h.id, h.cleaningRate]))
  );
  const [editingField, setEditingField] = React.useState(null); // field id
  const [saved, setSaved] = React.useState(false);

  // Apply draft live to a pseudo-store for the preview so it reflects edits instantly
  const previewStore = React.useMemo(() => ({
    ...store,
    cleanerFormFields: fields,
    houses: store.houses.map(h => ({ ...h, cleaningRate: houseRates[h.id] })),
  }), [store, fields, houseRates]);

  const isDirty =
    JSON.stringify(fields) !== JSON.stringify(store.cleanerFormFields) ||
    Object.entries(houseRates).some(([id, r]) => store.houses.find(h => h.id === id).cleaningRate !== r);

  const save = () => {
    store.updateCleanerFields(fields);
    Object.entries(houseRates).forEach(([id, r]) => {
      if (store.houses.find(h => h.id === id).cleaningRate !== r) {
        store.updateHouse(id, { cleaningRate: Number(r) });
      }
    });
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  const discard = () => {
    setFields(store.cleanerFormFields.map(f => ({ ...f, items: f.items ? [...f.items] : undefined })));
    setHouseRates(Object.fromEntries(store.houses.map(h => [h.id, h.cleaningRate])));
  };

  const moveField = (idx, dir) => {
    const next = [...fields];
    const swap = idx + dir;
    if (swap < 0 || swap >= next.length) return;
    // Don't let system fields move out of the top
    if (next[idx].system || next[swap].system) return;
    [next[idx], next[swap]] = [next[swap], next[idx]];
    setFields(next);
  };

  const deleteField = (id) => {
    setFields(fs => fs.filter(f => f.id !== id));
    if (editingField === id) setEditingField(null);
  };

  const updateField = (id, patch) => {
    setFields(fs => fs.map(f => f.id === id ? { ...f, ...patch } : f));
  };

  const addField = (kind) => {
    const id = `f_${Date.now().toString(36)}`;
    const base = { id, kind, required: false };
    const templates = {
      text:     { ...base, label: 'Short text' },
      longtext: { ...base, label: 'Long text' },
      number:   { ...base, label: 'Number' },
      money:    { ...base, label: 'Dollar amount' },
      yesno:    { ...base, label: 'Yes / No question' },
      photo:    { ...base, label: 'Photo upload' },
      select:   { ...base, label: 'Dropdown', items: ['Option 1', 'Option 2'] },
      checklist:{ ...base, label: 'Checklist', items: ['Item 1', 'Item 2'] },
    };
    setFields(fs => [...fs, templates[kind]]);
    setEditingField(id);
  };

  return (
    <>
      <Topbar title="Portal settings" subtitle="Edit cleaner form · flat rates · restock checklist">
        <button className="btn" onClick={() => onNav({ name: 'cleaners' })}>← Back to portal</button>
        {isDirty && <button className="btn ghost" onClick={discard}>Discard</button>}
        <button className="btn accent" onClick={save} disabled={!isDirty}
                style={{ opacity: isDirty ? 1 : 0.5 }}>
          {saved ? '✓ Saved' : 'Save changes'}
        </button>
      </Topbar>

      <div className="content portal-settings-grid">
        {/* LEFT — editors */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, minWidth: 0 }}>
          {/* Per-house rates */}
          <div className="card">
            <div className="card-header">
              <div>
                <h3>Per-house cleaning rates</h3>
                <div className="xs muted" style={{ marginTop: 2 }}>
                  Auto-billed as a <b style={{ color: 'var(--text)' }}>Cleaning</b> expense each time a turnover is submitted
                </div>
              </div>
            </div>
            <table className="table">
              <thead>
                <tr>
                  <th>Property</th>
                  <th style={{ width: 180 }}>Cleaning rate (flat)</th>
                  <th className="num" style={{ width: 140 }}>YTD cleaning cost</th>
                </tr>
              </thead>
              <tbody>
                {store.houses.map(h => {
                  const ytd = store.transactions
                    .filter(t => t.houseId === h.id && t.category === 'Cleaning' && txnYear(t) === 2026)
                    .reduce((s, t) => s + t.amount, 0);
                  return (
                    <tr key={h.id}>
                      <td>
                        <div className="row" style={{ gap: 10 }}>
                          <span className="dot" style={{ background: h.accentColor, width: 9, height: 9 }}/>
                          <div>
                            <div style={{ fontWeight: 500, fontSize: 13 }}>{h.name}</div>
                            <div className="xs muted">{h.address}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div style={{ position: 'relative', maxWidth: 140 }}>
                          <span style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)', fontSize: 13 }}>$</span>
                          <input type="number" value={houseRates[h.id]}
                                 onChange={e => setHouseRates(r => ({ ...r, [h.id]: e.target.value }))}
                                 className="input tabular"
                                 style={{ paddingLeft: 22, height: 32, fontSize: 13 }}/>
                        </div>
                      </td>
                      <td className="num tabular" style={{ color: 'var(--text-secondary)' }}>{fmt$(ytd)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Form fields editor */}
          <div className="card">
            <div className="card-header" style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3>Form fields</h3>
                <div className="xs muted" style={{ marginTop: 2 }}>
                  Reorder, rename, or add fields. Property + Date can't be removed.
                </div>
              </div>
              <div style={{ flexShrink: 0 }}>
                <AddFieldMenu onAdd={addField}/>
              </div>
            </div>
            <div style={{ padding: '4px 0' }}>
              {fields.map((f, i) => (
                <FieldRow key={f.id}
                          field={f}
                          isFirst={i === 0 || fields[i-1]?.system && !f.system}
                          isLast={i === fields.length - 1}
                          canMove={!f.system}
                          isEditing={editingField === f.id}
                          onEdit={() => setEditingField(editingField === f.id ? null : f.id)}
                          onMove={(dir) => moveField(i, dir)}
                          onDelete={() => deleteField(f.id)}
                          onChange={(patch) => updateField(f.id, patch)}/>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — live preview */}
        <div className="portal-settings-preview">
          <div className="xs muted" style={{ letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 12, textAlign: 'center' }}>
            Live preview · what Maria sees
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <IOSFrame scale={0.70}>
              <CleanerMobileForm store={previewStore} embedded/>
            </IOSFrame>
          </div>
        </div>
      </div>

      <style>{`
        .portal-settings-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) 320px;
          gap: 24px;
          align-items: flex-start;
        }
        .portal-settings-preview {
          position: sticky;
          top: 24px;
          align-self: flex-start;
        }
        @media (max-width: 1180px) {
          .portal-settings-grid {
            grid-template-columns: minmax(0, 1fr);
          }
          .portal-settings-preview {
            position: static;
            order: -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
          }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { PortalSettingsPage });