// identity-modal.jsx — login + invite flows.
// Two flows in one modal:
//   1) Magic-link login: enter email → receive code → enter code → in.
//   2) Invite a dreng: name + email → adds to whitelist (backend or local).

const { useState: idUseState, useEffect: idUseEffect, useRef: idUseRef } = React;

function LoginModal({ open, mode, onSuccess, onClose }) {
  const [view, setView] = idUseState('login'); // login | register | switch
  const [email, setEmail] = idUseState('');
  const [password, setPassword] = idUseState('');
  const [confirm, setConfirm] = idUseState('');
  const [pending, setPending] = idUseState(false);
  const [error, setError] = idUseState('');

  idUseEffect(() => {
    if (open) {
      setView(mode === 'switch' ? 'switch' : 'login');
      setEmail(''); setPassword(''); setConfirm(''); setError(''); setPending(false);
    }
  }, [open, mode]);

  if (!open) return null;

  const goRegister = () => { setPassword(''); setConfirm(''); setError(''); setView('register'); };
  const goLogin    = () => { setPassword(''); setConfirm(''); setError(''); setView('login'); };

  const login = async () => {
    setError('');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError('Det ligner ikke en email.'); return; }
    if (!password) { setError('Indtast dit kodeord.'); return; }
    setPending(true);
    try {
      const res = await window.AarshjulAPI.loginPassword(email, password);
      onSuccess(res.member);
    } catch (err) {
      setError(err.message || 'Forkert email eller kodeord.');
    } finally { setPending(false); }
  };

  const register = async () => {
    setError('');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError('Det ligner ikke en email.'); return; }
    if (password.length < 6) { setError('Kodeord skal være mindst 6 tegn.'); return; }
    if (password !== confirm) { setError('Kodeordene matcher ikke.'); return; }
    setPending(true);
    try {
      const res = await window.AarshjulAPI.registerPassword(email, password);
      onSuccess(res.member);
    } catch (err) {
      setError(err.message || 'Kunne ikke oprette konto. Prøv igen.');
    } finally { setPending(false); }
  };

  return (
    <div className="modal-overlay" onClick={mode === 'switch' ? onClose : undefined}>
      <div className="modal modal-narrow" onClick={(e) => e.stopPropagation()}>

        {view === 'login' && (
          <>
            <div className="modal-eyebrow">Velkommen, dekadent dreng</div>
            <h2 className="modal-title">Log ind</h2>
            <p className="modal-lede">Kun drenge på listen kan komme ind.</p>
            <div className="login-form">
              <label className="login-lbl">Email</label>
              <input type="email" autoFocus inputMode="email" className="login-input"
                     placeholder="dit.navn@example.com" value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     onKeyDown={(e) => { if (e.key === 'Enter') login(); }}/>
              <label className="login-lbl">Kodeord</label>
              <input type="password" className="login-input" placeholder="••••••••"
                     value={password} onChange={(e) => setPassword(e.target.value)}
                     onKeyDown={(e) => { if (e.key === 'Enter') login(); }}/>
              {error && <div className="login-error">{error}</div>}
              <button className="login-submit" disabled={pending} onClick={login}>
                {pending ? 'Logger ind…' : 'Log ind'}
              </button>
              <button className="login-link" onClick={goRegister}>
                Har du ikke et kodeord endnu? Opret her
              </button>
            </div>
          </>
        )}

        {view === 'register' && (
          <>
            <div className="modal-eyebrow">Ny dreng</div>
            <h2 className="modal-title">Opret kodeord</h2>
            <p className="modal-lede">Kun emails på drenge-listen kan oprette en konto.</p>
            <div className="login-form">
              <label className="login-lbl">Email</label>
              <input type="email" autoFocus inputMode="email" className="login-input"
                     placeholder="dit.navn@example.com" value={email}
                     onChange={(e) => setEmail(e.target.value)}/>
              <label className="login-lbl">Kodeord</label>
              <input type="password" className="login-input" placeholder="Mindst 6 tegn"
                     value={password} onChange={(e) => setPassword(e.target.value)}/>
              <label className="login-lbl">Gentag kodeord</label>
              <input type="password" className="login-input" placeholder="••••••••"
                     value={confirm} onChange={(e) => setConfirm(e.target.value)}
                     onKeyDown={(e) => { if (e.key === 'Enter') register(); }}/>
              {error && <div className="login-error">{error}</div>}
              <button className="login-submit" disabled={pending} onClick={register}>
                {pending ? 'Opretter…' : 'Opret konto'}
              </button>
              <button className="login-link" onClick={goLogin}>← Tilbage til login</button>
            </div>
          </>
        )}

        {view === 'switch' && (
          <SwitchUserView onPick={(member) => onSuccess(member, true)} onClose={onClose}/>
        )}

        {mode === 'switch' && view !== 'switch' && (
          <button className="modal-dismiss" onClick={onClose}>Luk</button>
        )}
      </div>
    </div>
  );
}

function InviteForm({ initialEmail = '', onCancel, onDone }) {
  const [name, setName] = idUseState('');
  const [email, setEmail] = idUseState(initialEmail);
  const [error, setError] = idUseState('');
  const [pending, setPending] = idUseState(false);

  const submit = async () => {
    setError('');
    if (!name.trim()) { setError('Skriv et navn.'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError('Email ser ikke rigtig ud.'); return; }
    setPending(true);
    try {
      // Build a slug-id from the name
      const id = name.trim().toLowerCase()
        .replace(/[æ]/g, 'ae').replace(/[ø]/g, 'oe').replace(/[å]/g, 'aa')
        .replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '') + '-' + Math.random().toString(36).slice(2, 5);
      const initials = name.trim().slice(0, 2).toUpperCase();
      const newMember = await window.AarshjulAPI.inviteMember({ id, name: name.trim(), email, initials });
      onDone(newMember);
    } catch (err) {
      setError(err.message || 'Kunne ikke tilføje. Prøv igen.');
    } finally {
      setPending(false);
    }
  };

  return (
    <>
      <div className="modal-eyebrow">Ny dreng</div>
      <h2 className="modal-title">Tilføj dig selv til broderskabet</h2>
      <p className="modal-lede">
        Skriv navn + email. Du bliver tilføjet til drenge-listen og kan derefter
        logge ind. (Kan ses senere af de andre når backenden er live.)
      </p>
      <div className="login-form">
        <label className="login-lbl">Navn</label>
        <input type="text" autoFocus className="login-input"
               placeholder="fx. Rasmus"
               value={name}
               onChange={(e) => setName(e.target.value)}/>
        <label className="login-lbl">Email</label>
        <input type="email" inputMode="email" className="login-input"
               placeholder="rasmus@example.com"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}/>
        {error && <div className="login-error">{error}</div>}
        <button className="login-submit" disabled={pending} onClick={submit}>
          {pending ? 'Tilføjer…' : 'Tilføj og fortsæt'}
        </button>
        <button className="login-link" onClick={onCancel}>← Tilbage til login</button>
      </div>
    </>
  );
}

function SwitchUserView({ onPick, onClose }) {
  const members = window.AarshjulAPI.getAllMembers();
  return (
    <>
      <div className="modal-eyebrow">Skift identitet</div>
      <h2 className="modal-title">Hvem er du nu?</h2>
      <p className="modal-lede">Vælg den dreng du vil agere som (kun til demo / dev).</p>
      <div className="modal-grid">
        {members.map((m) => (
          <button key={m.id} className="modal-member" onClick={() => onPick(m)}>
            <Avatar member={m} size={44}/>
            <span>{m.name}</span>
          </button>
        ))}
      </div>
    </>
  );
}

function RsvpPromptModal({ open, trip, member, onAnswer, onClose }) {
  if (!open || !trip || !member) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-narrow" onClick={(e) => e.stopPropagation()}>
        <div className="modal-eyebrow">Indkaldelse</div>
        <h2 className="modal-title">Goddag, {member.name}.</h2>
        <p className="modal-lede">
          Næste samling i sommerhuset er <em>{trip.name}</em>,&nbsp;
          {window.fmtDateRange(trip.start, trip.end)} — {trip.location.split(',')[0]}.
          Kommer du?
        </p>
        <div className="modal-rsvp-row">
          <button className="modal-rsvp modal-rsvp-yes" onClick={() => onAnswer('yes')}>
            <span className="modal-rsvp-lbl">Ja, jeg er der</span>
            <span className="modal-rsvp-sub">Jeg påtager mig en tjans</span>
          </button>
          <button className="modal-rsvp modal-rsvp-maybe" onClick={() => onAnswer('maybe')}>
            <span className="modal-rsvp-lbl">Måske</span>
            <span className="modal-rsvp-sub">Jeg melder tilbage</span>
          </button>
          <button className="modal-rsvp modal-rsvp-no" onClick={() => onAnswer('no')}>
            <span className="modal-rsvp-lbl">Forhindret</span>
            <span className="modal-rsvp-sub">Beklageligvis</span>
          </button>
        </div>
        <button className="modal-skip" onClick={onClose}>Spring over — svar senere</button>
      </div>
    </div>
  );
}

// Calendar-add component: shows up after login if user has Gmail-style email.
// Currently just downloads .ics for all four trips at once. Backend will later
// auto-add via Calendar API for Gmail users.
function CalendarAddPrompt({ open, member, trips, onClose, onAddedAll }) {
  if (!open) return null;
  const isGmail = member?.email?.endsWith('@gmail.com');
  const downloadAll = () => {
    trips.forEach((trip, i) => setTimeout(() => window.downloadIcs(trip), i * 250));
    onAddedAll && onAddedAll();
  };
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal modal-narrow" onClick={(e) => e.stopPropagation()}>
        <div className="modal-eyebrow">Velkommen, {member.name}</div>
        <h2 className="modal-title">Læg årshjulet i din kalender?</h2>
        <p className="modal-lede">
          Alle 4 ture på én gang. Du kan altid hente dem enkeltvis igen senere fra hver tur-side.
          {isGmail && (
            <span> Når backend er live tilføjes de automatisk til din Google Calendar.</span>
          )}
        </p>
        <div className="login-form">
          <button className="login-submit" onClick={() => { downloadAll(); onClose(); }}>
            Hent .ics for alle 4 ture
          </button>
          <button className="login-link" onClick={onClose}>Måske senere</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginModal, RsvpPromptModal, CalendarAddPrompt });