// Vi — Connected apps management screen.
// Lives inside the Vi app. Review or revoke consent granted to third-party apps.

const ViManageConsent = ({ phone, connections, onRevoke, onSelect, selectedAppId, lang }) => {
  const t = lang === 'hi' ? {
    title: 'जुड़े हुए ऐप्स',
    sub: 'Login with Vi से जुड़े ऐप्स। अनुमति बदलें या वापस लें।',
    back: 'वापस', active: 'सक्रिय', revoked: 'रद्द',
    sharing: 'साझा', revoke: 'अनुमति वापस लें',
    granted: 'जोड़ा',
  } : {
    title: 'Connected apps',
    sub: 'Apps you signed in to with Vi. Change or withdraw consent any time.',
    back: 'Back', active: 'Active', revoked: 'Revoked',
    sharing: 'Sharing', revoke: 'Withdraw consent',
    granted: 'Connected',
  };

  return (
    <div style={{
      height: '100%', background: VI.paper, color: VI.ink,
      display: 'flex', flexDirection: 'column',
      fontFamily: "'DM Sans', system-ui",
    }}>
      {/* Top bar */}
      <div style={{
        padding: '14px 18px', background: '#fff',
        borderBottom: `1px solid ${VI.line}`, flexShrink: 0,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <ViLogo height={22} />
        <div style={{
          marginLeft: 'auto',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: VI.body,
          whiteSpace: 'nowrap',
        }}>{phone}</div>
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflow: 'auto', padding: '18px 18px 22px' }}>
        <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: -0.4 }}>
          {t.title}
        </h2>
        <p style={{ margin: '6px 0 18px', fontSize: 13, color: VI.body, lineHeight: 1.55 }}>
          {t.sub}
        </p>

        {/* List */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {connections.map((c) => {
            const isSelected = c.id === selectedAppId;
            return (
              <button key={c.id} onClick={() => onSelect(c.id === selectedAppId ? null : c.id)} style={{
                background: '#fff', border: `1px solid ${isSelected ? VI.ink : VI.line}`,
                borderRadius: 14, padding: 0, cursor: 'pointer', textAlign: 'left',
                fontFamily: 'inherit', overflow: 'hidden',
                transition: 'border-color .15s ease',
              }}>
                <div style={{
                  padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  {/* App avatar */}
                  <div style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: c.color,
                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: "'DM Sans', system-ui", fontWeight: 700, fontSize: 16,
                    flexShrink: 0,
                  }}>{c.name[0].toLowerCase()}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 600, color: VI.ink }}>{c.name}</div>
                      {c.revoked && (
                        <div style={{
                          padding: '2px 7px', borderRadius: 100,
                          fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
                          letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 600,
                          background: 'rgba(184,80,13,0.1)',
                          color: VI.amber,
                        }}>{t.revoked}</div>
                      )}
                    </div>
                    <div style={{ fontSize: 12, color: VI.soft, marginTop: 3 }}>
                      {c.lastSeen}
                    </div>
                  </div>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{
                    transform: isSelected ? 'rotate(90deg)' : 'none',
                    transition: 'transform .18s ease',
                    color: VI.soft,
                  }}>
                    <path d="M5 3 L9 7 L5 11" stroke="currentColor" strokeWidth="1.6"
                      strokeLinecap="round" strokeLinejoin="round" fill="none" />
                  </svg>
                </div>

                {/* Expanded detail */}
                {isSelected && (
                  <div style={{
                    borderTop: `1px solid ${VI.line}`,
                    padding: '14px 16px', background: VI.paper2,
                  }}>
                    <div style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                      letterSpacing: 0.6, textTransform: 'uppercase', color: VI.soft, marginBottom: 10,
                    }}>{t.sharing}</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 14 }}>
                      {c.shares.map((s, i) => (
                        <div key={i} style={{
                          padding: '4px 10px', borderRadius: 100,
                          background: '#fff', border: `1px solid ${VI.line}`,
                          fontSize: 12, color: VI.ink,
                        }}>
                          {s}
                        </div>
                      ))}
                    </div>

                    {!c.revoked && (
                      <button onClick={(e) => { e.stopPropagation(); onRevoke(c.id); }} style={{
                        width: '100%', padding: '12px 14px', borderRadius: 10,
                        background: '#fff', border: `1px solid ${VI.red}`,
                        color: VI.red, fontFamily: 'inherit', fontSize: 13.5, fontWeight: 600,
                        cursor: 'pointer',
                      }}>
                        {t.revoke}
                      </button>
                    )}
                  </div>
                )}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

// Default connections seed
const DEFAULT_CONNECTIONS = [
  {
    id: 'bazaar', name: 'Bazaar', color: '#e91e63',
    revoked: false, lastSeen: 'Connected today',
    shares: ['Mobile number', 'Full name', 'Gender', 'Device info'],
  },
  {
    id: 'astrotalk', name: 'Astrotalk', color: '#7c4dff',
    revoked: false, lastSeen: 'Connected 3 days ago',
    shares: ['Mobile number', 'Full name', 'Date of birth'],
  },
  {
    id: 'shipro', name: 'Shiprocket', color: '#1f6feb',
    revoked: false, lastSeen: 'Connected 2 weeks ago',
    shares: ['Mobile number', 'Full name', 'Email', 'Billing address'],
  },
  {
    id: 'inshorts', name: 'Inshorts', color: '#ff5722',
    revoked: true, lastSeen: 'Revoked 1 month ago',
    shares: ['Mobile number'],
  },
];

Object.assign(window, { ViManageConsent, DEFAULT_CONNECTIONS });