// Invite friends — referral code share

function SettingsReferralScreen({ theme, accent, onBack }) {
  const code = 'LAYLA-HIMMA';
  const link = `https://himma.app/i/${code.toLowerCase()}`;
  const [copied, setCopied] = React.useState(false);

  const onCopy = () => {
    if (navigator?.clipboard) navigator.clipboard.writeText(link).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  const onShare = () => {
    if (navigator.share) {
      navigator.share({ title: 'Try Himma', text: `Join me on Himma — your financial OS. Use my code ${code}`, url: link }).catch(() => {});
    } else {
      onCopy();
    }
  };

  return (
    <Screen theme={theme} padTop={0} padBottom={40}>
      <NavBar theme={theme} title="Invite friends" onBack={onBack}/>

      {/* Hero */}
      <div style={{ padding: '8px 16px 0', textAlign: 'center' }}>
        <div style={{
          width: 60, height: 60, borderRadius: 30, margin: '12px auto 14px',
          background: `${accent}1A`, color: accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><Ico.gem size={26}/></div>
        <div style={{ fontFamily: FONTS.display, fontSize: 22, color: theme.text, lineHeight: 1.25, padding: '0 16px' }}>
          Give a month free, get a month free
        </div>
        <div style={{ fontSize: 12.5, color: theme.textDim, marginTop: 8, padding: '0 24px', lineHeight: 1.55 }}>
          When a friend joins Himma Pro using your code, you both get one month on us.
        </div>
      </div>

      {/* Code */}
      <div style={{ padding: '24px 16px 0' }}>
        <Card theme={theme} padded={false} style={{ padding: 16 }}>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase',
            color: theme.textMute, marginBottom: 8,
          }}>Your code</div>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
            padding: '12px 14px',
            background: theme.surface2, borderRadius: 12,
            border: `0.5px solid ${theme.line2}`,
          }}>
            <span style={{ fontFamily: FONTS.mono, fontSize: 15, color: theme.text, letterSpacing: 1.2 }}>{code}</span>
            <button onClick={onCopy} style={{
              background: 'transparent', border: 'none',
              color: copied ? theme.positive : accent,
              fontFamily: FONTS.ui, fontSize: 12, fontWeight: 600,
              cursor: 'pointer', padding: '4px 8px',
            }}>{copied ? 'Copied' : 'Copy'}</button>
          </div>

          <button onClick={onShare} style={{
            marginTop: 14, width: '100%',
            background: theme.text, color: theme.bg,
            border: 'none', borderRadius: 12,
            padding: '12px',
            fontFamily: FONTS.ui, fontSize: 13, fontWeight: 600,
            cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Ico.send size={14} stroke={theme.bg} sw={2}/> Share invite
          </button>
        </Card>
      </div>

      {/* Stats */}
      <div style={{ padding: '22px 16px 0' }}>
        <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>Your invites</SectionLabel>
        <Card theme={theme} padded={false} style={{ padding: 16, display: 'flex', justifyContent: 'space-around' }}>
          <Stat theme={theme} label="Sent"     value="7"/>
          <Stat theme={theme} label="Joined"   value="3"/>
          <Stat theme={theme} label="Months earned" value="3"/>
        </Card>
      </div>

      {/* How it works */}
      <div style={{ padding: '22px 16px 0' }}>
        <SectionLabel theme={theme} style={{ padding: '0 4px 8px' }}>How it works</SectionLabel>
        <Card theme={theme} padded={false} style={{ padding: 16 }}>
          {[
            'Share your code with a friend.',
            'They sign up and start a Pro subscription.',
            'You both get one month of Pro on us.',
          ].map((t, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12,
              padding: '8px 0',
              borderBottom: i === arr.length - 1 ? 'none' : `0.5px solid ${theme.line}`,
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11,
                background: `${accent}18`, color: accent,
                fontFamily: FONTS.mono, fontSize: 11, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, marginTop: 1,
              }}>{i + 1}</div>
              <div style={{ fontSize: 13, color: theme.text, lineHeight: 1.5 }}>{t}</div>
            </div>
          ))}
        </Card>
      </div>
    </Screen>
  );
}

function Stat({ theme, label, value }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ fontFamily: FONTS.display, fontSize: 22, color: theme.text }}>{value}</div>
      <div style={{ fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 1, textTransform: 'uppercase', color: theme.textMute, marginTop: 4 }}>{label}</div>
    </div>
  );
}

Object.assign(window, { SettingsReferralScreen });