// MedBridge — onboarding, call screen, applicants board.

const { useState: useSt2 } = React;

// ─────────────────────────────────────────────────────────────
// Onboarding (4 steps: welcome → confirm data → career stage → notifications)
// ─────────────────────────────────────────────────────────────
function Onboarding({ initialStage, onFinish, startStep = 0 }) {
  const [step, setStep] = useSt2(startStep);
  const [stage, setStage] = useSt2(initialStage || 'Niederg');
  const total = 4;

  const stages = [
    { id: 'KPJ',     title: 'KPJ-Studierende:r', sub: 'Klinisch-praktisches Jahr · MedUni-Bestätigung erforderlich', ic: 'graduation' },
    { id: 'AssAM',   title: 'Assistenzarzt — Allgemeinmedizin', sub: 'In Ausbildung Allgemeinmedizin', ic: 'stethoscope' },
    { id: 'AssSF',   title: 'Assistenzarzt — Sonderfach', sub: 'In Sonderfach-Ausbildung', ic: 'syringe' },
    { id: 'Niederg', title: 'Niedergelassene:r Arzt:Ärztin', sub: 'Eigene Praxis · Kassen- oder Wahlarzt', ic: 'home' },
    { id: 'Spital',  title: 'Spitalsarzt:Spitalsärztin', sub: 'Angestellt im Krankenhaus', ic: 'building' },
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, background: MB.surface.canvas, display: 'flex', flexDirection: 'column' }}>
      {/* status bar spacer + progress + skip/back */}
      <div style={{ padding: '52px 20px 8px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {step > 0 && (
            <button onClick={() => setStep(s => s - 1)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0, display: 'inline-flex' }}>
              <Icon name="chevron-l" size={22} color={MB.ink.primary} />
            </button>
          )}
          <div style={{ flex: 1, height: 4, background: MB.surface.canvas2, borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${((step+1)/total)*100}%`, height: '100%', background: MB.brand[700], transition: 'width 200ms ease-out' }} />
          </div>
          <span style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, fontVariantNumeric: 'tabular-nums' }}>{step+1} / {total}</span>
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '12px 24px 24px' }}>
        {step === 0 && (
          <>
            <div style={{ width: 64, height: 64, borderRadius: 16, background: MB.brand[50], border: `1px solid ${MB.brand[100]}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
              <Icon name="shield" size={28} color={MB.brand[700]} />
            </div>
            <h1 style={{ fontFamily: MB.font, fontSize: 28, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.4, margin: '0 0 10px', lineHeight: 1.15 }}>Willkommen bei MedBridge</h1>
            <p style={{ fontFamily: MB.font, fontSize: 16, color: MB.ink.secondary, lineHeight: 1.5, margin: 0 }}>
              Der verifizierte Marktplatz für Vertretungen und Ausbildungsstellen in Österreich. Anmeldung über ID Austria.
            </p>
            <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['badge-check', 'Verifizierte Kolleg:innen', 'Identität & Ärztekammer-Status geprüft'],
                ['stethoscope', 'Vertretungen', 'Praxisabdeckung bei Urlaub, Krankheit, Fortbildung'],
                ['graduation',  'Ausbildungsstellen', 'KPJ · Lehrpraxis AM · Lehrpraxis Sonderfach'],
              ].map(([ic, l, d]) => (
                <div key={l} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 8, background: MB.surface.canvas2, color: MB.brand[700], display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={ic} size={18} />
                  </span>
                  <div>
                    <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 600, color: MB.ink.primary }}>{l}</div>
                    <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ink.tertiary, marginTop: 2 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {step === 1 && (
          <>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: MB.success[100], borderRadius: 999, marginBottom: 14 }}>
              <Icon name="badge-check" size={14} color={MB.success[700]} />
              <span style={{ fontFamily: MB.font, fontSize: 12, fontWeight: 700, color: MB.success[700], letterSpacing: 0.2 }}>VIA ID AUSTRIA BESTÄTIGT</span>
            </div>
            <h1 style={{ fontFamily: MB.font, fontSize: 26, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, margin: '0 0 6px' }}>Ihre Daten bestätigen</h1>
            <p style={{ fontFamily: MB.font, fontSize: 15, color: MB.ink.secondary, margin: 0, lineHeight: 1.5 }}>
              So wird Ihr Profil anderen Ärzt:innen angezeigt.
            </p>
            <div style={{ marginTop: 18, background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 14, overflow: 'hidden' }}>
              {[
                ['Titel & Name', 'Dr. med. univ. Maria Hofer'],
                ['Geburtsdatum', '14. 03. 1979'],
                ['ÖÄK-Nummer', '34 581 04'],
                ['Status Ärztekammer', 'Aktiv · Wien'],
                ['E-Mail', 'm.hofer@…'],
              ].map((r, i, a) => (
                <div key={r[0]} style={{ padding: '12px 14px', borderBottom: i < a.length - 1 ? `1px solid ${MB.line.hair}` : 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontFamily: MB.font, fontSize: 11, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase', color: MB.ink.tertiary }}>{r[0]}</div>
                    <div style={{ marginTop: 3, fontFamily: MB.font, fontSize: 15, color: MB.ink.primary, fontWeight: 500 }}>{r[1]}</div>
                  </div>
                  <Icon name="badge-check" size={16} color={MB.success[600]} />
                </div>
              ))}
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h1 style={{ fontFamily: MB.font, fontSize: 26, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, margin: '0 0 6px' }}>Ihre Karrierestufe</h1>
            <p style={{ fontFamily: MB.font, fontSize: 15, color: MB.ink.secondary, margin: 0, lineHeight: 1.5 }}>
              Bestimmt, welche Inserate für Sie verfügbar sind und ob Sie selbst anbieten können.
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {stages.map(s => {
                const active = stage === s.id;
                return (
                  <button key={s.id} onClick={() => setStage(s.id)} style={{
                    textAlign: 'left', cursor: 'pointer',
                    border: `1.5px solid ${active ? MB.brand[600] : MB.line.hair}`,
                    background: active ? MB.brand[50] : MB.surface.raised,
                    borderRadius: 12, padding: '12px 14px', display: 'flex', gap: 12, alignItems: 'center',
                  }}>
                    <span style={{ width: 40, height: 40, borderRadius: 10, background: active ? MB.brand[100] : MB.surface.canvas2, color: active ? MB.brand[700] : MB.ink.secondary, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Icon name={s.ic} size={20} />
                    </span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 700, color: MB.ink.primary }}>{s.title}</div>
                      <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, marginTop: 2 }}>{s.sub}</div>
                    </div>
                    <span style={{ width: 22, height: 22, borderRadius: 999, border: `2px solid ${active ? MB.brand[700] : MB.line.border}`, background: active ? MB.brand[700] : 'transparent', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      {active && <Icon name="check" size={12} color="#fff" stroke={3} />}
                    </span>
                  </button>
                );
              })}
            </div>
            {stage === 'KPJ' && (
              <div style={{ marginTop: 14, padding: '12px 14px', background: MB.ausbildung[50], border: `1px solid ${MB.ausbildung[100]}`, borderRadius: 12, display: 'flex', gap: 10 }}>
                <Icon name="info" size={18} color={MB.ausbildung[700]} />
                <div style={{ fontFamily: MB.font, fontSize: 13, color: MB.ausbildung[700], lineHeight: 1.4 }}>
                  Im nächsten Schritt laden Sie Ihre <b>Inskriptionsbestätigung</b> hoch.
                </div>
              </div>
            )}
          </>
        )}

        {step === 3 && (
          <>
            <h1 style={{ fontFamily: MB.font, fontSize: 26, fontWeight: 700, color: MB.ink.primary, letterSpacing: -0.3, margin: '0 0 6px' }}>Benachrichtigungen</h1>
            <p style={{ fontFamily: MB.font, fontSize: 15, color: MB.ink.secondary, margin: 0, lineHeight: 1.5 }}>
              Sie können diese später in den Einstellungen jederzeit ändern.
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['Neue passende Inserate', 'Sofort', true],
                ['Antworten auf meine Bewerbungen', 'Sofort', true],
                ['Buchungs-Erinnerungen', '1 Tag vorher', true],
                ['News & redaktionelle Inhalte', 'Wöchentlich', false],
              ].map(([l, sub, on], i) => (
                <div key={l} style={{ padding: '12px 14px', background: MB.surface.raised, border: `1px solid ${MB.line.hair}`, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: MB.font, fontSize: 15, fontWeight: 600, color: MB.ink.primary }}>{l}</div>
                    <div style={{ fontFamily: MB.font, fontSize: 12, color: MB.ink.tertiary, marginTop: 2 }}>{sub}</div>
                  </div>
                  <span style={{ width: 44, height: 26, borderRadius: 999, background: on ? MB.brand[700] : MB.line.border, position: 'relative', flexShrink: 0 }}>
                    <span style={{ position: 'absolute', top: 2, left: on ? 20 : 2, width: 22, height: 22, borderRadius: 999, background: '#fff' }} />
                  </span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      <div style={{ padding: '12px 20px 30px', background: MB.surface.canvas, borderTop: `1px solid ${MB.line.hair}` }}>
        <Button kind="primary" full size="lg"
          onClick={() => step < total - 1 ? setStep(step + 1) : onFinish && onFinish(stage)}>
          {step === 0 && 'Mit ID Austria fortfahren'}
          {step === 1 && 'Daten bestätigen'}
          {step === 2 && 'Weiter'}
          {step === 3 && 'MedBridge starten'}
        </Button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Call screen (native-style outgoing call)
// ─────────────────────────────────────────────────────────────
function CallScreen({ doctor, onHangup }) {
  const [secs, setSecs] = useSt2(0);
  React.useEffect(() => {
    const id = setInterval(() => setSecs(s => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const mm = String(Math.floor(secs / 60)).padStart(2, '0');
  const ss = String(secs % 60).padStart(2, '0');
  const status = secs < 2 ? 'Verbindung wird hergestellt…' : secs < 4 ? 'Klingelt…' : `${mm}:${ss}`;

  return (
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #1a2540 0%, #0b1428 100%)', color: '#fff', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '60px 24px 0', textAlign: 'center' }}>
        <div style={{ fontFamily: MB.font, fontSize: 14, color: 'rgba(255,255,255,0.7)', fontWeight: 500, letterSpacing: 0.2 }}>MedBridge · Verschlüsselt</div>
        <div style={{ marginTop: 6, fontFamily: MB.font, fontSize: 13, color: 'rgba(255,255,255,0.55)', fontVariantNumeric: 'tabular-nums' }}>{status}</div>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 24px' }}>
        <div style={{ position: 'relative', width: 140, height: 140 }}>
          <div style={{ position: 'absolute', inset: -14, borderRadius: 999, border: '2px solid rgba(255,255,255,0.12)', animation: 'mbpulse 1.6s ease-out infinite' }} />
          <div style={{ position: 'absolute', inset: -4, borderRadius: 999, border: '2px solid rgba(255,255,255,0.22)' }} />
          <div style={{ position: 'absolute', inset: 0 }}>
            <Avatar name={doctor.name} size={140} />
          </div>
        </div>
        <div style={{ marginTop: 24, fontFamily: MB.font, fontSize: 28, fontWeight: 700, letterSpacing: -0.4 }}>{doctor.name}</div>
        <div style={{ marginTop: 4, fontFamily: MB.font, fontSize: 15, color: 'rgba(255,255,255,0.65)' }}>{doctor.context || doctor.stage}</div>
        <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, background: 'rgba(255,255,255,0.08)' }}>
          <Icon name="badge-check" size={13} color="#9dd6c2" />
          <span style={{ fontFamily: MB.font, fontSize: 12, color: 'rgba(255,255,255,0.85)' }}>ÖÄK-Mitglied · Verifiziert</span>
        </div>
      </div>

      <div style={{ padding: '20px 24px 40px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: 30 }}>
          {[
            ['mic-off', 'Stumm'],
            ['keypad',  'Tastatur'],
            ['speaker', 'Lautspr.'],
          ].map(([ic, l]) => (
            <button key={l} style={{ border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 64, height: 64, borderRadius: 999, background: 'rgba(255,255,255,0.12)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={ic} size={24} />
              </span>
              <span style={{ fontFamily: MB.font, fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>{l}</span>
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <button onClick={onHangup} style={{
            width: 72, height: 72, borderRadius: 999, background: '#D7263D', border: 'none', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 12px 28px -8px rgba(215,38,61,0.5)',
          }}>
            <Icon name="phone-down" size={28} color="#fff" />
          </button>
        </div>
      </div>
      <style>{`@keyframes mbpulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.18); opacity: 0; } }`}</style>
    </div>
  );
}

Object.assign(window, { Onboarding, CallScreen });