// issues.jsx — Sesizări: Admin Kanban + Tenant submit/list

const ISSUE_STATUS = {
  nou:       { label_ro: 'Nou',         label_en: 'New',         color: '#DC2626', bg: '#FADEDB', dot: '#DC2626' },
  in_lucru:  { label_ro: 'În lucru',    label_en: 'In progress', color: '#D97706', bg: '#FEF3C7', dot: '#D97706' },
  rezolvat:  { label_ro: 'Rezolvat',    label_en: 'Resolved',    color: '#059669', bg: '#D1FAE5', dot: '#059669' },
  inchis:    { label_ro: 'Închis',      label_en: 'Closed',      color: '#6B7280', bg: '#F3F4F6', dot: '#6B7280' },
};
const ISSUE_PRIORITY = {
  urgent: { label_ro: 'Urgent',  label_en: 'Urgent',  color: '#DC2626' },
  high:   { label_ro: 'Mare',    label_en: 'High',    color: '#D97706' },
  normal: { label_ro: 'Normal',  label_en: 'Normal',  color: '#6B7280' },
  low:    { label_ro: 'Scăzut',  label_en: 'Low',     color: '#9CA3AF' },
};

function issueRelTime(ts, lang) {
  const now = new Date('2025-11-15T18:00:00');
  const t = new Date(ts);
  const diffMin = Math.floor((now - t) / 60000);
  if (diffMin < 60) return lang === 'ro' ? `acum ${diffMin} min` : `${diffMin}m ago`;
  const diffH = Math.floor(diffMin / 60);
  if (diffH < 24) return lang === 'ro' ? `acum ${diffH}h` : `${diffH}h ago`;
  const diffD = Math.floor(diffH / 24);
  if (diffD < 7) return lang === 'ro' ? `acum ${diffD}z` : `${diffD}d ago`;
  return t.toLocaleDateString('ro-RO', { day: 'numeric', month: 'short' });
}

// ═════════════════════════════════════════════════════════════
// ADMIN — Issues Kanban
// ═════════════════════════════════════════════════════════════
function IssuesScreen({ state, tr, lang }) {
  const [selected, setSelected] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const toast = useToast();

  const filtered = state.issues.filter(i => filter === 'all' || i.category === filter);
  const cols = ['nou', 'in_lucru', 'rezolvat', 'inchis'];

  const moveIssue = (id, status) => {
    state.setIssues(is => is.map(i => i.id === id ? {
      ...i, status,
      resolved_at: status === 'rezolvat' ? new Date().toISOString() : i.resolved_at,
    } : i));
    toast(lang === 'ro' ? `Sesizare marcată ca ${ISSUE_STATUS[status].label_ro.toLowerCase()}` : `Issue marked as ${ISSUE_STATUS[status].label_en.toLowerCase()}`);
  };

  const counts = cols.reduce((m, c) => ({ ...m, [c]: filtered.filter(i => i.status === c).length }), {});
  const urgent = state.issues.filter(i => i.priority === 'urgent' && i.status !== 'inchis').length;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1500 }}>
      <PageHeader
        title={lang === 'ro' ? 'Sesizări' : 'Issues'}
        subtitle={lang === 'ro'
          ? `${state.issues.length} sesizări${urgent > 0 ? ` · ${urgent} urgente neînchise` : ''}`
          : `${state.issues.length} issues${urgent > 0 ? ` · ${urgent} urgent` : ''}`}
        right={<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <CategoryFilter value={filter} onChange={setFilter} lang={lang} />
        </div>}
      />

      {/* Kanban */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--gap)', minHeight: 600 }}>
        {cols.map(col => {
          const items = filtered.filter(i => i.status === col);
          const cfg = ISSUE_STATUS[col];
          return (
            <div key={col} style={{
              background: 'var(--surface-2)', borderRadius: 14,
              display: 'flex', flexDirection: 'column',
              minHeight: 0,
            }}>
              <div style={{
                padding: '12px 16px',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                borderBottom: '1px solid var(--border)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ width: 8, height: 8, borderRadius: 999, background: cfg.dot }} />
                  <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink)' }}>{cfg['label_' + lang]}</span>
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: 'var(--muted)' }}>{items.length}</span>
              </div>
              <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {items.length === 0 ? (
                  <div style={{ padding: '24px 12px', textAlign: 'center', fontSize: 12, color: 'var(--muted)' }}>
                    {lang === 'ro' ? 'Nimic aici' : 'Nothing here'}
                  </div>
                ) : items.map(issue => (
                  <IssueCard key={issue.id} issue={issue} state={state} lang={lang} onClick={() => setSelected(issue)} onMove={moveIssue} />
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <Drawer open={!!selected} onClose={() => setSelected(null)} title={selected ? `#${selected.id.toUpperCase()} · ${selected.title}` : ''} width={560}>
        {selected && <IssueDetail issue={selected} state={state} lang={lang} onMove={moveIssue} />}
      </Drawer>
    </div>
  );
}

function CategoryFilter({ value, onChange, lang }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 12px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)' }}>
      <Icon name="sliders" size={15} style={{ color: 'var(--muted)' }} />
      <select value={value} onChange={(e) => onChange(e.target.value)} style={{
        border: 0, background: 'transparent', outline: 'none',
        fontFamily: 'inherit', fontSize: 13, color: 'var(--ink)', cursor: 'pointer',
      }}>
        <option value="all">{lang === 'ro' ? 'Toate categoriile' : 'All categories'}</option>
        {window.ISSUE_CATEGORIES.map(c => (
          <option key={c.id} value={c.id}>{c.icon} {c.name}</option>
        ))}
      </select>
    </div>
  );
}

function IssueCard({ issue, state, lang, onClick, onMove }) {
  const apt = state.apartments.find(a => a.id === issue.apt_id);
  const cat = window.ISSUE_CATEGORIES.find(c => c.id === issue.category);
  const prio = ISSUE_PRIORITY[issue.priority];

  return (
    <div onClick={onClick} style={{
      padding: 12, borderRadius: 10,
      background: 'var(--surface)', border: '1px solid var(--border)',
      cursor: 'pointer',
      boxShadow: issue.priority === 'urgent' ? '0 0 0 1.5px var(--danger), 0 1px 2px rgba(28,22,12,0.04)' : '0 1px 2px rgba(28,22,12,0.04)',
      transition: 'transform 160ms ease, box-shadow 160ms ease',
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
    >
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginBottom: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7, flexShrink: 0,
          background: cat.color + '22', color: cat.color,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14,
        }}>{cat.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3 }}>{issue.title}</div>
        </div>
        {issue.priority === 'urgent' && (
          <div style={{ padding: '2px 7px', borderRadius: 999, background: 'var(--danger)', color: '#fff', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>!</div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11.5 }}>
        <span style={{ color: 'var(--muted)' }}>
          <Icon name="building" size={11} style={{ verticalAlign: '-1px' }} /> Ap. {apt?.number} · {issueRelTime(issue.created_at, lang)}
        </span>
        <div style={{ display: 'flex', gap: 4 }}>
          {issue.photos > 0 && <span style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>📷 {issue.photos}</span>}
          {issue.updates.length > 0 && <span style={{ color: 'var(--muted)', fontFamily: 'var(--font-mono)', fontSize: 10.5 }}>💬 {issue.updates.length}</span>}
        </div>
      </div>
    </div>
  );
}

function IssueDetail({ issue, state, lang, onMove }) {
  const apt = state.apartments.find(a => a.id === issue.apt_id);
  const cat = window.ISSUE_CATEGORIES.find(c => c.id === issue.category);
  const status = ISSUE_STATUS[issue.status];
  const [newComment, setNewComment] = React.useState('');
  const toast = useToast();

  const postComment = () => {
    if (!newComment.trim()) return;
    state.setIssues(is => is.map(i => i.id === issue.id ? {
      ...i,
      updates: [...i.updates, { ts: new Date().toISOString(), author: window.BUILDING.admin_name + ' (admin)', text: newComment }],
    } : i));
    setNewComment('');
    toast(lang === 'ro' ? 'Comentariu adăugat' : 'Comment added');
  };

  // Need updated issue from state
  const live = state.issues.find(i => i.id === issue.id) || issue;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Meta */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: cat.color + '22', color: cat.color, fontSize: 12, fontWeight: 600 }}>
          <span>{cat.icon}</span> {cat.name}
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: status.bg, color: status.color, fontSize: 12, fontWeight: 600 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: status.dot }} />
          {status['label_' + lang]}
        </div>
        {issue.priority === 'urgent' && (
          <div style={{ padding: '5px 10px', borderRadius: 999, background: 'var(--danger)', color: '#fff', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>Urgent</div>
        )}
      </div>

      {/* Description */}
      <div>
        <div style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.6 }}>{issue.description}</div>
        {issue.location && (
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8 }}>
            📍 {issue.location}
          </div>
        )}
      </div>

      {/* From */}
      <Card style={{ background: 'var(--surface-2)', boxShadow: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 38, height: 38, borderRadius: 999, background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 13 }}>
            {issue.created_by.split(' ').map(p => p[0]).join('').slice(0, 2)}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{issue.created_by}</div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Ap. {apt?.number} · {issueRelTime(issue.created_at, lang)}</div>
          </div>
          <Button size="sm" variant="ghost" icon="phone">{lang === 'ro' ? 'Sună' : 'Call'}</Button>
        </div>
      </Card>

      {/* Photos placeholder */}
      {issue.photos > 0 && (
        <div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 8, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
            {lang === 'ro' ? 'Atașamente' : 'Attachments'} ({issue.photos})
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {Array.from({ length: issue.photos }).map((_, i) => (
              <StripedPlaceholder key={i} ratio="4/3" label={`foto-${i + 1}.jpg`} />
            ))}
          </div>
        </div>
      )}

      {/* Status actions */}
      <div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 8, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
          {lang === 'ro' ? 'Schimbă status' : 'Change status'}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
          {Object.entries(ISSUE_STATUS).map(([key, cfg]) => (
            <button key={key} onClick={() => onMove(issue.id, key)} disabled={issue.status === key} style={{
              padding: '8px 6px', borderRadius: 8, cursor: issue.status === key ? 'default' : 'pointer',
              background: issue.status === key ? cfg.bg : 'var(--surface-2)',
              color: issue.status === key ? cfg.color : 'var(--ink-2)',
              border: `1.5px solid ${issue.status === key ? cfg.dot : 'transparent'}`,
              fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
              opacity: issue.status === key ? 1 : 0.7,
            }}>{cfg['label_' + lang]}</button>
          ))}
        </div>
      </div>

      {/* Updates timeline */}
      <div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
          {lang === 'ro' ? 'Discuție' : 'Discussion'} ({live.updates.length})
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {live.updates.map((u, i) => (
            <div key={i} style={{ display: 'flex', gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--primary)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
                {u.author.split(' ').map(p => p[0]).join('').slice(0, 2)}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>{u.author}</span>
                  <span style={{ fontSize: 11, color: 'var(--muted)' }}>{issueRelTime(u.ts, lang)}</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginTop: 2 }}>{u.text}</div>
              </div>
            </div>
          ))}
          {live.updates.length === 0 && <div style={{ fontSize: 12.5, color: 'var(--muted)', fontStyle: 'italic' }}>{lang === 'ro' ? 'Niciun comentariu încă' : 'No comments yet'}</div>}
        </div>
        {/* Compose */}
        <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
          <input value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder={lang === 'ro' ? 'Adaugă un comentariu...' : 'Add a comment...'} style={{
            flex: 1, padding: '10px 14px', borderRadius: 10,
            border: '1px solid var(--border)', background: 'var(--surface)',
            fontFamily: 'inherit', fontSize: 13, color: 'var(--ink)', outline: 'none',
          }} onKeyDown={(e) => e.key === 'Enter' && postComment()} />
          <Button size="sm" variant="primary" onClick={postComment} icon="arrowRight">{lang === 'ro' ? 'Trimite' : 'Send'}</Button>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// TENANT — Issues list + report
// ═════════════════════════════════════════════════════════════
function TenantIssues({ state, apt, lang }) {
  const [tab, setTab] = React.useState('feed'); // feed | mine
  const [showReport, setShowReport] = React.useState(false);

  const all = state.issues;
  const mine = all.filter(i => i.apt_id === apt.id);
  const feed = all.filter(i => i.status !== 'inchis'); // active ones visible to all

  const items = tab === 'mine' ? mine : feed;

  return (
    <div style={{ padding: '16px 20px 20px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
        <div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0, letterSpacing: '-0.01em' }}>
            {lang === 'ro' ? 'Sesizări' : 'Issues'}
          </h2>
          <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>
            {tab === 'feed'
              ? (lang === 'ro' ? `${feed.length} active pe scară` : `${feed.length} active`)
              : (lang === 'ro' ? `${mine.length} de la tine` : `${mine.length} from you`)}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--surface-2)', borderRadius: 12, marginBottom: 14 }}>
        {[
          { id: 'feed', label: lang === 'ro' ? 'Pe scară' : 'Building' },
          { id: 'mine', label: lang === 'ro' ? 'Ale mele' : 'Mine' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            flex: 1, padding: '8px 12px', borderRadius: 8, border: 0,
            background: tab === t.id ? 'var(--surface)' : 'transparent',
            color: tab === t.id ? 'var(--ink)' : 'var(--muted)',
            fontFamily: 'inherit', fontSize: 13, fontWeight: 600,
            cursor: 'pointer', boxShadow: tab === t.id ? '0 1px 2px rgba(28,22,12,0.06)' : 'none',
            transition: 'all 160ms ease',
          }}>{t.label}</button>
        ))}
      </div>

      {/* List */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 80 }}>
        {items.length === 0 && (
          <div style={{ padding: '40px 20px', textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>
            {lang === 'ro' ? 'Nicio sesizare aici. Apasă + pentru a raporta o problemă.' : 'No issues here yet.'}
          </div>
        )}
        {items.map(issue => {
          const issueApt = state.apartments.find(a => a.id === issue.apt_id);
          const cat = window.ISSUE_CATEGORIES.find(c => c.id === issue.category);
          const status = ISSUE_STATUS[issue.status];
          return (
            <div key={issue.id} style={{
              padding: 14, borderRadius: 14,
              background: 'var(--surface)', border: '1px solid var(--border)',
              boxShadow: issue.priority === 'urgent' ? `0 0 0 1.5px var(--danger)` : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 8 }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 9, flexShrink: 0,
                  background: cat.color + '22', color: cat.color,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17,
                }}>{cat.icon}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3 }}>{issue.title}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>
                    {tab === 'feed' && (<>Ap. {issueApt?.number} · </>)}{issueRelTime(issue.created_at, lang)}
                  </div>
                </div>
                <div style={{ padding: '3px 8px', borderRadius: 999, background: status.bg, color: status.color, fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
                  {status['label_' + lang]}
                </div>
              </div>
              {issue.updates.length > 0 && (
                <div style={{
                  marginTop: 8, padding: 10, borderRadius: 10,
                  background: 'var(--surface-2)', fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5,
                }}>
                  <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{issue.updates[issue.updates.length - 1].author}:</span> {issue.updates[issue.updates.length - 1].text}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* FAB */}
      <button onClick={() => setShowReport(true)} style={{
        position: 'absolute', bottom: 96, right: 20, zIndex: 5,
        width: 56, height: 56, borderRadius: 999,
        background: 'var(--primary)', color: '#fff', border: 0,
        boxShadow: '0 8px 20px color-mix(in oklab, var(--primary), transparent 60%)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer',
      }}>
        <Icon name="plus" size={26} stroke={2.4} />
      </button>

      <TenantReportModal open={showReport} onClose={() => setShowReport(false)} state={state} apt={apt} lang={lang} />
    </div>
  );
}

function TenantReportModal({ open, onClose, state, apt, lang }) {
  const [category, setCategory] = React.useState('lift');
  const [title, setTitle] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const [priority, setPriority] = React.useState('normal');
  const [step, setStep] = React.useState(0);
  const toast = useToast();

  React.useEffect(() => {
    if (open) { setCategory('lift'); setTitle(''); setDesc(''); setPriority('normal'); setStep(0); }
  }, [open]);

  const submit = () => {
    if (!title.trim() || !desc.trim()) {
      toast(lang === 'ro' ? 'Completează titlu și descriere' : 'Fill in title and description', 'error');
      return;
    }
    state.setIssues(is => [{
      id: 'i' + Math.random().toString(36).slice(2, 6),
      apt_id: apt.id, category,
      title, description: desc,
      status: 'nou', priority,
      created_at: new Date().toISOString(),
      created_by: apt.owner_name,
      location: '',
      photos: 0, has_video: false,
      updates: [],
    }, ...is]);
    setStep(2);
    setTimeout(() => { onClose(); toast(lang === 'ro' ? 'Sesizare trimisă. Administratorul a fost notificat.' : 'Issue sent.'); }, 1500);
  };

  if (!open) return null;

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 80,
      background: 'rgba(28, 22, 12, 0.55)', backdropFilter: 'blur(6px)',
      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,
        marginBottom: 0,
        boxShadow: '0 -8px 32px rgba(28, 22, 12, 0.18)',
        maxHeight: '85vh', overflowY: 'auto',
      }}>
        {step === 0 && (
          <>
            <div style={{ width: 40, height: 4, background: 'var(--border)', borderRadius: 999, margin: '0 auto 16px' }} />
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--ink)', margin: '0 0 6px' }}>
              {lang === 'ro' ? 'Ce s-a întâmplat?' : 'What happened?'}
            </h3>
            <p style={{ fontSize: 13, color: 'var(--muted)', margin: '0 0 18px' }}>
              {lang === 'ro' ? 'Alege categoria potrivită' : 'Choose a category'}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 }}>
              {window.ISSUE_CATEGORIES.map(c => (
                <button key={c.id} onClick={() => setCategory(c.id)} style={{
                  padding: '14px 6px', borderRadius: 12, cursor: 'pointer',
                  background: category === c.id ? c.color + '22' : 'var(--surface-2)',
                  border: '1.5px solid ' + (category === c.id ? c.color : 'transparent'),
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                  fontFamily: 'inherit',
                  transition: 'all 160ms ease',
                }}>
                  <span style={{ fontSize: 22 }}>{c.icon}</span>
                  <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.15, textAlign: 'center' }}>{c.name}</span>
                </button>
              ))}
            </div>
            <Button variant="primary" full size="lg" onClick={() => setStep(1)} icon="arrowRight">
              {lang === 'ro' ? 'Continuă' : 'Continue'}
            </Button>
          </>
        )}
        {step === 1 && (
          <>
            <div style={{ width: 40, height: 4, background: 'var(--border)', borderRadius: 999, margin: '0 auto 16px' }} />
            <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={18} />
              </button>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--ink)', margin: 0, flex: 1 }}>
                {lang === 'ro' ? 'Detalii' : 'Details'}
              </h3>
            </div>

            <Field label={lang === 'ro' ? 'Titlu scurt' : 'Short title'}>
              <Input value={title} onChange={setTitle} placeholder={lang === 'ro' ? 'ex: Liftul s-a oprit' : 'ex: Lift broke down'} />
            </Field>
            <div style={{ marginTop: 12 }}>
              <Field label={lang === 'ro' ? 'Descriere' : 'Description'}>
                <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={4} placeholder={lang === 'ro' ? 'Detalii — când, unde, cât de des...' : 'Details...'} 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: 100,
                }} />
              </Field>
            </div>

            {/* Priority */}
            <div style={{ marginTop: 12 }}>
              <Field label={lang === 'ro' ? 'Cât de urgent este?' : 'How urgent?'}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
                  {Object.entries(ISSUE_PRIORITY).map(([key, cfg]) => (
                    <button key={key} onClick={() => setPriority(key)} style={{
                      padding: '8px', borderRadius: 8, cursor: 'pointer',
                      background: priority === key ? cfg.color : 'var(--surface-2)',
                      color: priority === key ? '#fff' : 'var(--ink-2)',
                      border: 0, fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
                    }}>{cfg['label_' + lang]}</button>
                  ))}
                </div>
              </Field>
            </div>

            {/* Photo upload mock */}
            <div style={{ marginTop: 12 }}>
              <button style={{
                width: '100%', padding: '12px', borderRadius: 10,
                background: 'var(--surface-2)', color: 'var(--ink-2)',
                border: '1px dashed var(--border)', cursor: 'pointer',
                fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>📷 {lang === 'ro' ? 'Adaugă fotografie / video' : 'Add photo / video'}</button>
            </div>

            <Button variant="primary" full size="lg" onClick={submit} icon="check" style={{ marginTop: 16 }}>
              {lang === 'ro' ? 'Trimite sesizarea' : 'Submit issue'}
            </Button>
          </>
        )}
        {step === 2 && (
          <div style={{ textAlign: 'center', padding: '24px 12px' }}>
            <div style={{
              width: 80, height: 80, borderRadius: 999,
              background: 'var(--success-bg)', color: 'var(--success)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 16, animation: 'pop 400ms cubic-bezier(0.2, 0.9, 0.3, 1.6)',
            }}>
              <Icon name="check" size={42} stroke={2.5} />
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0 }}>
              {lang === 'ro' ? 'Trimis!' : 'Submitted!'}
            </h3>
            <p style={{ fontSize: 13.5, color: 'var(--muted)', margin: '8px 0 0' }}>
              {lang === 'ro' ? 'Administratorul a fost notificat. Vei primi update-uri aici.' : 'Admin notified.'}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  IssuesScreen, TenantIssues, ISSUE_STATUS, ISSUE_PRIORITY, issueRelTime,
});