// ─────────────────────────────────────────────
// DEV_Design_Portal.jsx
// Portal inspector component for DEV_Design.jsx
//
// Usage in Inspector (replaces existing portal stub):
//   {local.type === 'portal' && (
//     <PortalInspector local={local} set={set} tables={tables} fields={fields} lbl={lbl} sel={sel} inp={inp} />
//   )}
//
// Portal object JSON stored in objects table:
//   {
//     type:         'portal',
//     label:        'Notes',
//     relatedTable: 't2',          // table key e.g. 't2'
//     displayFields: ['1','2'],    // o_field values from related table
//     sortField:    '1',           // o_field value
//     sortDir:      'desc',
//     allowAdd:     'yes',
//     allowDelete:  'yes',
//     quickAddMode: 'single',      // 'none' | 'single' | 'all'
//     quickAddField: '1',          // field shown in single mode
//     portalRows:   10,
//     deleteParent: 'no',          // delete related on parent delete
//   }
// ─────────────────────────────────────────────

function PortalInspector({ local, set, tables, fields, lbl, sel, inp }) {

  // ── Related table fields ──────────────────────
  // Load fields for the selected related table
  const [relFields,    setRelFields]    = React.useState([]);
  const [relLoading,   setRelLoading]   = React.useState(false);
  const [relError,     setRelError]     = React.useState(null);
  const [displayFields, setDisplayFields] = React.useState(
    Array.isArray(local.displayFields) ? local.displayFields : []
  );

  // Load related table fields when relatedTable changes
  React.useEffect(() => {
    if (!local.relatedTable || !local._appId) return;
    setRelLoading(true); setRelError(null);
    apiFetch(`${API_BASE}/v6/dev/apps/${local._appId}/tables`)
      .then(r => r.json())
      .then(data => {
        if (data.status !== 'ok') throw new Error(data.message);
        const tNum = local.relatedTable.replace('t','');
        const tbl  = (data.tables || []).find(t => String(t.tNum) === String(tNum) || t.table === local.relatedTable);
        setRelFields(tbl?.fields || []);
      })
      .catch(e => setRelError(e.message))
      .finally(() => setRelLoading(false));
  }, [local.relatedTable, local._appId]);

  // Sync displayFields back to local when changed
  function toggleDisplayField(fieldKey) {
    const cur     = Array.isArray(local.displayFields) ? local.displayFields : [];
    const updated = cur.includes(fieldKey)
      ? cur.filter(f => f !== fieldKey)
      : [...cur, fieldKey];
    setDisplayFields(updated);
    set('displayFields', updated);
  }

  // ── Inline styles ─────────────────────────────
  const sectionStyle = {
    background:'#f8fafc', borderRadius:8, padding:'10px 12px',
    marginBottom:10, border:'1px solid #f1f5f9',
  };
  const checkRow = {
    display:'flex', alignItems:'center', gap:8,
    padding:'4px 0', cursor:'pointer', fontSize:12, color:'#374151',
  };

  return (
    <>
      {/* ── Portal Label ── */}
      {lbl('Portal Label')}
      {inp('label', { placeholder:'Notes, Employees, Orders…' })}

      {/* ── Related Table ── */}
      {lbl('Related Table')}
      <select
        value={local.relatedTable || ''}
        onChange={e => {
          set('relatedTable', e.target.value);
          // Reset field selections when table changes
          set('displayFields', []);
          set('sortField', '');
          set('quickAddField', '');
          setDisplayFields([]);
        }}
        style={{ width:'100%', padding:'6px 8px', border:'1.5px solid #e2e8f0',
                 borderRadius:6, fontSize:12, fontFamily:'DM Sans, sans-serif',
                 color:'#0f1923', background:'#fff', outline:'none', marginBottom:6 }}>
        <option value="">— Select table —</option>
        {(tables || []).map(t => (
          <option key={t.table} value={t.table}>
            {t.name} ({t.table})
          </option>
        ))}
      </select>

      {relError && (
        <div style={{ fontSize:11, color:'#dc2626', marginBottom:8 }}>{relError}</div>
      )}

      {/* ── Display Fields ── */}
      {local.relatedTable && (
        <>
          <div style={{ marginTop:12 }} />
          {lbl('Display Fields')}
          <div style={sectionStyle}>
            {relLoading && (
              <div style={{ fontSize:12, color:'#94a3b8', padding:'4px 0' }}>Loading fields…</div>
            )}
            {!relLoading && relFields.length === 0 && (
              <div style={{ fontSize:12, color:'#94a3b8', padding:'4px 0' }}>
                {local.relatedTable ? 'No fields found' : 'Select a table first'}
              </div>
            )}
            {relFields.map(f => {
              const key     = String(f.field).replace('f','');
              const checked = displayFields.includes(key) || displayFields.includes(f.field);
              return (
                <label key={f.o_id || f.field} style={checkRow} onClick={() => toggleDisplayField(key)}>
                  <span style={{
                    width:14, height:14, border:`1.5px solid ${checked ? '#2563eb' : '#cbd5e1'}`,
                    borderRadius:3, background: checked ? '#2563eb' : '#fff',
                    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                  }}>
                    {checked && <span style={{ color:'#fff', fontSize:9, fontWeight:700 }}>✓</span>}
                  </span>
                  <span>{f.name}</span>
                  <span style={{ fontSize:10, color:'#94a3b8', fontFamily:'DM Mono, monospace', marginLeft:'auto' }}>
                    f{key}
                  </span>
                </label>
              );
            })}
          </div>

          {/* ── Sort ── */}
          {lbl('Sort By')}
          <select
            value={local.sortField || ''}
            onChange={e => set('sortField', e.target.value)}
            style={{ width:'100%', padding:'6px 8px', border:'1.5px solid #e2e8f0',
                     borderRadius:6, fontSize:12, fontFamily:'DM Sans, sans-serif',
                     color:'#0f1923', background:'#fff', outline:'none', marginBottom:6 }}>
            <option value="">— Date created (default) —</option>
            {relFields.map(f => (
              <option key={f.field} value={String(f.field).replace('f','')}>
                {f.name}
              </option>
            ))}
          </select>

          {lbl('Sort Direction')}
          <div style={{ display:'flex', border:'1.5px solid #e2e8f0', borderRadius:6,
                        overflow:'hidden', marginBottom:10 }}>
            {[{v:'desc',l:'Newest First'},{v:'asc',l:'Oldest First'}].map(o => (
              <button key={o.v} type="button" onClick={() => set('sortDir', o.v)}
                style={{ flex:1, padding:'6px', border:'none', fontSize:11, fontWeight:500,
                         cursor:'pointer', fontFamily:'DM Sans, sans-serif',
                         background: (local.sortDir||'desc')===o.v ? '#0f1923' : '#fff',
                         color:      (local.sortDir||'desc')===o.v ? '#fff' : '#64748b' }}>
                {o.l}
              </button>
            ))}
          </div>
        </>
      )}

      {/* ── Divider ── */}
      <div style={{ height:1, background:'#e2e8f0', margin:'12px 0' }} />

      {/* ── Permissions ── */}
      {lbl('Permissions')}
      <div style={sectionStyle}>
        {[
          { key:'allowAdd',    label:'Allow adding records'    },
          { key:'allowDelete', label:'Allow deleting records'  },
          { key:'deleteParent',label:'Delete related on parent delete' },
        ].map(({ key, label }) => (
          <label key={key} style={checkRow}
            onClick={() => set(key, (local[key] === 'yes' || local[key] === true) ? 'no' : 'yes')}>
            <span style={{
              width:14, height:14,
              border:`1.5px solid ${(local[key]==='yes'||local[key]===true) ? '#2563eb' : '#cbd5e1'}`,
              borderRadius:3,
              background: (local[key]==='yes'||local[key]===true) ? '#2563eb' : '#fff',
              display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
            }}>
              {(local[key]==='yes'||local[key]===true) && (
                <span style={{ color:'#fff', fontSize:9, fontWeight:700 }}>✓</span>
              )}
            </span>
            <span>{label}</span>
          </label>
        ))}
      </div>

      {/* ── Quick Add Mode ── */}
      {(local.allowAdd === 'yes' || local.allowAdd === true) && local.relatedTable && (
        <>
          {lbl('Quick Add Mode')}
          <div style={{ display:'flex', border:'1.5px solid #e2e8f0', borderRadius:6,
                        overflow:'hidden', marginBottom:6 }}>
            {[
              { v:'single', l:'One Field' },
              { v:'all',    l:'All Fields' },
              { v:'none',   l:'Off' },
            ].map(o => (
              <button key={o.v} type="button" onClick={() => set('quickAddMode', o.v)}
                style={{ flex:1, padding:'6px', border:'none', fontSize:11, fontWeight:500,
                         cursor:'pointer', fontFamily:'DM Sans, sans-serif',
                         background: (local.quickAddMode||'all')===o.v ? '#0f1923' : '#fff',
                         color:      (local.quickAddMode||'all')===o.v ? '#fff' : '#64748b' }}>
                {o.l}
              </button>
            ))}
          </div>

          {/* Single field quick-add: pick which field */}
          {(local.quickAddMode === 'single' || (!local.quickAddMode && relFields.length > 0)) && (
            <>
              {lbl('Quick Add Field')}
              <select
                value={local.quickAddField || ''}
                onChange={e => set('quickAddField', e.target.value)}
                style={{ width:'100%', padding:'6px 8px', border:'1.5px solid #e2e8f0',
                         borderRadius:6, fontSize:12, fontFamily:'DM Sans, sans-serif',
                         color:'#0f1923', background:'#fff', outline:'none', marginBottom:6 }}>
                <option value="">— Select field —</option>
                {relFields.map(f => (
                  <option key={f.field} value={String(f.field).replace('f','')}>
                    {f.name}
                  </option>
                ))}
              </select>
            </>
          )}
        </>
      )}

      {/* ── Row limit ── */}
      {lbl('Rows to Show')}
      {inp('portalRows', { type:'number', placeholder:'10', min:'1', max:'100' })}

      {/* ── Preview ── */}
      {local.relatedTable && (
        <div style={{ marginTop:14, background:'#eff6ff', borderRadius:8, padding:'10px 12px',
                      border:'1px solid #bfdbfe' }}>
          <div style={{ fontSize:10, fontWeight:700, color:'#2563eb', textTransform:'uppercase',
                        letterSpacing:'0.06em', marginBottom:8 }}>
            ⊞ Portal Preview
          </div>
          <div style={{ background:'#fff', border:'1px solid #e2e8f0', borderRadius:6,
                        overflow:'hidden' }}>
            {/* Header */}
            <div style={{ background:'#1a3566', color:'#fff', padding:'6px 10px',
                          display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span style={{ fontSize:12, fontWeight:600 }}>
                {local.label || 'Portal'}
              </span>
              {(local.allowAdd === 'yes' || local.allowAdd === true) && (
                <span style={{ fontSize:11, background:'rgba(255,255,255,0.2)',
                               borderRadius:4, padding:'1px 7px', cursor:'pointer' }}>
                  + Add
                </span>
              )}
            </div>
            {/* Sample rows */}
            {[1,2,3].map(i => (
              <div key={i} style={{ display:'flex', alignItems:'center', padding:'5px 10px',
                                    borderBottom:'1px solid #f1f5f9', fontSize:11, color:'#94a3b8' }}>
                <span style={{ flex:1 }}>
                  {displayFields.length > 0
                    ? relFields.filter(f => displayFields.includes(String(f.field).replace('f',''))).map(f => f.name).join(' · ')
                    : 'Row ' + i
                  }
                </span>
                {(local.allowDelete === 'yes' || local.allowDelete === true) && (
                  <span style={{ color:'#fca5a5', fontSize:10, marginLeft:6 }}>✕</span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </>
  );
}