// ViSdkSheet — the entire Vi-powered SDK surface lives in this single bottom sheet.
// Internal step machine: verifying → consent → (dpdp) → done.
// The partner app stays mounted as the base layer; the sheet morphs in place.

// ─────────────────────────────────────────────────────────────
// Data model: purposes → attributes
// ─────────────────────────────────────────────────────────────
const CONSENT_MODEL = [
  {
    id: 'identity',
    title: 'Identity',
    retention: 'Lifetime',
    attrs: [
      { id: 'phone', label: 'Mobile number', sub: 'Verified by Vi', required: true, defaultOn: true },
    ],
  },
  {
    id: 'personalize',
    title: 'Personalisation',
    retention: '24 months',
    attrs: [
      { id: 'name',   label: 'Full name',     defaultOn: true },
      { id: 'gender', label: 'Gender',        defaultOn: true },
      { id: 'dob',    label: 'Date of birth', defaultOn: false },
    ],
  },
  {
    id: 'delivery',
    title: 'Faster checkout',
    retention: '24 months',
    attrs: [
      { id: 'email',   label: 'Email address',    defaultOn: false },
      { id: 'address', label: 'Billing address',  defaultOn: false },
    ],
  },
  {
    id: 'security',
    title: 'Security',
    retention: '12 months',
    attrs: [
      { id: 'device',   label: 'Device info',     sub: 'Model, OS, IMEI hash', defaultOn: true  },
      { id: 'location', label: 'Coarse location', sub: 'Cell-tower level',     defaultOn: false },
    ],
  },
];

const ATTR_LIST = CONSENT_MODEL.flatMap((p) => p.attrs.map((a) => ({ ...a, purposeId: p.id })));

// ─────────────────────────────────────────────────────────────
// Toggle (with locked-on state for required attributes)
// ─────────────────────────────────────────────────────────────
const Toggle = ({ on, onChange, disabled }) => (
  <button
    onClick={() => !disabled && onChange(!on)}
    disabled={disabled}
    style={{
      width: 38, height: 22, borderRadius: 100,
      background: disabled ? (on ? VI.ink : VI.lineStrong) : (on ? VI.ink : '#d4cebc'),
      border: 'none', padding: 0, cursor: disabled ? 'not-allowed' : 'pointer',
      position: 'relative', flexShrink: 0,
      transition: 'background .18s ease',
      opacity: disabled ? 0.85 : 1,
    }}
    aria-label={on ? 'On' : 'Off'}
  >
    <div style={{
      position: 'absolute', top: 2, left: on ? 18 : 2,
      width: 18, height: 18, borderRadius: '50%',
      background: '#fff',
      transition: 'left .18s cubic-bezier(.2,.7,.2,1)',
      boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {disabled && on && (
        <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
          <rect x="2" y="4" width="5" height="4" rx="0.7" stroke={VI.ink} strokeWidth="1" fill="none"/>
          <path d="M3 4 V3 a1.5 1.5 0 0 1 3 0 V4" stroke={VI.ink} strokeWidth="1" fill="none" strokeLinecap="round"/>
        </svg>
      )}
    </div>
  </button>
);

// ─────────────────────────────────────────────────────────────
// Step 1 — Verifying (network handshake, fetches MSISDN)
// ─────────────────────────────────────────────────────────────
const VerifyingPanel = ({ onVerified, lang }) => {
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 1600);
    const t2 = setTimeout(() => { if (onVerified) onVerified(); }, 2400);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  const phases = lang === 'hi'
    ? ['Vi से जुड़ रहे हैं', 'नंबर सत्यापित']
    : ['Connecting with Vi', 'Number verified'];

  const progressPct = phase === 0 ? 55 : 100;

  return (
    <div style={{
      padding: '8px 24px 28px', display: 'flex', flexDirection: 'column',
      alignItems: 'center', textAlign: 'center', gap: 22,
    }}>
      {/* Hero: rotating gradient ring around Vi mark, with SIM glyph */}
      <div style={{ position: 'relative', width: 132, height: 132 }}>
        {/* Background ring */}
        <svg width="132" height="132" viewBox="0 0 132 132" style={{ position: 'absolute', inset: 0 }}>
          <circle cx="66" cy="66" r="58" fill="none"
            stroke={VI.line} strokeWidth="3" />
        </svg>
        {/* Animated arc */}
        <svg width="132" height="132" viewBox="0 0 132 132"
          style={{
            position: 'absolute', inset: 0,
            animation: phase < 1 ? 'rotate 1.5s linear infinite' : 'none',
            transformOrigin: '66px 66px',
          }}>
          <defs>
            <linearGradient id="vi-arc" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor={VI.red} />
              <stop offset="1" stopColor={VI.yellow} />
            </linearGradient>
          </defs>
          <circle cx="66" cy="66" r="58" fill="none"
            stroke={phase < 1 ? 'url(#vi-arc)' : VI.green}
            strokeWidth={phase < 1 ? 3.5 : 5}
            strokeDasharray={phase < 1 ? '120 250' : '364 0'}
            strokeLinecap="round" />
        </svg>
        {/* Center: SIM card / check */}
        <div style={{
          position: 'absolute', inset: 22, borderRadius: '50%',
          background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: phase < 1
            ? 'inset 0 0 0 1px ' + VI.line
            : 'inset 0 0 0 1px rgba(15,138,95,0.25)',
        }}>
          {phase < 1 ? (
            // SIM card glyph
            <svg width="42" height="48" viewBox="0 0 42 48" fill="none">
              <path d="M5 4 H29 L37 12 V44 a2 2 0 0 1 -2 2 H7 a2 2 0 0 1 -2 -2 V6 a2 2 0 0 1 2 -2 Z"
                stroke={VI.ink} strokeWidth="1.6" fill="none" strokeLinejoin="round" />
              {/* gold chip */}
              <rect x="11" y="18" width="20" height="16" rx="2.5" fill={VI.yellow} />
              <line x1="17" y1="18" x2="17" y2="34" stroke="#a87f00" strokeWidth="0.9" />
              <line x1="25" y1="18" x2="25" y2="34" stroke="#a87f00" strokeWidth="0.9" />
              <line x1="11" y1="26" x2="31" y2="26" stroke="#a87f00" strokeWidth="0.9" />
            </svg>
          ) : (
            <svg width="46" height="46" viewBox="0 0 46 46" fill="none">
              <circle cx="23" cy="23" r="21" fill={VI.green} />
              <path d="M14 23 L20 29 L32 17" stroke="#fff" strokeWidth="3.2"
                strokeLinecap="round" strokeLinejoin="round" fill="none" />
            </svg>
          )}
        </div>
      </div>

      {/* Status text */}
      <div>
        <div style={{
          fontSize: 18, fontWeight: 600, letterSpacing: -0.3, color: VI.ink,
          minHeight: 24,
        }}>{phases[phase]}</div>
        <div style={{
          marginTop: 6, fontSize: 12, color: VI.soft, lineHeight: 1.5,
        }}>
          {lang === 'hi' ? 'सुरक्षित सेल्युलर चैनल पर' : 'Over a secure cellular channel'}
        </div>
      </div>

      {/* Progress bar */}
      <div style={{
        width: '100%', height: 4, background: VI.line, borderRadius: 4, overflow: 'hidden',
      }}>
        <div style={{
          height: '100%', width: `${progressPct}%`,
          background: phase < 1
            ? `linear-gradient(90deg, ${VI.red}, ${VI.yellow})`
            : VI.green,
          borderRadius: 4,
          transition: 'width .5s ease, background .3s ease',
        }} />
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Step 2 — Consent (verified phone + per-attribute toggles, all in one)
// ─────────────────────────────────────────────────────────────
const ConsentPanel = ({ phone, partnerName, selections, onToggle, onContinue, onShareOnlyRequired, onSeeDpdp, lang }) => {
  const t = lang === 'hi' ? {
    title: `${partnerName} को क्या जानकारी दें`,
    sub: 'आपका Vi नंबर सत्यापित है। नीचे से चुनें कि क्या साझा करना है।',
    via: 'Vi · सत्यापित',
    cta: 'जारी रखें', onlyReq: 'सिर्फ नंबर साझा करें',
    dpdp: 'सूचना और अधिकार',
  } : {
    title: `What ${partnerName} can access`,
    sub: 'Your Vi number is verified. Choose what else to share.',
    via: 'Vi · verified',
    cta: 'Continue', onlyReq: 'Share only mobile number',
    dpdp: 'Notice & your rights',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
      <div style={{ padding: '0 22px 10px', flexShrink: 0 }}>
        <h2 style={{
          margin: 0, fontSize: 20, fontWeight: 600, letterSpacing: -0.4, lineHeight: 1.2,
        }}>{t.title}</h2>
        <p style={{ margin: '4px 0 12px', fontSize: 12.5, color: VI.body, lineHeight: 1.5 }}>{t.sub}</p>

        {/* Verified phone card */}
        <div style={{
          padding: '12px 14px', borderRadius: 12,
          background: VI.paper2, border: `1px solid ${VI.line}`,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 24, height: 24, borderRadius: '50%',
            background: VI.green, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6 L5 9 L10 4"
              stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 14,
              fontWeight: 600, color: VI.ink, letterSpacing: 0.2,
            }}>{phone}</div>
            <div style={{
              fontSize: 10, color: VI.soft, marginTop: 1,
              fontFamily: "'JetBrains Mono', monospace", letterSpacing: 0.4, textTransform: 'uppercase',
            }}>{t.via}</div>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '10px 22px 14px' }}>
        {CONSENT_MODEL.filter((p) => p.id !== 'identity').map((p) => (
          <div key={p.id} style={{
            marginBottom: 10, padding: '12px 14px',
            background: '#fff', borderRadius: 12,
            border: `1px solid ${VI.line}`,
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8,
              paddingBottom: 8, borderBottom: `1px solid ${VI.line}`,
            }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: VI.ink, letterSpacing: -0.2 }}>
                {p.title}
              </div>
              <div style={{
                marginLeft: 'auto',
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                letterSpacing: 0.4, textTransform: 'uppercase', color: VI.soft,
                whiteSpace: 'nowrap',
              }}>{p.retention}</div>
            </div>

            {p.attrs.map((a, i) => (
              <div key={a.id} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '8px 0',
                borderTop: i === 0 ? 'none' : `1px solid ${VI.line}`,
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, color: VI.ink }}>{a.label}</div>
                  {a.sub && <div style={{ fontSize: 11, color: VI.soft, marginTop: 2 }}>{a.sub}</div>}
                </div>
                <Toggle on={!!selections[a.id]} onChange={(v) => onToggle(a.id, v)} disabled={a.required} />
              </div>
            ))}
          </div>
        ))}

        <button onClick={onSeeDpdp} style={{
          width: '100%', textAlign: 'left', cursor: 'pointer',
          background: 'transparent', border: 'none',
          padding: '8px 0 0', display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: 'inherit', color: VI.body,
        }}>
          <DPDPShield size={14} color={VI.body} />
          <span style={{ fontSize: 12.5, fontWeight: 500, textDecoration: 'underline' }}>{t.dpdp}</span>
        </button>
      </div>

      <div style={{
        padding: '12px 22px 8px', background: '#fff',
        borderTop: `1px solid ${VI.line}`, flexShrink: 0,
      }}>
        <button onClick={onContinue} style={{
          width: '100%', padding: '13px 18px', borderRadius: 12,
          background: VI.red, color: '#fff', border: 'none',
          fontFamily: "'DM Sans', system-ui", fontSize: 14.5, fontWeight: 600,
          cursor: 'pointer',
        }}>{t.cta}</button>
        <button onClick={onShareOnlyRequired} style={{
          width: '100%', padding: '8px 0 0', background: 'transparent', border: 'none',
          color: VI.body, fontFamily: "'DM Sans', system-ui", fontSize: 12.5, fontWeight: 500,
          cursor: 'pointer',
        }}>{t.onlyReq}</button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Step 3 — DPDP notice (push view inside sheet)
// ─────────────────────────────────────────────────────────────
const DpdpPanel = ({ partnerName, onBack, lang }) => {
  const t = lang === 'hi' ? { back: 'वापस', title: 'सूचना और अधिकार', close: 'समझ गया' }
                          : { back: 'Back', title: 'Notice & your rights', close: 'Got it' };
  const sections = lang === 'hi' ? [
    { label: 'उद्देश्य', body: 'हर श्रेणी एक ही उद्देश्य के लिए। दूसरे काम के लिए नई सहमति चाहिए।' },
    { label: 'अनुमति वापस लें', body: `Vi ऐप → खाता → जुड़े ऐप्स → ${partnerName}. 24 घंटे में लागू।` },
    { label: 'आपके अधिकार', body: 'देखें, ठीक करें, मिटाएँ, या nomination करें।' },
    { label: 'भारत में संग्रहित', body: 'सारा डेटा भारत के डेटा सेंटर में रहता है।' },
    { label: 'शिकायत अधिकारी', body: 'grievance@myvi.in · 7 दिन में जवाब।' },
  ] : [
    { label: 'Purpose-bound', body: 'Each category is used for one purpose only. Anything else needs fresh consent.' },
    { label: 'Withdraw any time', body: `Vi app → Account → Connected apps → ${partnerName}. Effective in 24 hours.` },
    { label: 'Your rights', body: 'Access, correct, erase or nominate someone else for your data.' },
    { label: 'Stored in India', body: 'Your data stays within Indian data centres. No cross-border transfer.' },
    { label: 'Grievance Officer', body: 'grievance@myvi.in · response in 7 days.' },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
      <div style={{
        padding: '0 22px 8px', display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
      }}>
        <button onClick={onBack} style={{
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 4, marginLeft: -4,
        }} aria-label={t.back}>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M12 4 L6 10 L12 16" stroke={VI.ink} strokeWidth="1.8" fill="none"
              strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        <DPDPShield size={16} />
        <div style={{ fontSize: 16, fontWeight: 600, color: VI.ink, letterSpacing: -0.3 }}>{t.title}</div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '0 22px 12px' }}>
        {sections.map((s, i) => (
          <div key={i} style={{ padding: '12px 0', borderTop: `1px solid ${VI.line}` }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
              letterSpacing: 0.7, textTransform: 'uppercase', color: VI.soft, marginBottom: 4,
            }}>{s.label}</div>
            <div style={{ fontSize: 12.5, color: VI.ink, lineHeight: 1.55 }}>{s.body}</div>
          </div>
        ))}
      </div>

      <div style={{
        padding: '12px 22px 8px', borderTop: `1px solid ${VI.line}`,
        background: '#fff', flexShrink: 0,
      }}>
        <button onClick={onBack} style={{
          width: '100%', padding: '13px 18px', borderRadius: 12,
          background: VI.ink, color: '#fff', border: 'none',
          fontFamily: 'inherit', fontSize: 14, fontWeight: 600, cursor: 'pointer',
        }}>{t.close}</button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Step 4 — Done (brief success state before sheet dismisses)
// ─────────────────────────────────────────────────────────────
const DonePanel = ({ partnerName, lang }) => {
  const t = lang === 'hi'
    ? { title: 'साइन इन हो गए', sub: `${partnerName} में ले जा रहे हैं…` }
    : { title: 'Signed in', sub: `Returning to ${partnerName}…` };
  return (
    <div style={{
      padding: '8px 22px 28px', display: 'flex', flexDirection: 'column',
      alignItems: 'center', textAlign: 'center', gap: 18,
    }}>
      <div style={{
        width: 76, height: 76, borderRadius: '50%',
        background: VI.green,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="34" height="34" viewBox="0 0 44 44" fill="none">
          <path d="M14 22 L20 28 L31 16" stroke="#fff" strokeWidth="3.2"
            strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </div>
      <div>
        <div style={{ fontSize: 18, fontWeight: 600, color: VI.ink, letterSpacing: -0.3 }}>{t.title}</div>
        <div style={{ fontSize: 12.5, color: VI.body, marginTop: 4 }}>{t.sub}</div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// ViSdkSheet — the modal that hosts the flow
// ─────────────────────────────────────────────────────────────
const SHEET_HEIGHTS = {
  verifying: 420,
  consent:   640,
  dpdp:      560,
  done:      300,
};

const ViSdkSheet = ({
  phone, partnerName = 'Bazaar',
  sheetStep,                  // 'verifying' | 'consent' | 'dpdp' | 'done'
  selections, onToggle,
  onVerified,
  onContinueFromConsent,
  onShareOnlyRequired,
  onSeeDpdp, onBackFromDpdp,
  onCancel,
  lang,
}) => {
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    const id = setTimeout(() => setMounted(true), 20);
    return () => clearTimeout(id);
  }, []);

  const height = SHEET_HEIGHTS[sheetStep] || 420;
  const showCloseX = sheetStep === 'consent';

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 10,
      background: mounted ? 'rgba(0,0,0,0.45)' : 'rgba(0,0,0,0)',
      transition: 'background .25s ease',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'stretch',
    }} onClick={(sheetStep === 'verifying' || sheetStep === 'done') ? undefined : onCancel}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', height,
        background: '#fff', color: VI.ink,
        borderTopLeftRadius: 22, borderTopRightRadius: 22,
        transform: mounted ? 'translateY(0)' : 'translateY(100%)',
        transition: 'transform .32s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1)',
        display: 'flex', flexDirection: 'column',
        boxSizing: 'border-box',
        overflow: 'hidden',
        boxShadow: '0 -10px 40px -10px rgba(0,0,0,0.18)',
      }}>
        {/* Drag handle */}
        <div style={{ display: 'flex', justifyContent: 'center', flexShrink: 0, paddingTop: 8, paddingBottom: 4 }}>
          <div style={{ width: 36, height: 4, borderRadius: 2, background: VI.line }} />
        </div>

        {/* Sheet header */}
        <div style={{
          padding: '8px 22px 14px', display: 'flex', alignItems: 'center', flexShrink: 0,
        }}>
          <ViLogo height={24} />
          {showCloseX && (
            <button onClick={onCancel} style={{
              marginLeft: 'auto', background: 'transparent', border: 'none', cursor: 'pointer',
              padding: 4, color: VI.soft,
            }} aria-label="Close">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                <path d="M4 4 L14 14 M14 4 L4 14" stroke={VI.soft} strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
            </button>
          )}
        </div>

        {/* Step content */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          {sheetStep === 'verifying' && (
            <VerifyingPanel onVerified={onVerified} lang={lang} />
          )}
          {sheetStep === 'consent' && (
            <ConsentPanel phone={phone} partnerName={partnerName}
              selections={selections} onToggle={onToggle}
              onContinue={onContinueFromConsent}
              onShareOnlyRequired={onShareOnlyRequired}
              onSeeDpdp={onSeeDpdp} lang={lang} />
          )}
          {sheetStep === 'dpdp' && (
            <DpdpPanel partnerName={partnerName} onBack={onBackFromDpdp} lang={lang} />
          )}
          {sheetStep === 'done' && (
            <DonePanel partnerName={partnerName} lang={lang} />
          )}
        </div>

        {/* Persistent footer: powered by OTPless */}
        <div style={{
          flexShrink: 0,
          padding: '10px 22px 14px',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          background: '#fff',
        }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5,
            letterSpacing: 0.8, textTransform: 'uppercase', color: VI.soft,
          }}>Powered by</span>
          <img src="assets/otpless-logo-full-240.png" alt="OTPless"
            style={{ height: 13, width: 'auto', opacity: 0.7, display: 'block' }} />
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { ViSdkSheet, CONSENT_MODEL, ATTR_LIST, SHEET_HEIGHTS });