function SettingsChatwootPage() {
  const { AppBootstrap } = window.__CRM__;
  const {
    Container, Paper, Typography, TextField, Button, Stack, MenuItem,
    Divider, Chip, Grid, Snackbar, Alert, Switch, FormControlLabel
  } = MaterialUI;

  // Toast
  const [toast, setToast] = React.useState({ open:false, sev:'info', msg:'' });
  const notify = (msg, sev='info') => setToast({ open:true, sev, msg });

  // Chatwoot settings
  const [loading, setLoading] = React.useState(true);
  const [form, setForm] = React.useState({
    base_url: 'https://chatwoot.falandobot.com.br',
    account_id: '',
    access_token: '',
    default_inbox_id: '',
    default_inbox_name: '',
  });
  const [hasToken, setHasToken] = React.useState(false);
  const [inboxes, setInboxes] = React.useState([]);

  // Throttling per inbox
  const [selectedInbox, setSelectedInbox] = React.useState('');
  const [iboxCfg, setIboxCfg] = React.useState({
    enabled: 1,
    rate_per_min: 20,
    batch_size: 50,
    interval_sec: 60,
    daily_cap: 2000,
    quiet_start: '22:00',
    quiet_end: '08:00',
    jitter_min_ms: 200,
    jitter_max_ms: 1500
  });

  // Load Chatwoot core settings + default inbox on mount
  async function loadCore() {
    try {
      const r = await fetch('/api/settings_chatwoot_get.php', { credentials:'include', cache:'no-store' });
      const j = await r.json();
      if (r.ok && j.ok && j.config) {
        setForm(f=>({
          ...f,
          base_url: j.config.base_url || f.base_url,
          account_id: String(j.config.account_id || ''),
          default_inbox_id: j.config.default_inbox_id ? String(j.config.default_inbox_id) : '',
          default_inbox_name: j.config.default_inbox_name || ''
        }));
        setHasToken(!!j.config.has_token);
        if (j.config.default_inbox_id) setSelectedInbox(String(j.config.default_inbox_id));
      }
    } catch {
      notify('Failed to load Chatwoot settings', 'error');
    }
  }

  // Load inbox list
  async function loadInboxes() {
    try{
      const r = await fetch('/api/settings_chatwoot_inboxes.php',{ credentials:'include' });
      const j = await r.json();
      if(!j.ok) { notify('Could not fetch inboxes', 'error'); return; }
      setInboxes(j.items || []);
      notify(`Loaded ${j.items?.length||0} inbox(es)`, 'success');
    }catch{
      notify('Network error while loading inboxes', 'error');
    }
  }

  // Initial load
  React.useEffect(()=>{
    (async ()=>{
      setLoading(true);
      await Promise.all([loadCore(), loadInboxes().catch(()=>{})]);
      setLoading(false);
    })();
  },[]);

  // Persist Chatwoot settings
  async function saveChatwoot() {
    const fd = new FormData();
    fd.append('base_url', form.base_url.trim());
    fd.append('account_id', String(form.account_id||''));
    if (form.access_token.trim()!=='') fd.append('access_token', form.access_token.trim());
    if (form.default_inbox_id) {
      fd.append('default_inbox_id', form.default_inbox_id);
      fd.append('default_inbox_name',
        inboxes.find(i=>String(i.id)===String(form.default_inbox_id))?.name || form.default_inbox_name || ''
      );
    }
    try {
      const r = await fetch('/api/settings_chatwoot_save.php',{ method:'POST', body:fd, credentials:'include' });
      const j = await r.json();
      if (!r.ok || !j?.ok) { notify('Failed to save Chatwoot settings', 'error'); return; }
      setHasToken(!!(j.config?.has_token));
      setForm(prev => ({
        ...prev,
        base_url: j.config?.base_url || prev.base_url,
        account_id: String(j.config?.account_id || ''),
        access_token: '',
        default_inbox_id: j.config?.default_inbox_id ? String(j.config.default_inbox_id) : '',
        default_inbox_name: j.config?.default_inbox_name || ''
      }));
      if (j.config?.default_inbox_id) setSelectedInbox(String(j.config.default_inbox_id));
      notify('Chatwoot settings saved', 'success');
    } catch {
      notify('Network error while saving Chatwoot', 'error');
    }
  }

  function selectDefaultInbox(idStr){
    const found = inboxes.find(i=>String(i.id)===String(idStr));
    setForm({...form, default_inbox_id: idStr, default_inbox_name: found?.name || ''});
  }

  // Load throttling for selected inbox
  React.useEffect(()=>{
    if (!selectedInbox) return;
    (async ()=>{
      try{
        const r = await fetch(`/api/delivery_inbox_get.php?inbox_id=${encodeURIComponent(selectedInbox)}`, { credentials:'include', cache:'no-store' });
        const j = await r.json();
        if (!r.ok || !j?.ok) { notify('Failed to load inbox delivery settings', 'error'); return; }
        const s = j.settings || {};
        const next = { ...iboxCfg, ...s };
        ['enabled','rate_per_min','batch_size','interval_sec','daily_cap','jitter_min_ms','jitter_max_ms'].forEach(k=> next[k] = Number(next[k]));
        setIboxCfg(next);
      }catch{
        notify('Network error while loading inbox settings', 'error');
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedInbox]);

  // Save throttling for selected inbox
  async function saveInboxCfg(){
    if (!selectedInbox) { notify('Pick an inbox first', 'warning'); return; }
    const fd = new FormData();
    fd.append('inbox_id', selectedInbox);
    Object.entries(iboxCfg).forEach(([k,v])=>fd.append(k, String(v)));
    try{
      const r = await fetch('/api/delivery_inbox_save.php',{ method:'POST', body:fd, credentials:'include' });
      const j = await r.json().catch(()=>null);
      if (!r.ok || !j?.ok) { notify(j?.err || 'Failed to save inbox settings', 'error'); return; }
      notify('Inbox delivery settings saved', 'success');

      // Reload to reflect persisted values exactly
      const r2 = await fetch(`/api/delivery_inbox_get.php?inbox_id=${encodeURIComponent(selectedInbox)}`, { credentials:'include', cache:'no-store' });
      const j2 = await r2.json();
      if (r2.ok && j2.ok) setIboxCfg(prev => ({ ...prev, ...j2.settings }));
    }catch{
      notify('Network error while saving inbox settings', 'error');
    }
  }

  const Num = ({label, k, min=0, step=1}) => (
    <TextField
      type="number" label={label} value={iboxCfg[k]}
      onChange={e=>setIboxCfg({...iboxCfg, [k]: Number(e.target.value)})}
      inputProps={{ step, min }} fullWidth
    />
  );
  const Time = ({label, k}) => (
    <TextField
      type="time" label={label} value={iboxCfg[k]}
      onChange={e=>setIboxCfg({...iboxCfg, [k]: e.target.value})}
      InputLabelProps={{ shrink:true }} fullWidth
    />
  );

  return (
    <AppBootstrap>
      <Container maxWidth="md" sx={{ py:3 }}>
        <Typography variant="h5" sx={{ fontWeight:700, mb:2 }}>Settings</Typography>

        {/* Chatwoot core settings */}
        <Paper sx={{ p:2, mb:3 }}>
          <Typography variant="h6" sx={{ mb:1 }}>Chatwoot</Typography>
          <Stack spacing={2}>
            <TextField label="Base URL" value={form.base_url} onChange={e=>setForm({...form, base_url:e.target.value})} fullWidth />
            <TextField label="Account ID" type="number" value={form.account_id} onChange={e=>setForm({...form, account_id:e.target.value})} fullWidth />
            <TextField
              label={`Access Token ${hasToken ? '(already set)' : ''}`}
              type="password" value={form.access_token}
              onChange={e=>setForm({...form, access_token:e.target.value})}
              fullWidth
              helperText={hasToken ? 'Token stored. Leave blank to keep current.' : 'Paste your API access token.'}
            />
            <Divider textAlign="left"><Chip label="Default Inbox" /></Divider>
            <Stack direction={{ xs:'column', sm:'row' }} spacing={1}>
              <TextField
                select
                label="Default Chatwoot Inbox"
                value={form.default_inbox_id}
                onChange={e=>selectDefaultInbox(e.target.value)}
                fullWidth
                helperText="Optional. Used as default when creating campaigns."
              >
                <MenuItem value="">— none —</MenuItem>
                {inboxes.map(i=>(
                  <MenuItem key={i.id} value={String(i.id)}>{i.name} ({i.channel||'channel'})</MenuItem>
                ))}
              </TextField>
              <Button variant="outlined" onClick={loadInboxes}>Reload inboxes</Button>
            </Stack>
            {form.default_inbox_name && (
              <Typography variant="body2" color="text.secondary">
                Selected: {form.default_inbox_name}
              </Typography>
            )}
            <Stack direction="row" spacing={1} justifyContent="flex-end">
              <Button variant="contained" onClick={saveChatwoot}>Save Chatwoot</Button>
            </Stack>
          </Stack>
        </Paper>

        {/* Delivery / Throttling per Inbox */}
        <Paper sx={{ p:2 }}>
          <Typography variant="h6" sx={{ mb:1 }}>Delivery · Throttling per Inbox</Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mb:2 }}>
            Define throttling and quiet hours per Chatwoot inbox.
          </Typography>

          <Stack direction={{ xs:'column', sm:'row' }} spacing={1} sx={{ mb:2 }} alignItems="center">
            <TextField
              select
              label="Inbox"
              value={selectedInbox}
              onChange={e=>setSelectedInbox(e.target.value)}
              fullWidth
            >
              <MenuItem value="">— pick an inbox —</MenuItem>
              {inboxes.map(i=>(
                <MenuItem key={i.id} value={String(i.id)}>{i.name} ({i.channel||'channel'})</MenuItem>
              ))}
            </TextField>
            <FormControlLabel
              control={
                <Switch
                  checked={!!iboxCfg.enabled}
                  onChange={e=>setIboxCfg({...iboxCfg, enabled: e.target.checked ? 1 : 0})}
                />
              }
              label="Enabled"
            />
            <Button variant="contained" onClick={saveInboxCfg} disabled={!selectedInbox}>Save Inbox Settings</Button>
          </Stack>

          <Grid container spacing={2}>
            <Grid item xs={6} md={3}><Num label="Messages per minute" k="rate_per_min" min={1} /></Grid>
            <Grid item xs={6} md={3}><Num label="Batch size" k="batch_size" min={1} /></Grid>
            <Grid item xs={6} md={3}><Num label="Interval between batches (s)" k="interval_sec" min={0} /></Grid>
            <Grid item xs={6} md={3}><Num label="Daily cap" k="daily_cap" min={0} /></Grid>

            <Grid item xs={6} md={3}><Time label="Quiet hours start" k="quiet_start" /></Grid>
            <Grid item xs={6} md={3}><Time label="Quiet hours end" k="quiet_end" /></Grid>

            <Grid item xs={6} md={3}><Num label="Jitter min (ms)" k="jitter_min_ms" min={0} /></Grid>
            <Grid item xs={6} md={3}><Num label="Jitter max (ms)" k="jitter_max_ms" min={0} /></Grid>
          </Grid>
        </Paper>

        <Snackbar
          open={toast.open}
          autoHideDuration={3000}
          onClose={()=>setToast(t=>({ ...t, open:false }))}
          anchorOrigin={{ vertical:'bottom', horizontal:'right' }}
        >
          <Alert onClose={()=>setToast(t=>({ ...t, open:false }))} severity={toast.sev} variant="filled" sx={{ width:'100%' }}>
            {toast.msg}
          </Alert>
        </Snackbar>
      </Container>
    </AppBootstrap>
  );
}
window.SettingsChatwootPage = SettingsChatwootPage;