// AXIS-4 — Integrations. Health + calendar sources with connect / reconnect /
// manage flows. Tapping Connect runs a mock permission sheet.
function IntegrationsScreen({ onBack }) {
  const [items, setItems] = React.useState(() => MData.integrations.map((x) => ({ ...x })));
  const [sheet, setSheet] = React.useState(null); // provider id for connect sheet
  const [manage, setManage] = React.useState(null);

  const update = (id, patch) => setItems((arr) => arr.map((p) => p.id === id ? { ...p, ...patch } : p));

  const STATUS = {
    connected:    { label: 'Connected',       variant: 'success', dot: M.success },
    disconnected: { label: 'Not connected',   variant: 'default' },
    reconnect:    { label: 'Needs attention', variant: 'warning', dot: M.warning },
  };

  const connect = (p) => setSheet(p.id);
  const confirmConnect = () => {
    const id = sheet; setSheet(null);
    update(id, { status: 'connecting' });
    setTimeout(() => update(id, { status: 'connected', detail: 'synced just now' }), 900);
  };
  const reconnect = (p) => {
    update(p.id, { status: 'connecting' });
    setTimeout(() => update(p.id, { status: 'connected', detail: 'synced just now' }), 800);
  };
  const disconnect = (p) => { update(p.id, { status: 'disconnected', detail: undefined }); setManage(null); };

  const needs = items.filter((p) => p.status === 'reconnect');
  const groups = ['Health', 'Calendar'];
  const sheetProvider = items.find((p) => p.id === sheet);

  const row = (p) => {
    const st = STATUS[p.status] || STATUS.disconnected;
    const connecting = p.status === 'connecting';
    return (
      <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: `1px solid ${M.ruleSoft}` }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: `500 14px/1.2 ${M.sans}`, color: M.ink }}>{p.name}</div>
          <div style={{ font: `400 12px/1.4 ${M.sans}`, color: p.status === 'reconnect' ? M.warning : M.inkMuted, marginTop: 4 }}>
            {p.status === 'connected' && p.detail ? p.detail : (p.status === 'reconnect' ? p.detail : p.desc)}
          </div>
          <div style={{ marginTop: 8 }}>
            {connecting ? <DSChip variant="default">Connecting…</DSChip> : <DSChip variant={st.variant} dot={st.dot}>{st.label}</DSChip>}
          </div>
        </div>
        {!connecting && (
          p.status === 'connected'
            ? <DSButton size="sm" variant="secondary" onClick={() => setManage(p.id)}>Manage</DSButton>
            : p.status === 'reconnect'
              ? <DSButton size="sm" onClick={() => reconnect(p)}>Reconnect</DSButton>
              : <DSButton size="sm" onClick={() => connect(p)}>Connect</DSButton>
        )}
      </div>
    );
  };

  const manageProvider = items.find((p) => p.id === manage);

  return (
    <div style={{ background: M.canvas, minHeight: '100%' }}>
      <div style={{ padding: '4px 16px 12px', borderBottom: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', gap: 10 }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, color: M.ink, marginLeft: -4, display: 'flex' }}>
          <window.MIcons.ArrowLeft size={22} />
        </button>
        <div style={{ font: `500 16px/1.2 ${M.sans}`, color: M.ink }}>Integrations</div>
      </div>

      <div style={{ padding: '16px 16px 24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {needs.length > 0 && (
          <DSAlert tone="warn" title={`${needs.length} connection${needs.length === 1 ? '' : 's'} need attention`}>
            {needs.map((p) => p.name).join(', ')} stopped syncing. Reconnect to keep your data current.
          </DSAlert>
        )}

        {groups.map((g) => {
          const gi = items.filter((p) => p.cat === g);
          return (
            <div key={g}>
              <MSectionTitle>{g}</MSectionTitle>
              <DSCard padding={0} style={{ overflow: 'hidden' }}>{gi.map(row)}</DSCard>
            </div>
          );
        })}

        <div style={{ font: `400 12px/1.5 ${M.sans}`, color: M.inkMuted, padding: '0 4px' }}>
          Axis only reads the data you approve, and you can disconnect any source at any time.
        </div>
        <DSMedicalDisclaimer />
      </div>

      <DSBottomSheet isOpen={!!sheetProvider} onClose={() => setSheet(null)} title={sheetProvider ? `Connect ${sheetProvider.name}` : ''}>
        {sheetProvider && (
          <div style={{ padding: '4px 4px 8px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ font: `400 14px/1.5 ${M.sans}`, color: M.inkSoft }}>Axis is requesting permission to read:</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {sheetProvider.scopes.map((s) => (
                <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <window.MIcons.Check size={16} />
                  <div style={{ font: `400 14px/1.3 ${M.sans}`, color: M.ink }}>{s}</div>
                </div>
              ))}
            </div>
            <div style={{ font: `400 12.5px/1.5 ${M.sans}`, color: M.inkMuted }}>You can revoke access any time from this screen.</div>
            <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
              <DSButton variant="secondary" onClick={() => setSheet(null)} style={{ flex: 1 }}>Not now</DSButton>
              <DSButton onClick={confirmConnect} style={{ flex: 1 }}>Allow access</DSButton>
            </div>
          </div>
        )}
      </DSBottomSheet>

      <DSBottomSheet isOpen={!!manageProvider} onClose={() => setManage(null)} title={manageProvider ? manageProvider.name : ''}>
        {manageProvider && (
          <div style={{ padding: '4px 4px 8px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ font: `400 13px/1.4 ${M.sans}`, color: M.inkMuted }}>{manageProvider.detail || 'Connected'}</div>
            <MSectionTitle>Sharing</MSectionTitle>
            {manageProvider.scopes.map((s) => (
              <div key={s} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0' }}>
                <div style={{ font: `400 14px/1.3 ${M.sans}`, color: M.ink }}>{s}</div>
                <DSChip variant="success" dot={M.success}>On</DSChip>
              </div>
            ))}
            <DSButton variant="danger" full onClick={() => disconnect(manageProvider)} style={{ marginTop: 6 }}>Disconnect</DSButton>
          </div>
        )}
      </DSBottomSheet>
    </div>
  );
}
window.IntegrationsScreen = IntegrationsScreen;