// ════════════════════════════════════════════════════
// rc-components.jsx — Shared UI Components
// Exports to window: ProgressBar, DeviceCard, FormInput, GpudcMockup
// ════════════════════════════════════════════════════

/* ── Progress Bar ── */
function ProgressBar({ current }) {
  const steps = [
    { id: 1, label: 'IP-адрес' },
    { id: 2, label: 'Логин' },
    { id: 3, label: 'Пароль' },
  ];
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
      {steps.map((step, idx) => {
        const done   = current > step.id;
        const active = current === step.id;
        return (
          <React.Fragment key={step.id}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
              <div style={{
                width: 34, height: 34, borderRadius: '50%',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
                background: (done || active) ? 'var(--primary)' : 'transparent',
                color:      (done || active) ? '#fff' : 'var(--text-muted)',
                border:     `2px solid ${(done || active) ? 'var(--primary)' : 'var(--border)'}`,
                transition: 'all 0.3s ease',
              }}>
                {done ? '✓' : step.id}
              </div>
              <span style={{
                fontSize: 11, whiteSpace: 'nowrap',
                color:      (done || active) ? 'var(--primary)' : 'var(--text-muted)',
                fontWeight: active ? 600 : 400,
                transition: 'all 0.3s ease',
              }}>
                {step.label}
              </span>
            </div>
            {idx < steps.length - 1 && (
              <div style={{
                width: 52, height: 2, marginBottom: 20, flexShrink: 0,
                background: done ? 'var(--primary)' : 'var(--border)',
                transition: 'background 0.3s ease',
              }} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

/* ── Device Card ── */
function DeviceCard({ type, onClick }) {
  const [hov, setHov] = React.useState(false);
  const isMac = type === 'mac';
  return (
    <button
      onClick={() => onClick(type)}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        flex: 1, padding: '28px 18px',
        border: `2px solid ${hov ? 'var(--primary)' : 'var(--border)'}`,
        borderRadius: 'var(--card-radius)',
        background: hov ? 'var(--primary-soft)' : 'var(--surface-2)',
        cursor: 'pointer', outline: 'none',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        transform: hov ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hov ? '0 12px 30px var(--shadow)' : '0 1px 4px var(--shadow)',
        transition: 'all 0.22s cubic-bezier(0.4,0,0.2,1)',
      }}
    >
      <span style={{ fontSize: 40, lineHeight: 1 }}>{isMac ? '💻' : '🖥️'}</span>
      <span style={{ fontSize: 17, fontWeight: 700, color: 'var(--text)' }}>
        {isMac ? 'Mac' : 'Windows'}
      </span>
      <span style={{
        fontSize: 12, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.5,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        Файл&nbsp;
        <code style={{
          background: 'var(--border)', padding: '1px 5px',
          borderRadius: 4, fontFamily: 'monospace', fontSize: 11,
          color: 'var(--text-muted)',
        }}>
          {isMac ? '.rdp' : '.bat'}
        </code>
        {isMac ? ' для Windows App' : ' для автозапуска'}
      </span>
    </button>
  );
}

/* ── Form Input ── */
function FormInput({ label, sublabel, value, onChange, placeholder, type = 'text', error, onKeyDown }) {
  const [focused,  setFocused]  = React.useState(false);
  const [showPass, setShowPass] = React.useState(false);
  const isPass      = type === 'password';
  const borderColor = error ? 'var(--error)' : focused ? 'var(--primary)' : 'var(--border)';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div>
        <label style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', display: 'block', marginBottom: 2 }}>
          {label}
        </label>
        {sublabel && (
          <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{sublabel}</span>
        )}
      </div>
      <div style={{ position: 'relative' }}>
        <input
          type={isPass && !showPass ? 'password' : 'text'}
          value={value}
          onChange={e => onChange(e.target.value)}
          placeholder={placeholder}
          onKeyDown={onKeyDown}
          onFocus={() => setFocused(true)}
          onBlur={()  => setFocused(false)}
          style={{
            width: '100%', height: 50,
            borderRadius: 'var(--input-radius)',
            border: `1.5px solid ${borderColor}`,
            padding: '0 16px', paddingRight: isPass ? 48 : 16,
            fontSize: 15, fontFamily: 'inherit', color: 'var(--text)',
            background: 'var(--surface-2)', outline: 'none', boxSizing: 'border-box',
            transition: 'border-color 0.2s',
          }}
        />
        {isPass && (
          <button type="button" onClick={() => setShowPass(s => !s)} style={{
            position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
            background: 'none', border: 'none', cursor: 'pointer', padding: 6,
            lineHeight: 0, color: 'var(--text-muted)', opacity: 0.7,
          }}>
            {showPass ? (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
                <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
                <line x1="1" y1="1" x2="23" y2="23"/>
              </svg>
            ) : (
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            )}
          </button>
        )}
      </div>
      {error && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 13, color: 'var(--error)' }}>
          ⚠ {error}
        </div>
      )}
    </div>
  );
}

/* ── gpudc.ru Mockup (always light — represents real website) ── */
function GpudcMockup({ highlight }) {
  const rows = [
    { key: 'ip',       label: 'Рабочий стол RDP', value: '85.143.167.10:49220' },
    { key: 'user',     label: 'Пользователь',      value: 'user' },
    { key: 'password', label: 'Пароль',             value: '••••••••', copy: true },
  ];

  return (
    <div style={{
      borderRadius: 10, overflow: 'hidden',
      border: '1.5px solid #e2e8f0',
      fontFamily: 'system-ui, -apple-system, sans-serif',
    }}>
      {/* Browser chrome */}
      <div style={{
        background: '#f1f5f9', padding: '6px 10px',
        display: 'flex', alignItems: 'center', gap: 8,
        borderBottom: '1px solid #e2e8f0',
      }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {['#ff5f56','#ffbd2e','#27c93f'].map(c => (
            <div key={c} style={{ width: 8, height: 8, borderRadius: '50%', background: c }} />
          ))}
        </div>
        <div style={{
          flex: 1, background: '#fff', border: '1px solid #e2e8f0', borderRadius: 4,
          padding: '2px 10px', fontSize: 11, color: '#64748b', fontFamily: 'monospace',
        }}>
          gpudc.ru/dashboard
        </div>
      </div>
      {/* Page content */}
      <div style={{ padding: '10px 12px', background: '#fff' }}>
        <div style={{ color: '#94a3b8', fontSize: 10, marginBottom: 8 }}>
          Личный кабинет → Мои машины → GPU Server
        </div>
        <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 8, padding: '8px 10px' }}>
          <div style={{
            fontSize: 10, fontWeight: 700, color: '#475569',
            textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6,
          }}>
            Публичный доступ
          </div>
          {rows.map(row => (
            <div key={row.key} style={{
              display: 'flex', alignItems: 'center', gap: 6,
              padding: '4px 6px', borderRadius: 5, marginBottom: 2,
              background: highlight === row.key ? '#fffbeb' : 'transparent',
              border: `1px solid ${highlight === row.key ? '#fbbf24' : 'transparent'}`,
            }}>
              <span style={{ fontSize: 11, color: '#64748b', width: 120, flexShrink: 0 }}>
                {row.label}
              </span>
              <code style={{
                fontSize: 11, fontFamily: 'monospace',
                background: highlight === row.key ? '#fef08a' : '#f1f5f9',
                border:     `1px solid ${highlight === row.key ? '#fbbf24' : '#e2e8f0'}`,
                color:      highlight === row.key ? '#92400e' : '#334155',
                padding: '1px 5px', borderRadius: 3,
              }}>
                {row.value}
              </code>
              {row.copy && (
                <span style={{
                  fontSize: 10, fontFamily: 'monospace',
                  background: highlight === row.key ? '#fef08a' : '#e2e8f0',
                  border:     `1px solid ${highlight === row.key ? '#fbbf24' : '#cbd5e1'}`,
                  color: '#475569', padding: '1px 5px', borderRadius: 3,
                }}>
                  .copy()
                </span>
              )}
              {highlight === row.key && (
                <span style={{
                  fontSize: 10, color: '#dc2626', fontWeight: 700,
                  marginLeft: 'auto', whiteSpace: 'nowrap',
                }}>
                  ← сюда
                </span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ── Export ── */
Object.assign(window, { ProgressBar, DeviceCard, FormInput, GpudcMockup });