/* global React, Icon */
const { useState, useEffect, useCallback } = React;

const API = () => window.PULSE_CONFIG?.apiBase || 'http://localhost:8000';

// ── Common timezone list ───────────────────────────────────────────────────
const TIMEZONES = [
  { value: 'Europe/London', label: 'London (GMT/BST)' },
  { value: 'Europe/Dublin', label: 'Dublin (GMT/IST)' },
  { value: 'Europe/Paris', label: 'Paris (CET/CEST)' },
  { value: 'Europe/Berlin', label: 'Berlin (CET/CEST)' },
  { value: 'Europe/Bucharest', label: 'Bucharest (EET/EEST)' },
  { value: 'Asia/Kolkata', label: 'Mumbai (IST)' },
  { value: 'Asia/Singapore', label: 'Singapore (SGT)' },
  { value: 'America/New_York', label: 'New York (EST/EDT)' },
  { value: 'America/Chicago', label: 'Chicago (CST/CDT)' },
  { value: 'America/Denver', label: 'Denver (MST/MDT)' },
  { value: 'America/Los_Angeles', label: 'Los Angeles (PST/PDT)' },
  { value: 'Australia/Sydney', label: 'Sydney (AEST/AEDT)' },
];

// ── Onboarding Wizard (post-registration) ─────────────────────────────────
const ONB_STEPS = ['Welcome', 'Your role', 'Your squads', 'Rhythm'];

function OnboardingWizard({ user, token, orgs, setOrgs, onComplete }) {
  const [step, setStep] = useState(0);
  const [name, setName] = useState(user.name || '');
  const [role, setRole] = useState(user.role || '');
  const [tz, setTz] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone || 'Europe/London');
  const [selectedSquads, setSelectedSquads] = useState([]); // [{id, name}]
  const [rhythm, setRhythm] = useState('daily');

  // Org tree helpers for adding squads
  const businesses = orgs.filter(o => o.type === 'business');
  const [bizId, setBizId] = useState('');
  const [fnId, setFnId] = useState('');
  const [teamId, setTeamId] = useState('');

  const functions_ = orgs.filter(o => o.type === 'function' && o.parent_id === bizId);
  const teams = orgs.filter(o => o.type === 'team' && o.parent_id === fnId);
  const squads = orgs.filter(o => o.type === 'squad' && o.parent_id === teamId);

  // Create new squad
  const [showCreateSquad, setShowCreateSquad] = useState(false);
  const [newSquadName, setNewSquadName] = useState('');
  const [creatingSquad, setCreatingSquad] = useState(false);

  const addSquad = (squad) => {
    if (!selectedSquads.find(s => s.id === squad.id)) {
      setSelectedSquads(prev => [...prev, squad]);
    }
  };

  const removeSquad = (id) => {
    setSelectedSquads(prev => prev.filter(s => s.id !== id));
  };

  const handleCreateSquad = async () => {
    if (!newSquadName.trim() || !teamId) return;
    setCreatingSquad(true);
    try {
      const res = await fetch(`${API()}/squads`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
        body: JSON.stringify({ name: newSquadName.trim(), parent_id: teamId }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || 'Failed to create squad');
      // Add to orgs list and select it
      setOrgs(prev => [...prev, data]);
      addSquad(data);
      setNewSquadName('');
      setShowCreateSquad(false);
    } catch (e) {
      alert(e.message);
    } finally {
      setCreatingSquad(false);
    }
  };

  const next = () => setStep(s => Math.min(s + 1, ONB_STEPS.length - 1));
  const prev = () => setStep(s => Math.max(s - 1, 0));

  const finish = async () => {
    const primarySquad = selectedSquads[0]?.id || null;
    try {
      await fetch(`${API()}/me/profile`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
        body: JSON.stringify({
          name, role, timezone: tz, rhythm,
          squad_id: primarySquad,
          squad_ids: selectedSquads.map(s => s.id),
        }),
      });
    } catch (e) { /* proceed anyway */ }
    onComplete({ ...user, name, role, squad_id: primarySquad, timezone: tz, rhythm });
  };

  const canNext = () => {
    if (step === 1) return name.trim() && role.trim();
    if (step === 2) return selectedSquads.length > 0;
    return true;
  };

  const renderStep = () => {
    switch (step) {
      case 0: // Welcome
        return (
          <>
            <span className="onb-eyebrow">WELCOME</span>
            <h2 className="auth-h2">Let's get you set up</h2>
            <p className="auth-sub">
              We'll walk you through a few quick steps so Pulse can surface the right insights for your squad.
            </p>
            <ul className="onb-checklist">
              <li><span className="onb-check">✓</span> Confirm your role &amp; timezone</li>
              <li><span className="onb-check">✓</span> Choose your squads</li>
              <li><span className="onb-check">✓</span> Set your check-in rhythm</li>
            </ul>
          </>
        );

      case 1: // Role + timezone
        return (
          <>
            <span className="onb-eyebrow">STEP 1 OF 3</span>
            <h2 className="auth-h2">About you</h2>
            <p className="auth-sub">
              Confirm your details — this helps your squad identify you and shows times in your zone.
            </p>
            <div className="onb-field">
              <label>Full name</label>
              <input
                type="text" value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Jane Smith"
                autoFocus
              />
            </div>
            <div className="onb-field">
              <label>Job title</label>
              <input
                type="text" value={role}
                onChange={e => setRole(e.target.value)}
                placeholder="e.g. Product Lead"
              />
            </div>
            <div className="onb-field">
              <label>Timezone</label>
              <select value={tz} onChange={e => setTz(e.target.value)}>
                {TIMEZONES.map(t => (
                  <option key={t.value} value={t.value}>{t.label}</option>
                ))}
              </select>
            </div>
          </>
        );

      case 2: // Squads (multi-select + create)
        return (
          <>
            <span className="onb-eyebrow">STEP 2 OF 3</span>
            <h2 className="auth-h2">Your squads</h2>
            <p className="auth-sub">
              Select one or more squads you belong to. The first will be your primary scope.
            </p>

            {/* Selected squads */}
            {selectedSquads.length > 0 && (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
                {selectedSquads.map((s, i) => (
                  <span key={s.id} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '6px 12px', background: i === 0 ? 'var(--accent-soft)' : 'var(--bg)',
                    border: '1px solid ' + (i === 0 ? 'var(--accent)' : 'var(--line)'),
                    borderRadius: 99, fontSize: 13, fontWeight: 500,
                    color: i === 0 ? 'var(--accent)' : 'var(--ink-2)',
                  }}>
                    {s.name}
                    {i === 0 && <span style={{ fontSize: 10, opacity: 0.7 }}>primary</span>}
                    <button type="button" onClick={() => removeSquad(s.id)} style={{
                      border: 0, background: 'transparent', cursor: 'pointer',
                      color: 'inherit', fontSize: 14, lineHeight: 1, padding: 0, marginLeft: 2,
                    }}>×</button>
                  </span>
                ))}
              </div>
            )}

            {/* Org tree pickers */}
            <div className="onb-field">
              <label>Business</label>
              <select value={bizId} onChange={e => { setBizId(e.target.value); setFnId(''); setTeamId(''); }}>
                <option value="">Select business…</option>
                {businesses.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
              </select>
            </div>
            <div className="onb-field">
              <label>Function</label>
              <select value={fnId} onChange={e => { setFnId(e.target.value); setTeamId(''); }} disabled={!bizId}>
                <option value="">Select function…</option>
                {functions_.map(f => <option key={f.id} value={f.id}>{f.name}</option>)}
              </select>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div className="onb-field">
                <label>Team</label>
                <select value={teamId} onChange={e => setTeamId(e.target.value)} disabled={!fnId}>
                  <option value="">Select team…</option>
                  {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                </select>
              </div>
              <div className="onb-field">
                <label>Squad</label>
                <select
                  value=""
                  onChange={e => {
                    const sq = squads.find(s => s.id === e.target.value);
                    if (sq) addSquad(sq);
                  }}
                  disabled={!teamId}
                >
                  <option value="">Add squad…</option>
                  {squads.filter(s => !selectedSquads.find(sel => sel.id === s.id)).map(s =>
                    <option key={s.id} value={s.id}>{s.name}</option>
                  )}
                </select>
              </div>
            </div>

            {/* Create new squad */}
            {teamId && !showCreateSquad && (
              <button
                type="button"
                className="onb-option ghost"
                onClick={() => setShowCreateSquad(true)}
                style={{ marginTop: 8 }}
              >
                <span style={{ fontSize: 18, lineHeight: 1, color: 'var(--accent)' }}>+</span>
                <div>
                  <div className="onb-option-name">Create a new squad</div>
                  <div className="onb-option-sub">Add a squad under the selected team</div>
                </div>
              </button>
            )}
            {showCreateSquad && (
              <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                <input
                  className="onb-field"
                  style={{ flex: 1, border: '1px solid var(--line)', borderRadius: 8, padding: '10px 12px', fontSize: 14, fontFamily: 'inherit' }}
                  placeholder="New squad name…"
                  value={newSquadName}
                  onChange={e => setNewSquadName(e.target.value)}
                  autoFocus
                  onKeyDown={e => e.key === 'Enter' && handleCreateSquad()}
                />
                <button type="button" className="onb-btn-primary" onClick={handleCreateSquad} disabled={creatingSquad || !newSquadName.trim()}>
                  {creatingSquad ? '…' : 'Create'}
                </button>
                <button type="button" className="onb-btn-ghost" onClick={() => setShowCreateSquad(false)}>Cancel</button>
              </div>
            )}
          </>
        );

      case 3: // Rhythm
        return (
          <>
            <span className="onb-eyebrow">STEP 3 OF 3</span>
            <h2 className="auth-h2">Check-in rhythm</h2>
            <p className="auth-sub">
              How often would you like to check in? Your check-in button resets based on this cadence.
            </p>
            <div className="onb-options">
              {[
                { id: 'daily', name: 'Daily', sub: 'Quick pulse every workday' },
                { id: '3x', name: '3× per week', sub: 'Mon, Wed, Fri' },
                { id: 'weekly', name: 'Weekly', sub: 'Once per week (recommended for leads)', suggested: true },
              ].map(opt => (
                <button
                  key={opt.id}
                  type="button"
                  className="onb-option"
                  aria-current={rhythm === opt.id}
                  onClick={() => setRhythm(opt.id)}
                >
                  <div className="onb-option-radio">
                    {rhythm === opt.id && <div className="onb-option-radio-inner" />}
                  </div>
                  <div>
                    <div className="onb-option-name">
                      {opt.name}
                      {opt.suggested && <span className="onb-suggested">suggested</span>}
                    </div>
                    <div className="onb-option-sub">{opt.sub}</div>
                  </div>
                </button>
              ))}
            </div>
          </>
        );
    }
  };

  return (
    <div className="auth-shell variant-a">
      <div className="auth-bg-soft" />
      <div className="onb-shell">
        {/* Progress */}
        <div className="onb-progress">
          {ONB_STEPS.map((label, i) => (
            <div key={i} className={`onb-step ${i < step ? 'done' : ''} ${i === step ? 'curr' : ''}`}>
              <div className="onb-dot">
                {i < step ? '✓' : i + 1}
              </div>
              <span className="onb-step-label">{label}</span>
            </div>
          ))}
        </div>

        {/* Card */}
        <div className="onb-card">
          {renderStep()}

          <div className="onb-card-foot">
            {step > 0 && (
              <button type="button" className="onb-btn-ghost" onClick={prev}>Back</button>
            )}
            <div style={{ flex: 1 }} />
            {step < ONB_STEPS.length - 1 ? (
              <button type="button" className="onb-btn-primary" onClick={next} disabled={!canNext()}>
                Continue
              </button>
            ) : (
              <button type="button" className="onb-btn-primary" onClick={finish}>
                Get started
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}


// ── Auth Screen (Variant B: split layout) ─────────────────────────────────
function AuthScreen({ onAuth }) {
  const [mode, setMode] = useState('login'); // login | register | onboarding
  const [orgs, setOrgs] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [pendingUser, setPendingUser] = useState(null);
  const [pendingToken, setPendingToken] = useState(null);

  // Login fields
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // Register fields
  const [regName, setRegName] = useState('');
  const [regEmail, setRegEmail] = useState('');
  const [regPassword, setRegPassword] = useState('');

  useEffect(() => {
    fetch(`${API()}/orgs`)
      .then(r => r.json())
      .then(setOrgs)
      .catch(() => {});
  }, []);

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      const res = await fetch(`${API()}/login`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || 'Login failed');
      localStorage.setItem('pulse_token', data.token);
      localStorage.setItem('pulse_user', JSON.stringify(data.user));
      onAuth(data.token, data.user);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleRegister = async (e) => {
    e.preventDefault();
    setError('');
    if (regPassword.length < 6) { setError('Password must be at least 6 characters'); return; }
    setLoading(true);
    try {
      const res = await fetch(`${API()}/register`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: regName,
          email: regEmail,
          password: regPassword,
          role: '',
          squad_id: null,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || 'Registration failed');
      // Go to onboarding wizard
      setPendingToken(data.token);
      setPendingUser(data.user);
      setMode('onboarding');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleOnboardingComplete = (updatedUser) => {
    localStorage.setItem('pulse_token', pendingToken);
    localStorage.setItem('pulse_user', JSON.stringify(updatedUser));
    onAuth(pendingToken, updatedUser);
  };

  // ── Onboarding mode ──
  if (mode === 'onboarding') {
    return (
      <OnboardingWizard
        user={pendingUser}
        token={pendingToken}
        orgs={orgs}
        setOrgs={setOrgs}
        onComplete={handleOnboardingComplete}
      />
    );
  }

  // ── Sign-in / Register (Variant B) ──
  return (
    <div className="auth-shell variant-b">
      {/* Dark side panel */}
      <div className="auth-side">
        <div className="auth-decoration">
          <div className="auth-ring r1" />
          <div className="auth-ring r2" />
          <div className="auth-ring r3" />
          <div className="auth-mark"><Icon.Logo /></div>
        </div>

        <div className="auth-side-quote">
          <span className="auth-eyebrow">CENTRICA PULSE</span>
          <h1 className="auth-side-headline">
            Your team's operating&nbsp;rhythm, surfaced in&nbsp;seconds.
          </h1>
          <p className="auth-side-sub">
            Async check-ins, AI-powered insights, and squad-level reports — so squads stay in sync without another standup.
          </p>
          <div className="auth-side-pill-row">
            <span className="auth-pill">Voice check-ins</span>
            <span className="auth-pill">AI summaries</span>
            <span className="auth-pill">Squad reports</span>
            <span className="auth-pill">Real-time signals</span>
          </div>
        </div>
      </div>

      {/* Right card */}
      <div className="auth-card-wrap">
        <div className="auth-card">
          <div className="auth-mark-row">
            <div className="auth-card-mark"><Icon.Logo /></div>
            <div>
              <div className="auth-card-name">Centrica Pulse</div>
              <div className="auth-card-tag">Operating console</div>
            </div>
          </div>

          {mode === 'login' ? (
            <>
              <h1 className="auth-h1">Sign in to Pulse</h1>
              <p className="auth-sub">Enter your Centrica work email to continue.</p>

              {error && (
                <div className="auth-error" style={{ background: '#FEF0E5', color: '#c03', borderRadius: 8, padding: '10px 14px', fontSize: 13, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon.AlertCircle style={{ width: 14, height: 14, flexShrink: 0 }} />
                  {error}
                </div>
              )}

              <form onSubmit={handleLogin}>
                <div className="onb-field">
                  <label>Work email</label>
                  <input
                    type="email" required autoComplete="email" autoFocus
                    placeholder="you@centrica.com"
                    value={email} onChange={e => setEmail(e.target.value)}
                  />
                </div>
                <div className="onb-field">
                  <label>Password</label>
                  <input
                    type="password" required autoComplete="current-password"
                    placeholder="••••••••"
                    value={password} onChange={e => setPassword(e.target.value)}
                  />
                </div>
                <button className="ms-btn" type="submit" disabled={loading || !email || !password}>
                  {loading ? <><span className="sp" /> Signing in…</> : 'Sign in'}
                </button>
              </form>

              <div className="auth-divider">or</div>

              <button type="button" className="auth-link" onClick={() => { setMode('register'); setError(''); }}>
                Create a new account
              </button>
            </>
          ) : (
            <>
              <h1 className="auth-h1">Create your account</h1>
              <p className="auth-sub">We'll set up your squad and preferences next.</p>

              {error && (
                <div className="auth-error" style={{ background: '#FEF0E5', color: '#c03', borderRadius: 8, padding: '10px 14px', fontSize: 13, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon.AlertCircle style={{ width: 14, height: 14, flexShrink: 0 }} />
                  {error}
                </div>
              )}

              <form onSubmit={handleRegister}>
                <div className="onb-field">
                  <label>Full name</label>
                  <input
                    type="text" required autoFocus autoComplete="name"
                    placeholder="Jane Smith"
                    value={regName} onChange={e => setRegName(e.target.value)}
                  />
                </div>
                <div className="onb-field">
                  <label>Work email</label>
                  <input
                    type="email" required autoComplete="email"
                    placeholder="you@centrica.com"
                    value={regEmail} onChange={e => setRegEmail(e.target.value)}
                  />
                </div>
                <div className="onb-field">
                  <label>Password</label>
                  <input
                    type="password" required autoComplete="new-password"
                    placeholder="Min 6 characters"
                    value={regPassword} onChange={e => setRegPassword(e.target.value)}
                  />
                  {regPassword.length > 0 && regPassword.length < 6 && (
                    <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4 }}>At least 6 characters required</div>
                  )}
                </div>
                <button className="ms-btn" type="submit" disabled={loading || !regName || !regEmail || regPassword.length < 6}>
                  {loading ? <><span className="sp" /> Creating account…</> : 'Create account'}
                </button>
              </form>

              <div className="auth-divider">or</div>

              <button type="button" className="auth-link" onClick={() => { setMode('login'); setError(''); }}>
                Already have an account? Sign in
              </button>
            </>
          )}

          <div className="auth-tenant-row">
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--ok)' }} />
            centrica.com
          </div>
        </div>

        <div className="auth-foot centered">
          <span className="auth-status"><span className="status-dot" /> All systems operational</span>
        </div>
      </div>
    </div>
  );
}

window.AuthScreen = AuthScreen;