// emergency.jsx — Avarii / Emergency repairs (tenant + admin)

const EM_ACTOR_STYLES = {
  tenant:     { color: '#5B5DD3', bg: '#E7E7FA', icon: '🏠' },
  system:     { color: '#6B7280', bg: '#F3F4F6', icon: '⚙️' },
  contractor: { color: '#D97706', bg: '#FEF3C7', icon: '🔧' },
  admin:      { color: '#059669', bg: '#D1FAE5', icon: '👤' },
};

// Build a realistic timeline of events for a fresh emergency
function simulateEmergencyEvents(emergency) {
  const cat = window.EMERGENCY_CATEGORIES.find(c => c.id === emergency.category);
  const contractor = window.EMERGENCY_CONTRACTORS[emergency.category]?.[0];
  const baseTime = new Date();
  const fmt = (offsetMin) => {
    const t = new Date(baseTime.getTime() + offsetMin * 60000);
    return t.toLocaleTimeString('ro-RO', { hour: '2-digit', minute: '2-digit' });
  };
  return [
    { offset: 0,    ts: fmt(0),  actor: 'tenant',     text: `Sesizare Ap. ${emergency.apt_number} — ${emergency.reported_by_name}` },
    { offset: 0.05, ts: fmt(0),  actor: 'system',     text: `Apel automat ${contractor?.name} (${contractor?.trade})` },
    { offset: 0.5,  ts: fmt(0),  actor: 'contractor', text: `Răspuns ${contractor?.name?.split(' ')[0]} — vine în ~${contractor?.avg_response}` },
    { offset: 1,    ts: fmt(1),  actor: 'system',     text: `Apel automat ${window.BUILDING.admin_name} (admin)` },
    { offset: 1.8,  ts: fmt(2),  actor: 'admin',      text: `Răspuns admin — autorizez intervenția până la 1500 RON` },
    { offset: 2.5,  ts: fmt(3),  actor: 'system',     text: `Anunț automat trimis la 6 apartamente afectate` },
    { offset: 4,    ts: fmt(20), actor: 'contractor', text: `Contractor pe drum. ETA confirmată: ${fmt(35)}` },
  ];
}

// ═════════════════════════════════════════════════════════════
// TENANT — Big 🚨 button + multi-step flow
// ═════════════════════════════════════════════════════════════
function TenantEmergencyButton({ onOpen }) {
  return (
    <button onClick={onOpen} style={{
      width: '100%', padding: '14px 18px',
      background: 'linear-gradient(135deg, #DC2626, #B91C1C)',
      color: '#fff', border: 0, borderRadius: 14,
      cursor: 'pointer', fontFamily: 'inherit',
      display: 'flex', alignItems: 'center', gap: 12,
      boxShadow: '0 4px 14px rgba(220, 38, 38, 0.32), 0 1px 0 rgba(255,255,255,0.15) inset',
      position: 'relative', overflow: 'hidden',
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.98)'}
    onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
    >
      <div style={{
        width: 44, height: 44, borderRadius: 10,
        background: 'rgba(255,255,255,0.18)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 24,
        animation: 'pulse 2s ease-in-out infinite',
      }}>🚨</div>
      <div style={{ flex: 1, textAlign: 'left' }}>
        <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: '-0.005em' }}>AVARIE</div>
        <div style={{ fontSize: 11, opacity: 0.9 }}>Țeavă spartă · curent · gaz · lift blocat</div>
      </div>
      <Icon name="arrowRight" size={20} stroke={2.4} />
    </button>
  );
}

function TenantEmergencyFlow({ open, onClose, state, apt, lang }) {
  const [step, setStep] = React.useState(0);
  const [category, setCategory] = React.useState(null);
  const [desc, setDesc] = React.useState('');
  const [events, setEvents] = React.useState([]);
  const [emergencyId, setEmergencyId] = React.useState(null);
  const toast = useToast();

  React.useEffect(() => {
    if (open) { setStep(0); setCategory(null); setDesc(''); setEvents([]); setEmergencyId(null); }
  }, [open]);

  // When step = 2 (tracking), simulate events one by one
  React.useEffect(() => {
    if (step !== 2 || !category) return;
    const em = {
      apt_number: apt.number, reported_by_name: apt.owner_name, category,
    };
    const timeline = simulateEmergencyEvents(em);
    timeline.forEach((ev, i) => {
      setTimeout(() => {
        setEvents(prev => [...prev, ev]);
      }, i * 900 + 500);
    });
  }, [step, category]);

  if (!open) return null;
  const cat = category ? window.EMERGENCY_CATEGORIES.find(c => c.id === category) : null;
  const contractor = category ? window.EMERGENCY_CONTRACTORS[category]?.[0] : null;

  const submit = () => {
    if (!category) return;
    const newEm = {
      id: 'em' + Math.random().toString(36).slice(2, 6),
      category, status: 'active',
      reported_by_apt: apt.id, reported_by_name: apt.owner_name,
      apt_number: apt.number,
      title: cat.name + (desc ? ' — ' + desc.slice(0, 50) : ''),
      description: desc,
      reported_at: new Date().toISOString(),
      cost: null, contractor: null,
      authorized_by: null,
      apartments_affected: [],
      photos: 0,
      events: [],
    };
    state.setEmergencies(es => [newEm, ...es]);
    state.setActiveEmergency(newEm.id);
    setEmergencyId(newEm.id);
    setStep(2);
  };

  return (
    <div onClick={step !== 2 ? onClose : undefined} style={{
      position: 'fixed', inset: 0, zIndex: 90,
      background: 'rgba(120, 12, 12, 0.65)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 'min(440px, 100%)', background: 'var(--surface)',
        borderRadius: '24px 24px 0 0', padding: 24,
        boxShadow: '0 -12px 40px rgba(28, 22, 12, 0.3)',
        maxHeight: '92vh', overflowY: 'auto',
      }}>
        <div style={{ width: 40, height: 4, background: 'var(--border)', borderRadius: 999, margin: '0 auto 16px' }} />

        {/* Step 0 — category */}
        {step === 0 && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'var(--danger)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
              }}>🚨</div>
              <div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>
                  Avarie
                </h3>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>Ce s-a întâmplat?</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 14 }}>
              {window.EMERGENCY_CATEGORIES.map(c => (
                <button key={c.id} onClick={() => { setCategory(c.id); setStep(1); }} style={{
                  padding: '16px 10px', borderRadius: 14, cursor: 'pointer',
                  background: 'var(--surface-2)', border: '1.5px solid transparent',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
                  fontFamily: 'inherit', textAlign: 'center',
                  transition: 'all 160ms ease',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = c.color + '11'; e.currentTarget.style.borderColor = c.color; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--surface-2)'; e.currentTarget.style.borderColor = 'transparent'; }}
                >
                  <span style={{ fontSize: 28 }}>{c.icon}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.2 }}>{c.name}</span>
                  {c.priority === 'urgent' && (
                    <span style={{ fontSize: 9, padding: '2px 6px', background: 'var(--danger)', color: '#fff', borderRadius: 999, fontWeight: 700, letterSpacing: '0.04em' }}>URGENT</span>
                  )}
                </button>
              ))}
            </div>
            <div style={{ padding: 12, borderRadius: 10, background: '#FEE2E2', fontSize: 12, color: '#991B1B', lineHeight: 1.5 }}>
              ⚠️ <b>Gaz sau fum?</b> Sună <b>112</b> ÎNTÂI, apoi raportează aici.
            </div>
          </>
        )}

        {/* Step 1 — describe + confirm */}
        {step === 1 && cat && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <button onClick={() => setStep(0)} style={{ background: 'transparent', border: 0, cursor: 'pointer', color: 'var(--muted)' }}>
                <Icon name="arrowLeft" size={20} />
              </button>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: cat.color + '22', color: cat.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20,
              }}>{cat.icon}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--ink)', margin: 0, flex: 1 }}>{cat.name}</h3>
            </div>

            <div style={{ padding: 14, borderRadius: 12, background: 'var(--surface-2)', marginBottom: 14, fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <span style={{ fontSize: 16 }}>🔧</span>
                <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{contractor?.name}</span>
                <span style={{ fontSize: 11, color: 'var(--muted)' }}>· {contractor?.trade}</span>
              </div>
              <div>📞 {contractor?.phone}</div>
              <div>⏱ Răspuns mediu: <b>{contractor?.avg_response}</b></div>
              <div>💰 Cost estimat: <b>{cat.estimated}</b></div>
              <div style={{ marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)' }}>
                Plătit din <b>fond rulment</b> (4.280 RON disponibil). Decont în lista lunii cu factură atașată.
              </div>
            </div>

            <Field label="Descrie pe scurt (opțional)">
              <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={3} placeholder="ex: Apă curge pe perete de pe coloana etajului 3..." 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', minHeight: 70,
              }} />
            </Field>

            <button onClick={submit} style={{
              width: '100%', padding: '16px', marginTop: 16,
              background: 'linear-gradient(135deg, #DC2626, #B91C1C)',
              color: '#fff', border: 0, borderRadius: 14,
              cursor: 'pointer', fontFamily: 'inherit',
              fontSize: 16, fontWeight: 700, letterSpacing: '-0.005em',
              boxShadow: '0 4px 14px rgba(220, 38, 38, 0.32)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              🚨 Trimite avarie acum
            </button>
            <div style={{ marginTop: 8, fontSize: 11, color: 'var(--muted)', textAlign: 'center' }}>
              Vor fi sunate automat: contractorul → adminul → comitetul (până la răspuns)
            </div>
          </>
        )}

        {/* Step 2 — live tracking */}
        {step === 2 && cat && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <div style={{
                width: 46, height: 46, borderRadius: 12,
                background: cat.color, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22,
                animation: 'pulse 2s ease-in-out infinite',
              }}>{cat.icon}</div>
              <div style={{ flex: 1 }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>
                  Avarie în curs
                </h3>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>{cat.name}</div>
              </div>
              <div style={{ padding: '4px 10px', borderRadius: 999, background: 'var(--danger-bg)', color: 'var(--danger-fg)', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em' }}>ACTIVĂ</div>
            </div>

            <div style={{
              padding: '12px 14px', borderRadius: 12,
              background: 'var(--surface-2)', marginBottom: 14,
              display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5,
            }}>
              <span style={{ fontSize: 18 }}>✅</span>
              <div style={{ flex: 1, color: 'var(--ink-2)' }}>
                Sesizarea a fost transmisă. <b style={{ color: 'var(--ink)' }}>Rămâi în siguranță</b>, vei vedea aici tot ce se întâmplă.
              </div>
            </div>

            {/* Live timeline */}
            <div style={{ position: 'relative', paddingLeft: 28, paddingBottom: 16 }}>
              <div style={{ position: 'absolute', left: 13, top: 6, bottom: 6, width: 2, background: 'var(--border)' }} />
              {events.map((ev, i) => {
                const style = EM_ACTOR_STYLES[ev.actor];
                return (
                  <div key={i} style={{ position: 'relative', marginBottom: 14, }}>
                    <div style={{
                      position: 'absolute', left: -22, top: 0,
                      width: 28, height: 28, borderRadius: 999,
                      background: style.bg, color: style.color,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
                      border: '2px solid var(--surface)',
                    }}>{style.icon}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>{ev.ts}</span>
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.45 }}>{ev.text}</div>
                  </div>
                );
              })}
              {/* Pending */}
              <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
                <div style={{
                  position: 'absolute', left: -22, top: 0,
                  width: 28, height: 28, borderRadius: 999,
                  background: 'var(--surface)', border: '2px dashed var(--border)',
                }} />
                <div style={{ fontSize: 12, color: 'var(--muted)', fontStyle: 'italic', marginLeft: 6 }}>
                  ...continuă să sosească update-uri în timp real
                </div>
              </div>
            </div>

            {/* Notif to affected neighbors */}
            <div style={{ padding: 12, borderRadius: 10, background: '#FFFAEB', border: '1px solid #FEF3C7', fontSize: 12, color: '#92400E', lineHeight: 1.5 }}>
              📢 Vecinii din apartamentele afectate au primit automat anunț prin push & WhatsApp.
            </div>

            <Button variant="secondary" full onClick={onClose} style={{ marginTop: 14 }}>
              Închide (vei primi notificări în continuare)
            </Button>
          </>
        )}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// ADMIN — Emergency Alert banner (on dashboard) + dedicated screen
// ═════════════════════════════════════════════════════════════
function AdminEmergencyBanner({ state, lang, onClick }) {
  if (!state.activeEmergency) return null;
  const em = state.emergencies.find(e => e.id === state.activeEmergency);
  if (!em || em.status !== 'active') return null;
  const cat = window.EMERGENCY_CATEGORIES.find(c => c.id === em.category);
  const apt = state.apartments.find(a => a.id === em.reported_by_apt);

  return (
    <button onClick={onClick} style={{
      width: '100%', padding: 0,
      background: 'linear-gradient(90deg, #DC2626, #991B1B)',
      color: '#fff', border: 0, borderRadius: 14,
      cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
      boxShadow: '0 4px 14px rgba(220, 38, 38, 0.28)',
      overflow: 'hidden',
      }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 18px' }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: 'rgba(255,255,255,0.2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26,
          animation: 'pulse 1.5s ease-in-out infinite',
        }}>🚨</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
            <span style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', opacity: 0.9 }}>AVARIE ACTIVĂ</span>
            <span style={{ padding: '1px 7px', borderRadius: 999, background: 'rgba(255,255,255,0.2)', fontSize: 10, fontWeight: 600 }}>ACUM</span>
          </div>
          <div style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.3 }}>
            {cat.icon} {cat.name} · Ap. {apt?.number} ({em.reported_by_name})
          </div>
          <div style={{ fontSize: 12, opacity: 0.85, marginTop: 4 }}>
            {em.description ? `"${em.description.slice(0, 80)}"` : 'Fără descriere'}
          </div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, opacity: 0.8, fontWeight: 600 }}>NECESITĂ AUTORIZARE</div>
          <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6 }}>
            Vezi detalii <Icon name="arrowRight" size={16} stroke={2.4} />
          </div>
        </div>
      </div>
    </button>
  );
}

function EmergenciesScreen({ state, tr, lang }) {
  const [selected, setSelected] = React.useState(null);

  const active = state.emergencies.filter(e => e.status === 'active');
  const historic = state.emergencies.filter(e => e.status === 'resolved');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1280 }}>
      <PageHeader
        title="Avarii"
        subtitle={`${active.length} active · ${historic.length} rezolvate · fond rulment disponibil: ${window.fmtRON(window.BUILDING.fund_rulment)}`}
        right={<Button variant="secondary" icon="info">Configurare contractori</Button>}
      />

      {/* Active list */}
      {active.length > 0 && (
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--danger)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
            🚨 În curs
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {active.map(em => <EmergencyCardAdmin key={em.id} em={em} state={state} active onClick={() => setSelected(em)} />)}
          </div>
        </div>
      )}

      {/* Historic */}
      <div>
        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
          Istoric ({historic.length})
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {historic.map(em => <EmergencyCardAdmin key={em.id} em={em} state={state} onClick={() => setSelected(em)} />)}
        </div>
      </div>

      {/* Fond rulment summary */}
      <Card>
        <h4 style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, margin: 0, color: 'var(--ink)' }}>
          Fond rulment — folosit la avarii
        </h4>
        <p style={{ fontSize: 12, color: 'var(--muted)', margin: '4px 0 16px' }}>
          Banii avansați la avarii se decontează în lista lunii curente, cu factură atașată
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          <Fact label="Disponibil" value={window.fmtRONshort(window.BUILDING.fund_rulment) + ' RON'} />
          <Fact label="Cheltuit 2025" value={window.fmtRONshort(historic.reduce((s, e) => s + (e.cost || 0), 0)) + ' RON'} />
          <Fact label="Recuperat" value="100%" />
        </div>
      </Card>

      <Drawer open={!!selected} onClose={() => setSelected(null)} title={selected ? `Avarie #${selected.id.toUpperCase()}` : ''} width={620}>
        {selected && <EmergencyDetailAdmin em={state.emergencies.find(e => e.id === selected.id) || selected} state={state} lang={lang} />}
      </Drawer>
    </div>
  );
}

function EmergencyCardAdmin({ em, state, onClick, active }) {
  const cat = window.EMERGENCY_CATEGORIES.find(c => c.id === em.category);
  const apt = state.apartments.find(a => a.id === em.reported_by_apt);

  return (
    <Card onClick={onClick} style={{
      borderColor: active ? 'var(--danger)' : 'var(--border)',
      boxShadow: active ? '0 4px 12px rgba(220, 38, 38, 0.15)' : '0 1px 2px rgba(28, 22, 12, 0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{
          width: 50, height: 50, borderRadius: 12, flexShrink: 0,
          background: active ? 'var(--danger)' : cat.color + '22',
          color: active ? '#fff' : cat.color,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24,
          animation: active ? 'pulse 1.8s ease-in-out infinite' : 'none',
        }}>{cat.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{cat.name}</span>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>· Ap. {apt?.number} · {em.reported_by_name}</span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.4 }}>
            {em.description || em.title?.slice(0, 100)}
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 6, fontSize: 11, color: 'var(--muted)' }}>
            <span>📅 {new Date(em.reported_at).toLocaleString('ro-RO', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })}</span>
            {em.cost && <span>💰 <b style={{ color: 'var(--ink)' }}>{window.fmtRONshort(em.cost)} RON</b></span>}
            {em.contractor && <span>🔧 {em.contractor}</span>}
          </div>
        </div>
        {active && (
          <div style={{
            padding: '8px 14px', borderRadius: 10,
            background: 'var(--danger)', color: '#fff',
            fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap',
          }}>Necesită autorizare →</div>
        )}
        {!active && (
          <div style={{
            padding: '4px 10px', borderRadius: 999,
            background: 'var(--success-bg)', color: 'var(--success-fg)',
            fontSize: 11.5, fontWeight: 600, whiteSpace: 'nowrap',
          }}>✓ Rezolvat</div>
        )}
      </div>
    </Card>
  );
}

function EmergencyDetailAdmin({ em, state, lang }) {
  const cat = window.EMERGENCY_CATEGORIES.find(c => c.id === em.category);
  const apt = state.apartments.find(a => a.id === em.reported_by_apt);
  const contractor = window.EMERGENCY_CONTRACTORS[em.category]?.[0];
  const toast = useToast();

  const authorize = (limit) => {
    state.setEmergencies(es => es.map(e => e.id === em.id ? {
      ...e,
      authorized_by: window.BUILDING.admin_name + ' (admin)',
      authorization_limit: limit,
      events: [...(e.events || []), { ts: new Date().toLocaleTimeString('ro-RO', { hour: '2-digit', minute: '2-digit' }), actor: 'admin', text: `Autorizat ${limit} RON de admin` }],
    } : e));
    toast(`Autorizat ${limit} RON. Notificare la contractor.`);
  };

  const resolve = () => {
    state.setEmergencies(es => es.map(e => e.id === em.id ? {
      ...e, status: 'resolved', resolved_at: new Date().toISOString(), cost: 850, contractor: contractor?.name + ' (' + contractor?.trade + ')',
    } : e));
    state.setActiveEmergency(null);
    toast('Avarie marcată ca rezolvată. Factura va apărea în lista lunii.');
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: cat.color + '22', color: cat.color,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26,
        }}>{cat.icon}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{em.status === 'active' ? 'În curs' : 'Rezolvat'}</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--ink)', margin: '2px 0' }}>{cat.name}</h3>
          <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>Ap. {apt?.number} · {em.reported_by_name} · {new Date(em.reported_at).toLocaleString('ro-RO')}</div>
        </div>
      </div>

      {em.description && (
        <div style={{ padding: 12, borderRadius: 10, background: 'var(--surface-2)', fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55, fontStyle: 'italic' }}>
          "{em.description}"
        </div>
      )}

      {/* Contractor info */}
      <Card style={{ background: 'var(--surface-2)', boxShadow: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#FEF3C7', color: '#D97706', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🔧</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{contractor?.name}</div>
            <div style={{ fontSize: 12, color: 'var(--muted)' }}>{contractor?.trade} · {contractor?.phone}</div>
          </div>
          <Button size="sm" variant="ghost" icon="phone">Sună</Button>
        </div>
      </Card>

      {/* Authorization actions */}
      {em.status === 'active' && !em.authorized_by && (
        <div style={{ padding: 16, borderRadius: 14, background: '#FFFAEB', border: '1.5px solid #F59E0B' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <span style={{ fontSize: 18 }}>⚠️</span>
            <span style={{ fontWeight: 700, color: '#92400E', fontSize: 14 }}>Autorizare cheltuială</span>
          </div>
          <div style={{ fontSize: 12.5, color: '#92400E', marginBottom: 14, lineHeight: 1.5 }}>
            Cost estimat: <b>{cat.estimated}</b>. Conform regulamentului scării:
            <ul style={{ margin: '6px 0 0 0', paddingLeft: 18 }}>
              <li>Până la 1.000 RON — admin singur ✓</li>
              <li>1.000 - 3.000 RON — admin + 1 membru comitet</li>
              <li>3.000+ — AGA online (7 voturi)</li>
            </ul>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            <Button variant="success" onClick={() => authorize(1000)}>Autorizez 1.000</Button>
            <Button variant="secondary" onClick={() => authorize(2500)}>Comitet 2.500</Button>
            <Button variant="secondary" onClick={() => authorize(5000)}>AGA online 5.000</Button>
          </div>
        </div>
      )}

      {/* Events timeline */}
      {em.events && em.events.length > 0 && (
        <div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Audit trail</div>
          <div style={{ position: 'relative', paddingLeft: 24 }}>
            <div style={{ position: 'absolute', left: 11, top: 6, bottom: 6, width: 2, background: 'var(--border)' }} />
            {em.events.map((ev, i) => {
              const style = EM_ACTOR_STYLES[ev.actor];
              return (
                <div key={i} style={{ position: 'relative', marginBottom: 12 }}>
                  <div style={{
                    position: 'absolute', left: -18, top: 0,
                    width: 24, height: 24, borderRadius: 999,
                    background: style.bg, color: style.color,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11,
                    border: '2px solid var(--surface)',
                  }}>{style.icon}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>{ev.ts}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.45 }}>{ev.text}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Affected neighbors */}
      {em.apartments_affected && em.apartments_affected.length > 0 && (
        <div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Locatari notificați</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {em.apartments_affected.map(aid => {
              const a = state.apartments.find(x => x.id === aid);
              if (!a) return null;
              return (
                <div key={aid} style={{ padding: '5px 10px', borderRadius: 999, background: 'var(--success-bg)', color: 'var(--success-fg)', fontSize: 11.5, fontWeight: 600 }}>
                  ✓ Ap. {a.number}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Cost / closeout */}
      {em.cost && (
        <div style={{ padding: 16, borderRadius: 12, background: 'var(--surface-2)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Cost final</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 20, fontWeight: 700, color: 'var(--ink)' }}>{window.fmtRON(em.cost)}</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 6 }}>
            Plătit din fond rulment · Decont în lista <b style={{ color: 'var(--ink)' }}>noiembrie 2025</b> · Distribuire: per apartament
          </div>
        </div>
      )}

      {/* Resolve action */}
      {em.status === 'active' && em.authorized_by && (
        <Button variant="success" full icon="check" onClick={resolve}>
          Marchează ca rezolvat
        </Button>
      )}
    </div>
  );
}

Object.assign(window, {
  TenantEmergencyButton, TenantEmergencyFlow,
  EmergenciesScreen, AdminEmergencyBanner, EmergencyDetailAdmin,
});