// Screens: Login, User Dashboard, Editor, Preview, Admin

const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR } = React;

// ================== LOGIN ==================
function LoginScreen({ users, onLogin, onAdminLogin }) {
  const [email, setEmail] = uS('');
  const [sent, setSent] = uS(false);
  const [stage, setStage] = uS('input'); // input | sent | code
  const [code, setCode] = uS('');
  const [error, setError] = uS('');
  const valid = /\S+@\S+\.\S+/.test(email);
  const adminMode = NordicrewCore.normalizeEmail(email) === 'admin@nordicrew.club';

  const submit = () => {
    if (!valid) return;
    setError('');
    setStage('sent');
    setTimeout(() => setStage('code'), 600);
  };

  const verify = async () => {
    setError('');
    if (adminMode) {
      try {
        if (window.NordicrewApi) await NordicrewApi.loginAdmin(code);
        if (NordicrewCore.authenticateAdmin(code)) onAdminLogin();
        else setError('Неверный пароль администратора.');
      } catch (err) {
        if (NordicrewCore.authenticateAdmin(code)) onAdminLogin();
        else setError('Неверный пароль администратора.');
      }
      return;
    }
    let uid = null;
    try {
      if (window.NordicrewApi) {
        const res = await NordicrewApi.loginUser(email, code);
        uid = res.userId;
      }
    } catch (err) {
      uid = null;
    }
    if (!uid) uid = NordicrewCore.authenticateUser(users, email, code);
    if (uid) onLogin(uid);
    else setError('Пользователь не найден или код приглашения неверный.');
  };

  return (
    <div className="login-shell">
      <div className="login-theme-toggle"><ThemeToggle/></div>
      <div className="login-bg">
        <div className="grid-bg"/>
        <div className="glow glow-1"/>
        <div className="glow glow-2"/>
      </div>
      <div className="login-card">
        <div className="login-brand">
          <div className="login-mark"><Sticker src="stickers/30_circle_outline.svg" color="var(--accent)"/></div>
          <div className="login-brand-text">
            <div className="brand-name">NORDICREW</div>
            <div className="brand-sub">/ MEMBERS · KIT BUILDER</div>
          </div>
        </div>
        <div className="login-divider"/>
        {stage === 'input' && (
          <div className="login-form">
            <div className="login-h">Доступ по приглашению</div>
            <div className="login-p">Введите e-mail, привязанный к вашему профилю.<br/>Доступ открывается по коду приглашения от координатора.</div>
            <label className="field">
              <span>E-MAIL</span>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="member-a@nordicrew.local" autoFocus/>
            </label>
            <button className="btn primary" disabled={!valid} onClick={submit}>
              <span>ПОЛУЧИТЬ ДОСТУП</span><span className="btn-arrow">→</span>
            </button>
            <div className="login-hint">Пример: member-a@nordicrew.local / 010101. Админ: admin@nordicrew.club / nordicrew-admin</div>
          </div>
        )}
        {stage === 'sent' && (
          <div className="login-form sending">
            <div className="login-pulse"/>
            <div className="login-h">Отправляем magic link…</div>
            <div className="login-p">Проверяем приглашение Nordicrew.</div>
          </div>
        )}
        {stage === 'code' && (
          <div className="login-form">
            <div className="login-h">{adminMode ? 'Админ-доступ' : 'Введите код приглашения'}</div>
            <div className="login-p">
              {adminMode
                ? <>Введите пароль администратора для <b>{email}</b>.</>
                : <>Код для <b>{email}</b> выдаёт координатор клуба.</>}
            </div>
            <label className="field">
              <span>{adminMode ? 'ПАРОЛЬ' : 'КОД ПРИГЛАШЕНИЯ'}</span>
              <input value={code}
                     type={adminMode ? 'password' : 'text'}
                     onChange={e => setCode(adminMode ? e.target.value : e.target.value.replace(/\D/g,'').slice(0,6))}
                     placeholder={adminMode ? 'nordicrew-admin' : '000 000'}
                     inputMode={adminMode ? 'text' : 'numeric'}/>
            </label>
            {error && <div className="form-error">{error}</div>}
            <button className="btn primary" onClick={verify}>
              <span>ВОЙТИ</span><span className="btn-arrow">→</span>
            </button>
            <button className="btn ghost small" onClick={() => setStage('input')}>← Изменить e-mail</button>
          </div>
        )}
      </div>
      <div className="login-foot">
        <span>NORDICREW · 2026 SEASON KIT</span>
        <span className="dot"/>
        <span>v1.0.0</span>
        <span className="dot"/>
        <button className="link-btn" onClick={() => { setEmail('admin@nordicrew.club'); setStage('input'); setCode(''); }}>войти как админ</button>
      </div>
    </div>
  );
}

// ================== USER DASHBOARD ==================
function UserDashboard({ users, shirts, customLib, templates, userId, onOpenShirt, onPreview, onLogout, onApplyTemplate }) {
  const user = users.find(u => u.id === userId);
  const myShirts = user.shirts.map(id => shirts[id]).filter(Boolean);
  const done = myShirts.filter(s => s.status === 'done').length;
  const total = myShirts.length;
  const allDone = done === total;

  return (
    <div className="app-shell">
      <TopBar user={user} onLogout={onLogout} title="МОИ ФУТБОЛКИ" subtitle="2026 SEASON KIT"/>
      <div className="dashboard">
        <div className="dash-hero">
          <div className="dash-hero-left">
            <div className="hero-eyebrow">КОМПЛЕКТ #{user.carNumber} · {user.nickname}</div>
            <div className="hero-h">Соберите свой kit</div>
            <div className="hero-p">Разместите логотипы на каждой футболке. Когда все будут готовы — отправьте на печать.</div>
          </div>
          <div className="dash-hero-right">
            <div className="progress-ring">
              <svg viewBox="0 0 120 120">
                <circle cx="60" cy="60" r="52" fill="none" stroke="var(--surface-2)" strokeWidth="8"/>
                <circle cx="60" cy="60" r="52" fill="none" stroke="var(--ok)" strokeWidth="8"
                        strokeLinecap="round" strokeDasharray={`${(done/total) * 326} 326`}
                        transform="rotate(-90 60 60)"/>
              </svg>
              <div className="ring-text">
                <div className="ring-num">{done}<span>/{total}</span></div>
                <div className="ring-label">готово</div>
              </div>
            </div>
            <button className="btn primary" disabled={!allDone || user.status === 'finished'} onClick={onPreview}>
              <span>{user.status === 'finished' ? 'КОМПЛЕКТ СОХРАНЁН' : allDone ? 'СОХРАНИТЬ КОМПЛЕКТ' : 'ЗАВЕРШИТЕ ВСЕ ФУТБОЛКИ'}</span>
              <span className="btn-arrow">→</span>
            </button>
          </div>
        </div>

        <TemplateChooser templates={templates} disabled={user.status === 'finished'} onApplyTemplate={onApplyTemplate}/>

        <div className="shirt-grid">
          {myShirts.map((s, i) => (
            <ShirtCard key={s.id} shirt={s} index={i+1} user={user} customLib={customLib} onClick={() => onOpenShirt(s.id)}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function TemplateChooser({ templates, disabled, onApplyTemplate }) {
  if (!templates || !templates.length) return null;
  return (
    <div className="template-chooser">
      <div>
        <div className="tc-title">СТАРТОВЫЕ ШАБЛОНЫ</div>
        <div className="tc-sub">Можно применить заготовку ко всем своим незавершённым футболкам, а потом двигать и менять принты вручную.</div>
      </div>
      <div className="tc-list">
        {templates.map(t => (
          <button key={t.id} className="tc-card" disabled={disabled} onClick={() => onApplyTemplate(t.id)}>
            <span>{t.name}</span>
            <small>{t.description || 'Шаблон Nordicrew'}</small>
          </button>
        ))}
      </div>
    </div>
  );
}

function ShirtCard({ shirt, index, user, customLib, onClick }) {
  const designCount = ['front','back','sleeve']
    .reduce((acc, k) => acc + (shirt.designs[k]?.length || 0), 0);
  return (
    <button className={`shirt-card ${shirt.status}`} onClick={onClick}>
      <div className="card-head">
        <div className="card-title">
          <span className="card-num">#{String(index).padStart(2,'0')}</span>
          <span className="card-color-dot" style={{ background: shirt.color === 'white' ? '#fff' : '#0a0a0c' }}/>
          <span>{shirt.color === 'white' ? 'WHITE' : 'BLACK'} · {shirt.size}</span>
        </div>
        <div className={`card-status ${shirt.status}`}>
          {shirt.status === 'done' ? '● ГОТОВО' : '◌ ЧЕРНОВИК'}
        </div>
      </div>
      <div className="card-preview">
        <div className="mini-shirt">
          {shirt.color === 'white'
            ? <ShirtFront shirtColor="white" showZoneOutline={false}>
                {(shirt.designs.front || []).map(d => (
                  <DesignItem key={d.id} item={d} zoneRect={ZONE_RECTS.front} selected={false}
                              onSelect={() => {}} onChange={() => {}} locked snap={false} customLib={customLib}/>
                ))}
              </ShirtFront>
            : <ShirtFront shirtColor="black" showZoneOutline={false}>
                {(shirt.designs.front || []).map(d => (
                  <DesignItem key={d.id} item={d} zoneRect={ZONE_RECTS.front} selected={false}
                              onSelect={() => {}} onChange={() => {}} locked snap={false} customLib={customLib}/>
                ))}
              </ShirtFront>}
        </div>
      </div>
      <div className="card-foot">
        <span>{designCount} принт{designCount === 1 ? '' : designCount < 5 ? 'а' : 'ов'}</span>
        <span className="card-action">{shirt.status === 'done' ? 'РЕДАКТИРОВАТЬ' : 'НАЧАТЬ'} →</span>
      </div>
    </button>
  );
}

// ================== TOP BAR ==================
function ThemeToggle() {
  const [, force] = uS(0);
  const mode = window.__themeMode || 'dark';
  return (
    <button className="theme-toggle-inline" onClick={() => { window.__toggleThemeMode && window.__toggleThemeMode(); force(x => x+1); }}
            title={mode === 'dark' ? 'Светлая тема' : 'Тёмная тема'}>
      <span className="tti-icon">{mode === 'dark' ? '☀' : '☾'}</span>
      <span className="tti-label">{mode === 'dark' ? 'СВЕТЛАЯ' : 'ТЁМНАЯ'}</span>
    </button>
  );
}

function TopBar({ user, onLogout, title, subtitle, right, onBack }) {
  return (
    <div className="topbar">
      <div className="topbar-left">
        {onBack && <button className="icon-btn" onClick={onBack}>←</button>}
        <div className="brand-mini"><Sticker src="stickers/30_circle_outline.svg" color="var(--accent)"/></div>
        <div className="topbar-title">
          <div className="t-eyebrow">{subtitle}</div>
          <div className="t-h">{title}</div>
        </div>
      </div>
      <div className="topbar-right">
        {right}
        <ThemeToggle/>
        {user && (
          <div className="user-chip">
            <div className="user-chip-num">#{user.carNumber}</div>
            <div className="user-chip-text">
              <div>{user.nickname}</div>
              <div className="user-chip-email">{user.email}</div>
            </div>
            <button className="icon-btn" onClick={onLogout} title="Выйти">⏻</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, UserDashboard, ShirtCard, TemplateChooser, TopBar, ThemeToggle });