// Settings screen — Telegram notification targets, bot operators, health checks.

const SettingsScreen = ({ role, toast }) => {
  const [targets, setTargets] = React.useState([]);
  const [operators, setOperators] = React.useState([]);
  const [healthChecks, setHealthChecks] = React.useState([]);
  const [sshServers, setSshServers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [testing, setTesting] = React.useState(false);

  const [addTargetForm, setAddTargetForm] = React.useState({ name: '', chatId: '' });
  const [addTargetError, setAddTargetError] = React.useState('');
  const [addingTarget, setAddingTarget] = React.useState(false);
  const [showAddTarget, setShowAddTarget] = React.useState(false);

  const [addOpForm, setAddOpForm] = React.useState({ name: '', chatId: '' });
  const [addOpError, setAddOpError] = React.useState('');
  const [addingOp, setAddingOp] = React.useState(false);
  const [showAddOp, setShowAddOp] = React.useState(false);

  const [runningId, setRunningId] = React.useState(null);
  const [runningExpiry, setRunningExpiry] = React.useState(false);

  const load = React.useCallback(async () => {
    try {
      const [t, o, h, s] = await Promise.all([
        api.telegramTargets.list(),
        api.telegramSessions.list(),
        api.healthChecks.list(),
        api.servers.sshConfigured(),
      ]);
      setTargets(t || []);
      setOperators(o || []);
      setHealthChecks(h || []);
      setSshServers(s || []);
    } catch (err) {
      toast(err.message || 'Failed to load settings', 'danger');
    } finally {
      setLoading(false);
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);

  // ── Notification Targets ─────────────────────────────────────────────────

  const handleAddTarget = async () => {
    setAddTargetError('');
    if (!addTargetForm.name.trim()) { setAddTargetError('Name is required'); return; }
    if (!addTargetForm.chatId.trim()) { setAddTargetError('Chat ID is required'); return; }
    setAddingTarget(true);
    try {
      await api.telegramTargets.add({ name: addTargetForm.name.trim(), chatId: addTargetForm.chatId.trim() });
      toast('Notification target added');
      setAddTargetForm({ name: '', chatId: '' });
      setShowAddTarget(false);
      await load();
    } catch (err) {
      setAddTargetError(err.message || 'Failed to add target');
    } finally {
      setAddingTarget(false);
    }
  };

  const handleToggleTarget = async (target) => {
    try {
      await api.telegramTargets.update(target.id, { active: !target.active });
      toast(target.active ? 'Target disabled' : 'Target enabled');
      await load();
    } catch (err) {
      toast(err.message || 'Update failed', 'danger');
    }
  };

  const handleRemoveTarget = async (target) => {
    if (!window.confirm(`Remove "${target.name}" (${target.chatId}) from notification targets?`)) return;
    try {
      await api.telegramTargets.remove(target.id);
      toast('Target removed', 'danger');
      await load();
    } catch (err) {
      toast(err.message || 'Remove failed', 'danger');
    }
  };

  const handleTest = async () => {
    setTesting(true);
    try {
      const result = await api.telegramTargets.test();
      toast(`Test notification sent to ${result.sent} target${result.sent === 1 ? '' : 's'}`);
    } catch (err) {
      toast(err.message || 'Test failed', 'danger');
    } finally {
      setTesting(false);
    }
  };

  // ── Bot Operators ────────────────────────────────────────────────────────

  const handleAddOperator = async () => {
    setAddOpError('');
    if (!addOpForm.name.trim()) { setAddOpError('Name is required'); return; }
    if (!addOpForm.chatId.trim()) { setAddOpError('Chat ID is required'); return; }
    setAddingOp(true);
    try {
      await api.telegramSessions.add({ name: addOpForm.name.trim(), chatId: addOpForm.chatId.trim() });
      toast('Bot operator added');
      setAddOpForm({ name: '', chatId: '' });
      setShowAddOp(false);
      await load();
    } catch (err) {
      setAddOpError(err.message || 'Failed to add operator');
    } finally {
      setAddingOp(false);
    }
  };

  const handleRemoveOperator = async (op) => {
    if (!window.confirm(`Revoke bot access for "${op.name}" (${op.chatId})?`)) return;
    try {
      await api.telegramSessions.remove(op.chatId);
      toast('Bot access revoked', 'danger');
      await load();
    } catch (err) {
      toast(err.message || 'Remove failed', 'danger');
    }
  };

  // ── Health Checks ────────────────────────────────────────────────────────

  const handleReload = async () => {
    try {
      await api.healthChecks.reload();
      toast('Health check jobs reloaded');
      await load();
    } catch (err) {
      toast(err.message || 'Reload failed', 'danger');
    }
  };

  const handleRunCheck = async (hc) => {
    const key = `${hc.kind}:${hc.id}`;
    setRunningId(key);
    try {
      const r = await api.healthChecks.run(hc.kind, hc.id);
      const ms = r && r.responseTimeMs != null ? ` · ${r.responseTimeMs}ms` : '';
      toast(`Status: ${r?.status || 'unknown'}${ms}`, r?.status === 'down' ? 'danger' : undefined);
      await load();
    } catch (err) {
      toast(err.message || 'Check failed', 'danger');
    } finally {
      setRunningId(null);
    }
  };

  const handleRunExpiry = async () => {
    setRunningExpiry(true);
    try {
      await api.expiry.runNow();
      toast('Expiry notification cron triggered');
    } catch (err) {
      toast(err.message || 'Expiry run failed', 'danger');
    } finally {
      setRunningExpiry(false);
    }
  };

  if (loading) {
    return (
      <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-muted)' }}>
        Loading settings…
      </div>
    );
  }

  const activeTargets = targets.filter(t => t.active);

  const AddForm = ({ form, onChange, onSubmit, onCancel, adding, error, submitLabel }) => (
    <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', background: 'var(--bg-subtle)' }}>
      <div className="field-grid" style={{ marginBottom: 0 }}>
        <div className="field" style={{ marginBottom: 0 }}>
          <label style={{ fontSize: 12 }}>Name</label>
          <input
            value={form.name}
            onChange={(e) => onChange(f => ({ ...f, name: e.target.value }))}
            placeholder="e.g. Durga Prasad"
            style={{ height: 32, fontSize: 13 }}
          />
        </div>
        <div className="field" style={{ marginBottom: 0 }}>
          <label style={{ fontSize: 12 }}>Telegram Chat ID</label>
          <input
            value={form.chatId}
            onChange={(e) => onChange(f => ({ ...f, chatId: e.target.value }))}
            placeholder="e.g. 1074109431"
            style={{ height: 32, fontSize: 13 }}
          />
        </div>
      </div>
      {error && <div style={{ color: 'var(--red-text)', fontSize: 12, marginTop: 8 }}>{error}</div>}
      <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
        <button className="btn sm brand" onClick={onSubmit} disabled={adding}>
          <Icon name="check" size={12}/> {adding ? 'Adding…' : submitLabel}
        </button>
        <button className="btn sm" onClick={onCancel}>Cancel</button>
      </div>
    </div>
  );

  return (
    <>
      <div className="page-head">
        <div>
          <h1>Alerts &amp; Health Monitoring</h1>
          <div className="sub">
            Telegram notifications · {activeTargets.length} active target{activeTargets.length !== 1 ? 's' : ''} · {operators.length} bot operator{operators.length !== 1 ? 's' : ''} · {healthChecks.length} monitored · {sshServers.length} SSH-managed server{sshServers.length !== 1 ? 's' : ''}
          </div>
        </div>
        <div className="page-actions">
          <button className="btn" onClick={handleReload} title="Reload cron jobs from DB">
            <Icon name="refresh" size={13}/> Reload jobs
          </button>
          {role === 'admin' && (
            <button className="btn" onClick={handleRunExpiry} disabled={runningExpiry} title="Manually trigger the expiry-notification cron">
              <Icon name="bell" size={13}/> {runningExpiry ? 'Running…' : 'Run expiry check now'}
            </button>
          )}
          <button className="btn brand" onClick={handleTest} disabled={testing || activeTargets.length === 0} title={activeTargets.length === 0 ? 'No active targets' : 'Send test notification to all active targets'}>
            <Icon name="send" size={13}/> {testing ? 'Sending…' : 'Send test'}
          </button>
        </div>
      </div>

      {/* Notification Targets */}
      <div className="card" style={{ marginBottom: 24 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Notification Targets</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
              Receive health alerts and expiry notifications via Telegram. Does not grant bot command access — add them as a Bot Operator separately.
            </div>
          </div>
          <button className="btn sm" onClick={() => { setShowAddTarget(v => !v); setAddTargetError(''); }}>
            <Icon name="plus" size={12}/> Add target
          </button>
        </div>

        {showAddTarget && (
          <AddForm
            form={addTargetForm} onChange={setAddTargetForm}
            onSubmit={handleAddTarget} onCancel={() => { setShowAddTarget(false); setAddTargetError(''); }}
            adding={addingTarget} error={addTargetError} submitLabel="Add target"
          />
        )}

        {targets.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
            No targets configured. Add a Telegram Chat ID to receive alerts.
          </div>
        ) : (
          <table className="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>Chat ID</th>
                <th>Status</th>
                <th>Added</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {targets.map(t => (
                <tr key={t.id}>
                  <td>
                    <div className="cell-primary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: t.active ? '#16a34a' : '#9ca3af', flexShrink: 0 }} />
                      {t.name}
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 13 }}>{t.chatId}</td>
                  <td>
                    {t.active
                      ? <span className="badge green dot">Active</span>
                      : <span className="badge">Disabled</span>}
                  </td>
                  <td className="mono" style={{ fontSize: 12 }}>{window.fmtRelative(t.createdAt)}</td>
                  <td>
                    <div className="row-actions">
                      <button className="btn sm ghost" onClick={() => handleToggleTarget(t)} title={t.active ? 'Disable' : 'Enable'}>
                        {t.active ? <Icon name="x" size={12}/> : <Icon name="check" size={12}/>}
                      </button>
                      <button className="btn sm ghost" onClick={() => handleRemoveTarget(t)} title="Remove">
                        <Icon name="trash" size={12}/>
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Bot Operators */}
      <div className="card" style={{ marginBottom: 24 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>Bot Operators</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
              Chat IDs authorised to use bot commands — <code>/servers</code>, <code>/expiries</code>, PM2 control, etc. Separate from notification targets.
            </div>
          </div>
          <button className="btn sm" onClick={() => { setShowAddOp(v => !v); setAddOpError(''); }}>
            <Icon name="plus" size={12}/> Add operator
          </button>
        </div>

        {showAddOp && (
          <AddForm
            form={addOpForm} onChange={setAddOpForm}
            onSubmit={handleAddOperator} onCancel={() => { setShowAddOp(false); setAddOpError(''); }}
            adding={addingOp} error={addOpError} submitLabel="Add operator"
          />
        )}

        {operators.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
            No operators configured. Send <code>/start</code> to the bot to get your Chat ID, then add it here.
          </div>
        ) : (
          <table className="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>Chat ID</th>
                <th>Added</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {operators.map(op => (
                <tr key={op.id}>
                  <td>
                    <div className="cell-primary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: '#16a34a', flexShrink: 0 }} />
                      {op.name}
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 13 }}>{op.chatId}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{window.fmtRelative(op.createdAt)}</td>
                  <td>
                    <div className="row-actions">
                      <button className="btn sm ghost" onClick={() => handleRemoveOperator(op)} title="Revoke access">
                        <Icon name="trash" size={12}/>
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* SSH-Managed Servers */}
      <div className="card" style={{ marginBottom: 24 }}>
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>SSH-Managed Servers</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
            Servers with SSH configured — available for PM2 control via the Telegram bot. Configure SSH from the server edit form.
          </div>
        </div>
        {sshServers.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
            No servers have SSH configured. Edit a server and enable SSH Config to add one.
          </div>
        ) : (
          <table className="data">
            <thead>
              <tr>
                <th>Label</th>
                <th>IP</th>
                <th>SSH User</th>
                <th>Key File</th>
                <th>Provider</th>
              </tr>
            </thead>
            <tbody>
              {sshServers.map(s => (
                <tr key={s.id}>
                  <td>
                    <div className="cell-primary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: '#16a34a', flexShrink: 0 }} />
                      {s.label}
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 13 }}>{s.ip}</td>
                  <td style={{ fontSize: 13 }}>{s.sshUser || 'root'}</td>
                  <td className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', maxWidth: 260, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {s.sshKeyFile || '—'}
                  </td>
                  <td><span className="badge">{s.provider}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Health Check Status */}
      <div className="card">
        <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Active Health Monitors</div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>
            All domains and servers with health checks enabled. Enable health checks from the domain/server edit form.
          </div>
        </div>

        {healthChecks.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
            No health monitors active. Enable health checks on a domain or server to start monitoring.
          </div>
        ) : (
          <table className="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Status</th>
                <th>Interval</th>
                <th>Custom URL</th>
                <th>Last Checked</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {healthChecks.map(hc => (
                <tr key={hc.id}>
                  <td>
                    <div className="cell-primary" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <Icon name={hc.kind === 'domain' ? 'globe' : 'server'} size={13} stroke={2}/>
                      {hc.label}
                    </div>
                  </td>
                  <td><span className="badge" style={{ textTransform: 'capitalize' }}>{hc.kind}</span></td>
                  <td>
                    {hc.lastStatus === 'up'
                      ? <span className="badge green dot">Up</span>
                      : hc.lastStatus === 'down'
                      ? <span className="badge red dot">Down</span>
                      : <span className="badge">Pending</span>}
                  </td>
                  <td style={{ fontSize: 13 }}>
                    Every {hc.healthCheckInterval >= 60
                      ? `${hc.healthCheckInterval / 60}h`
                      : `${hc.healthCheckInterval}m`}
                  </td>
                  <td style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                    {hc.healthCheckUrl || <span style={{ fontStyle: 'italic' }}>auto</span>}
                  </td>
                  <td className="mono" style={{ fontSize: 12 }}>
                    {hc.lastCheckedAt ? window.fmtRelative(hc.lastCheckedAt) : '—'}
                  </td>
                  <td>
                    <button
                      className="btn sm"
                      onClick={() => handleRunCheck(hc)}
                      disabled={runningId === `${hc.kind}:${hc.id}`}
                      title="Run health check now"
                    >
                      <Icon name="refresh" size={12}/> {runningId === `${hc.kind}:${hc.id}` ? 'Running…' : 'Run'}
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </>
  );
};

window.SettingsScreen = SettingsScreen;