/* gigi-settings.jsx — settings hub (v2 — uses g-* classes from gigi-ui) */

function SettingsScreen({role, org}) {
    const G = window.GIGI;
    const isSov = role === 'SOVEREIGN';
    const [twofa, setTwofa] = React.useState(true);
    const [reauth, setReauth] = React.useState(false);

    const roleTone = {SOVEREIGN: 'accent', OPERATOR: 'info', AUDITOR: 'neutral'};

    return (
        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
            <PageHeader title="Settings"/>

            {/* org identity */}
            <Card style={{display: 'flex', alignItems: 'center', gap: 16}}>
                <div style={{
                    width: 52,
                    height: 52,
                    borderRadius: 14,
                    background: 'var(--accent-ink)',
                    color: 'var(--pill-ink)',
                    display: 'grid',
                    placeItems: 'center',
                    fontFamily: 'var(--fd)',
                    fontWeight: 700,
                    fontSize: 18,
                    flexShrink: 0
                }}>{org.initials}</div>
                <div style={{flex: 1}}>
                    <div style={{fontWeight: 700, fontSize: 16}}>{org.name}</div>
                    <div style={{fontSize: 13, color: 'var(--ink-3)', marginTop: 2}}>{org.type} ·
                        Officer: {org.officer}</div>
                </div>
                <Badge tone={org.kycStatus === 'APPROVED' ? 'go' : 'info'}
                       dot>{org.kycStatus === 'APPROVED' ? 'KYC Approved' : 'KYC Pending'}</Badge>
            </Card>

            {/* disbursement */}
            {isSov && (
                <div>
                    <SectionLabel>Disbursement destination</SectionLabel>
                    <Card>
                        <div style={{display: 'flex', alignItems: 'center', gap: 14}}>
                            <div style={{
                                width: 44,
                                height: 44,
                                borderRadius: 12,
                                background: 'var(--surface-2)',
                                display: 'grid',
                                placeItems: 'center',
                                color: 'var(--ink-2)'
                            }}>
                                <Icon name={org.disbursement.kind.includes('M-Pesa') ? 'mpesa' : 'bank'} size={22}/>
                            </div>
                            <div style={{flex: 1}}>
                                <div style={{fontWeight: 700, fontSize: 14}}>{org.disbursement.kind}</div>
                                <div className="g-mono" style={{
                                    fontSize: 13,
                                    color: 'var(--ink-3)'
                                }}>{org.disbursement.label} · {org.disbursement.mask}</div>
                            </div>
                            <Icon name="lock" size={17} style={{color: 'var(--ink-3)'}}/>
                        </div>
                        <div style={{marginTop: 14}}>
                            <Btn kind="line" icon="shield" onClick={() => setReauth(true)}>Change destination</Btn>
                        </div>
                        <div style={{
                            display: 'flex',
                            gap: 8,
                            color: 'var(--ink-3)',
                            fontSize: 12.5,
                            marginTop: 10,
                            lineHeight: 1.5
                        }}>
                            <Icon name="info" size={14} style={{flexShrink: 0, marginTop: 2}}/>
                            Requires re-authentication. Every change is logged with timestamp and IP for CBK audit.
                        </div>
                    </Card>
                </div>
            )}

            {/* team */}
            <div>
                <SectionLabel action={isSov ? (
                    <span className="g-tap" style={{
                        fontSize: 12.5,
                        fontWeight: 700,
                        color: 'var(--go)',
                        display: 'flex',
                        alignItems: 'center',
                        gap: 4
                    }}>
            <Icon name="plus" size={13}/>Invite
          </span>
                ) : null}>Team</SectionLabel>
                <Card style={{padding: 0}}>
                    {G.team.map((m, i) => (
                        <div key={m.email} style={{
                            display: 'flex', alignItems: 'center', gap: 12, padding: 'var(--pad)',
                            borderBottom: i < G.team.length - 1 ? '1px solid var(--line-2)' : 'none'
                        }}>
                            <div style={{
                                width: 40,
                                height: 40,
                                borderRadius: 999,
                                background: 'var(--surface-2)',
                                display: 'grid',
                                placeItems: 'center',
                                fontSize: 13,
                                fontWeight: 700,
                                color: 'var(--ink-2)'
                            }}>
                                {m.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
                            </div>
                            <div style={{flex: 1, minWidth: 0}}>
                                <div style={{
                                    fontWeight: 700,
                                    fontSize: 14,
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 6
                                }}>
                                    {m.name}{m.officer &&
                                    <Icon name="shield" size={13} style={{color: 'var(--ink-3)'}}/>}
                                </div>
                                <div style={{
                                    fontSize: 12,
                                    color: 'var(--ink-3)',
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis'
                                }}>{m.scope}</div>
                            </div>
                            <Badge tone={roleTone[m.role]}>{m.role[0] + m.role.slice(1).toLowerCase()}</Badge>
                        </div>
                    ))}
                </Card>
            </div>

            {/* security */}
            <div>
                <SectionLabel>Security</SectionLabel>
                <Card style={{padding: 0}}>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 12,
                        padding: 'var(--pad)',
                        borderBottom: '1px solid var(--line-2)'
                    }}>
                        <div style={{
                            width: 40,
                            height: 40,
                            borderRadius: 10,
                            background: 'var(--surface-2)',
                            display: 'grid',
                            placeItems: 'center',
                            color: 'var(--ink-2)'
                        }}>
                            <Icon name="shield" size={20}/>
                        </div>
                        <div style={{flex: 1}}>
                            <div style={{fontWeight: 700, fontSize: 14}}>Two-Factor Auth</div>
                            <div style={{
                                fontSize: 12,
                                color: 'var(--ink-3)'
                            }}>{isSov ? 'Required before any advance request' : 'Optional for your role'}</div>
                        </div>
                        <Toggle on={twofa} onClick={() => setTwofa(v => !v)}/>
                    </div>
                    <div style={{display: 'flex', alignItems: 'center', gap: 12, padding: 'var(--pad)'}}>
                        <div style={{
                            width: 40,
                            height: 40,
                            borderRadius: 10,
                            background: 'var(--surface-2)',
                            display: 'grid',
                            placeItems: 'center',
                            color: 'var(--ink-2)'
                        }}>
                            <Icon name="clock" size={20}/>
                        </div>
                        <div style={{flex: 1}}>
                            <div style={{fontWeight: 700, fontSize: 14}}>Active sessions</div>
                            <div style={{fontSize: 12, color: 'var(--ink-3)'}}>Chrome · Nairobi · now</div>
                        </div>
                        <span className="g-tap" style={{
                            fontSize: 13,
                            fontWeight: 700,
                            color: 'var(--warn)',
                            cursor: 'pointer'
                        }}>Revoke</span>
                    </div>
                </Card>
            </div>

            <div style={{textAlign: 'center', fontSize: 12, color: 'var(--ink-3)', padding: '4px 0 8px'}}>
                Gigi Money · CBK Digital Credit Provider · All actions are audit-logged
            </div>

            {/* Re-auth sheet */}
            <Sheet open={reauth} onClose={() => setReauth(false)} title="Re-authenticate">
                <div style={{textAlign: 'center', padding: '4px 0 8px'}}>
                    <div style={{
                        width: 56,
                        height: 56,
                        borderRadius: 16,
                        background: 'var(--surface-2)',
                        display: 'grid',
                        placeItems: 'center',
                        margin: '0 auto',
                        color: 'var(--ink-2)'
                    }}>
                        <Icon name="lock" size={26}/>
                    </div>
                    <p style={{fontSize: 14, color: 'var(--ink-2)', margin: '14px 0 20px', lineHeight: 1.55}}>
                        Enter the 6-digit code sent to your registered device.
                    </p>
                    <div style={{display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 22}}>
                        {[2, 9, 4, '', '', ''].map((d, i) => (
                            <div key={i} className="g-num" style={{
                                width: 46,
                                height: 56,
                                borderRadius: 12,
                                border: `1.5px solid ${d !== '' ? 'var(--accent-ink)' : 'var(--line)'}`,
                                display: 'grid',
                                placeItems: 'center',
                                fontSize: 24,
                                fontWeight: 700,
                                background: 'var(--surface-2)'
                            }}>{d}</div>
                        ))}
                    </div>
                    <Btn kind="primary" full onClick={() => setReauth(false)}>Verify & continue</Btn>
                </div>
            </Sheet>
        </div>
    );
}

Object.assign(window, {SettingsScreen});