// comms.jsx — Anunțuri admin → locatari + Onboarding wizard + Self-administrare mode

// ═════════════════════════════════════════════════════════════
// Announcements: admin composes + tenants receive
// ═════════════════════════════════════════════════════════════
function AnnouncementsScreen({ state, tr, lang }) {
  const [list, setList] = React.useState(window.ANNOUNCEMENTS);
  const [showCompose, setShowCompose] = React.useState(false);
  const toast = useToast();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1280 }}>
      <PageHeader
        title="Anunțuri către locatari"
        subtitle="Push în aplicație · WhatsApp · email · SMS · ecran întreținere"
        right={<Button variant="primary" icon="plus" onClick={() => setShowCompose(true)}>Anunț nou</Button>}
      />
      <Card style={{ background: 'linear-gradient(135deg, #FEF3C7, #FDE68A)', border: '1px solid #F59E0B' }}>
        <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <div style={{ width: 44, height: 44, borderRadius: 12, background: '#F59E0B', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 }}>📢</div>
          <div style={{ fontSize: 13.5, color: '#78350F', lineHeight: 1.55 }}>
            Anunțurile ajung în 4 canale simultan: <b>push în BlocApp</b>, <b>WhatsApp</b> (pentru cei 60+), <b>email</b> (cu confirmare citire), <b>SMS</b> doar pentru urgent. Fiecare locatar își alege canalele preferate. Statistici de citire vizibile.
          </div>
        </div>
      </Card>
      <Card padded={false}>
        {list.map(a => (
          <div key={a.id} style={{ padding: '18px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 11, background: a.urgent ? '#FEE2E2' : 'var(--surface-2)', color: a.urgent ? '#991B1B' : 'var(--muted)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, flexShrink: 0 }}>{a.urgent ? '⚠️' : '📢'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{a.title}</span>
                {a.urgent && <span style={{ padding: '1px 7px', borderRadius: 999, background: '#DC2626', color: '#fff', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em' }}>URGENT</span>}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 8 }}>{a.body}</div>
              <div style={{ display: 'flex', gap: 14, fontSize: 11, color: 'var(--muted)' }}>
                <span>📅 {new Date(a.created_at).toLocaleString('ro-RO', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}</span>
                <span>📱 Push: 12/12</span>
                <span>💬 WhatsApp: 11/12</span>
                <span>📧 Citit: 8/12 (67%)</span>
                {a.urgent && <span>📩 SMS: 12/12</span>}
              </div>
            </div>
          </div>
        ))}
      </Card>
      <Modal open={showCompose} onClose={() => setShowCompose(false)} title="Anunț nou"
        footer={<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <Button variant="secondary" onClick={() => setShowCompose(false)}>Anulează</Button>
          <Button variant="primary" icon="mail" onClick={() => { toast('Anunț trimis la 12 locatari pe 4 canale'); setShowCompose(false); }}>Trimite</Button>
        </div>}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="Titlu"><Input value="" onChange={() => {}} placeholder="ex: Apa oprită miercuri 9-14" /></Field>
          <Field label="Mesaj">
            <textarea rows={4} placeholder="Detalii..." style={{ padding: '10px 14px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 14, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none', resize: 'vertical' }} />
          </Field>
          <Field label="Canale">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[{ id: 'push', label: '📱 Push' }, { id: 'wa', label: '💬 WhatsApp' }, { id: 'email', label: '📧 Email' }, { id: 'sms', label: '📩 SMS' }].map(c => (
                <button key={c.id} style={{ padding: '10px 12px', borderRadius: 10, background: 'var(--primary-light)', color: 'var(--primary)', border: '1.5px solid var(--primary)', fontFamily: 'inherit', fontSize: 12, fontWeight: 600, cursor: 'pointer' }}>{c.label}</button>
              ))}
            </div>
          </Field>
          <Field label="Marchează ca urgent (SMS obligatoriu)">
            <button style={{ padding: '10px 14px', borderRadius: 10, background: 'var(--surface-2)', border: '1px solid var(--border)', fontFamily: 'inherit', fontSize: 12.5, cursor: 'pointer', textAlign: 'left', color: 'var(--ink-2)' }}>○ Normal</button>
          </Field>
        </div>
      </Modal>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// Onboarding wizard — primul bloc, 5 pași
// ═════════════════════════════════════════════════════════════
function OnboardingScreen({ state, tr, lang }) {
  const [step, setStep] = React.useState(1);
  const [selfAdmin, setSelfAdmin] = React.useState(false);
  const toast = useToast();
  const totalSteps = 6;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 720 }}>
      <PageHeader title="Onboarding scară" subtitle={`Configurare ghidată — pas ${step} din ${totalSteps}`} />

      {/* Progress */}
      <div style={{ display: 'flex', gap: 4 }}>
        {Array.from({ length: totalSteps }).map((_, i) => (
          <div key={i} style={{ flex: 1, height: 6, borderRadius: 999, background: i < step ? 'var(--primary)' : 'var(--neutral-bg)', transition: 'background 200ms' }} />
        ))}
      </div>

      <Card>
        {step === 1 && (
          <>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Bună! Hai să configurăm scara ta.</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 20px', lineHeight: 1.6 }}>Durează ~15 minute. Ai nevoie de: adresă, numărul apartamentelor, lista proprietari + emailuri + telefoane.</p>
            <Field label="Numele scării"><Input value="Bloc 12, Scara B" onChange={() => {}} /></Field>
            <div style={{ marginTop: 12 }}><Field label="Adresă"><Input value="Str. Memorandului 23, Timișoara" onChange={() => {}} /></Field></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
              <Field label="Apartamente"><Input value="12" onChange={() => {}} mono /></Field>
              <Field label="Etaje"><Input value="4 + parter" onChange={() => {}} /></Field>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Cum administrezi scara?</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 20px', lineHeight: 1.6 }}>BlocApp permite două moduri. Poți schimba oricând.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <button onClick={() => setSelfAdmin(false)} style={{ padding: 18, borderRadius: 14, background: !selfAdmin ? 'var(--primary-light)' : 'var(--surface-2)', border: '2px solid ' + (!selfAdmin ? 'var(--primary)' : 'transparent'), cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }}>
                <div style={{ fontSize: 28, marginBottom: 8 }}>👤</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>Admin profesionist</div>
                <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>Un admin extern gestionează (~600 RON/lună). Standard.</div>
              </button>
              <button onClick={() => setSelfAdmin(true)} style={{ padding: 18, borderRadius: 14, background: selfAdmin ? 'var(--primary-light)' : 'var(--surface-2)', border: '2px solid ' + (selfAdmin ? 'var(--primary)' : 'transparent'), cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit' }}>
                <div style={{ fontSize: 28, marginBottom: 8 }}>🤝</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', marginBottom: 4 }}>Autoadministrare</div>
                <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5 }}>Comitetul gestionează cu BlocApp. <b>Salvați 7.200 RON/an.</b></div>
              </button>
            </div>
            {selfAdmin && (
              <div style={{ marginTop: 16, padding: 14, borderRadius: 12, background: '#DDF0E4', fontSize: 12.5, color: '#065F46', lineHeight: 1.55 }}>
                ✓ Legal pentru asociații &lt;20 apartamente (Lege 196/2018 art. 56). BlocApp automatizează: liste de plată, calcul cote, ANAF, AGA, audit cenzor.
              </div>
            )}
          </>
        )}

        {step === 3 && (
          <>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Import apartamente</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 16px', lineHeight: 1.6 }}>Încarcă un Excel cu lista proprietari sau adaugă manual. Cotele indivize le calculăm din m².</p>
            <div style={{ padding: 24, borderRadius: 12, background: 'var(--surface-2)', border: '2px dashed var(--border)', textAlign: 'center', cursor: 'pointer' }}>
              <div style={{ fontSize: 36, marginBottom: 10 }}>📁</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>Trage fișier Excel aici sau apasă</div>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>.xlsx, .xls sau .csv · template descărcabil</div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, padding: 12, borderRadius: 10, background: 'var(--success-bg)' }}>
              <span style={{ fontSize: 12.5, color: 'var(--success-fg)' }}>✓ 12 apartamente identificate · 11 emailuri valide</span>
              <Button size="sm" variant="ghost">Previzualizare</Button>
            </div>
          </>
        )}

        {step === 4 && (
          <>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Conectare conturi</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 20px', lineHeight: 1.6 }}>Pentru a deveni cu adevărat automat, conectează:</p>
            {[
              { name: 'ANAF SPV (e-Factura)', icon: '🇷🇴', status: 'pending', sub: 'Facturi B2B automate' },
              { name: 'Banca Transilvania (cont fond reparații)', icon: '🏦', status: 'pending', sub: 'Multi-sig + import tranzacții' },
              { name: 'WhatsApp Business', icon: '💬', status: 'pending', sub: 'Bot OCR indexuri' },
              { name: 'Resend (email)', icon: '📧', status: 'pending', sub: 'Notificări locatari' },
              { name: 'Stripe (plată online)', icon: '💳', status: 'pending', sub: 'Locatari pot plăti cu cardul' },
            ].map((c, i) => (
              <div key={i} style={{ padding: '12px 14px', marginBottom: 8, borderRadius: 10, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 22 }}>{c.icon}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{c.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{c.sub}</div>
                </div>
                <Button size="sm" variant="primary">Conectează</Button>
              </div>
            ))}
          </>
        )}

        {step === 5 && (
          <>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Reguli scară</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 16px', lineHeight: 1.6 }}>Configurări care reflectă realitatea scării tale. Ai detectat:</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                'Parter (Ap. 1, 2, 12) — scutire lift',
                '2 apartamente cu centrală termică proprie (Ap. 2, 8) — sărit CET',
                '1 apartament cu boiler propriu (Ap. 5)',
                'Ap. 12 — spațiu comercial (cabinet medical)',
                'Salubritate: per persoană (nu comercial)',
              ].map((r, i) => (
                <div key={i} style={{ padding: '10px 14px', borderRadius: 10, background: '#DDF0E4', color: '#065F46', fontSize: 12.5, fontWeight: 500 }}>✓ {r}</div>
              ))}
            </div>
          </>
        )}

        {step === 6 && (
          <>
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div style={{ width: 80, height: 80, borderRadius: 999, background: 'var(--success-bg)', color: 'var(--success)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 40, marginBottom: 16 }}>✓</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>Gata!</h2>
              <p style={{ fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 0', lineHeight: 1.6 }}>BlocApp e configurat pentru scara ta.</p>
              <div style={{ marginTop: 20, padding: 16, borderRadius: 12, background: 'var(--surface-2)', textAlign: 'left' }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 }}>Următorii pași:</div>
                <ol style={{ margin: 0, paddingLeft: 20, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.7 }}>
                  <li>Invită locatarii (cod scară: <b>BX-2025-MEM23</b>)</li>
                  <li>Prima listă de plată — apasă „Calculează" în Cheltuieli</li>
                  <li>Configurare semnatari Vault (admin + 2 comitet)</li>
                  <li>Activează WhatsApp Bot pentru indexuri</li>
                </ol>
              </div>
            </div>
          </>
        )}
      </Card>

      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Button variant="secondary" disabled={step === 1} onClick={() => setStep(s => s - 1)}>← Înapoi</Button>
        {step < totalSteps ? <Button variant="primary" onClick={() => setStep(s => s + 1)}>Continuă →</Button> : <Button variant="success" icon="check" onClick={() => toast('Bun venit în BlocApp!')}>Începe să folosești</Button>}
      </div>
    </div>
  );
}

window.AnnouncementsScreen = AnnouncementsScreen;
window.OnboardingScreen = OnboardingScreen;