const { useState } = React;

const COPY = {
  ko: {
    home: '홈으로',
    langKo: '한글',
    langEn: 'English',
    navCta: '이메일로 가입',
    close: '닫기',
    kicker: '',
    title1: '오둥이와\n매일을 함께 해줘',
    title2: '음악·웹툰·철학·시\n디지털 이야기',
    lead: '모든 콘텐츠를 무료로 공개합니다. 가입 없이도 음악·이미지·웹툰을 자유롭게 만나보세요.',
    cta: '이메일로 가입',
    freeNote: '모든 콘텐츠 무료',
    payNote: '가입은 이메일·비번만',
    afterJuly: '',
    remaining: '오픈 테스트',
    stepTitle: '이용 안내',
    steps: [
      ['01', '3일 자유 체험', '가입 없이 음악·이미지·웹툰을 자유롭게 이용하세요.'],
      ['02', '4일째 이메일 가입', '이메일·비밀번호만 입력하면 모든 콘텐츠를 무료로 계속 이용 가능합니다. 이름·주소·전화번호는 요구하지 않습니다.'],
    ],
    plansKicker: '프리미엄 구독 (7월부터)',
    plansTitle: 'Google Play 구독으로 매일을 함께',
    planMonthlyName: '월 구독',
    planMonthlyPrice: '4,900원 / 월',
    planMonthlyDesc: '매일 새 음악·4컷만화·픽 이미지·철학 스토리',
    planAnnualName: '연 구독',
    planAnnualBadge: '17% 할인',
    planAnnualPrice: '49,000원 / 년',
    planAnnualDesc: '월 구독 혜택 전부 + 분기 카드 4장 / 년 (옵션)',
    planAnnualKrBonus: '🇰🇷 한국 가입자: 가입 즉시 아트북 1권 추가 (옵션)',
    plansCTA: 'Google Play에서 구독',
    plansPolicyNote: '결제는 Google Play Store에서 진행됩니다. 자동 갱신, 언제든 해지 가능, 7일 무료체험 중 해지 시 비용 없음.',
    goodsKicker: '연 구독자 굿즈 (선택)',
    goodsTitle: '분기마다 카드 한 장씩',
    goodsLead: '연 구독자 중 굿즈를 원하시는 분께 분기마다 시즌 카드를 랜덤으로 보내드립니다.',
    goodsSchedule: '발송 일정: 구독 시작 즉시 / 3개월 후 / 6개월 후 / 9개월 후',
    goodsKrBonus: '🇰🇷 한국 연 구독자: 가입 즉시 아트북 1권(14장) + 1차 카드 동시 발송',
    goodsPrivacyNote: '굿즈는 원하시는 분께만 발송됩니다. 주소·이름은 굿즈 신청 시에만 수집하며, 안 받기를 선택하시면 개인정보 수집 없이 디지털 콘텐츠만 이용 가능합니다.',
    bookTitle: '이미지는 분위기로, 글은 직접 읽히게',
    bookText: '',
    castTitle: '오둥이 다섯 친구',
    cast: [
      ['열무', 'Papillon dog'],
      ['배추', 'Cocker Spaniel dog'],
      ['상추', 'Old English Sheepdog'],
      ['김치', 'Scottish Fold cat'],
      ['까미', 'Tuxedo cat'],
    ],
    formTitle: '무료 가입',
    formText: '이메일과 비밀번호만 입력하면 가입 완료. 계정 식별과 안내에는 이메일만 사용하며, 이름·주소·전화번호는 요구하지 않습니다.',
    email: '이메일',
    password: '비밀번호',
    passwordHint: '6자 이상',
    consent: '서비스 이용약관 및 계정 생성에 필요한 이메일·비밀번호 처리에 동의합니다.',
    submit: '이메일과 비번만으로 가입',
    submitting: '가입 중...',
    successTitle: '환영합니다!',
    successText: '이메일 가입으로 모든 콘텐츠를 무료로 이용하세요.',
    successCta: '홈으로 가기',
    successClose: '닫기',
    duplicate: '이미 가입된 이메일입니다. 기존 계정으로 로그인해 주세요.',
    invalidEmail: '이메일 형식이 올바르지 않습니다.',
    weakPassword: '비밀번호는 6자 이상으로 입력해 주세요.',
    missing: '이메일과 비밀번호를 입력해 주세요.',
    consentMissing: '이용약관 동의가 필요합니다.',
    fail: '가입에 실패했습니다.',
    faqTitle: '자주 묻는 질문',
    faq: [
      ['정말 무료인가요?', '네. 이메일 가입만 하면 모든 콘텐츠를 무료로 이용하실 수 있습니다. 가입 없이도 3일간 자유 체험이 가능합니다.'],
      ['가입할 때 어떤 정보가 필요한가요?', '이메일과 비밀번호만 필요합니다. 이름·주소·전화번호 등 다른 개인정보는 요구하지 않습니다.'],
    ],
  },
  en: {
    home: 'Home',
    langKo: 'Korean',
    langEn: 'English',
    navCta: 'Sign Up by Email',
    close: 'Close',
    kicker: '',
    title1: 'Daily with Odungi',
    title2: 'Music · Comics · Philosophy · Poem',
    lead: 'All content is free. Enjoy music, images, and comics — no signup required for the first 3 days.',
    cta: 'Sign Up by Email',
    freeNote: 'All content free',
    payNote: 'Sign up with email only',
    afterJuly: '',
    remaining: 'Open Beta',
    stepTitle: 'How It Works',
    steps: [
      ['01', '3-Day Free Trial', 'Enjoy music, images, and comics without signing up.'],
      ['02', 'Day 4: Email Sign-Up', 'Just email + password — keep all content free. No name, address, or phone number required.'],
    ],
    plansKicker: 'Premium Subscription (from July)',
    plansTitle: 'Subscribe via Google Play',
    planMonthlyName: 'Monthly',
    planMonthlyPrice: '₩4,900 / mo',
    planMonthlyDesc: 'Daily new music · 4-panel comics · picks · philosophy',
    planAnnualName: 'Annual',
    planAnnualBadge: '17% off',
    planAnnualPrice: '₩49,000 / yr',
    planAnnualDesc: 'All monthly perks + 4 quarterly cards per year (optional)',
    planAnnualKrBonus: '🇰🇷 Korea members: artbook included on subscription start (optional)',
    plansCTA: 'Subscribe on Google Play',
    plansPolicyNote: 'Payment via Google Play. Auto-renew, cancel anytime. Free during 7-day trial — no charge if cancelled.',
    goodsKicker: 'Annual Subscriber Gift (optional)',
    goodsTitle: 'A card every quarter',
    goodsLead: 'Annual subscribers can opt-in for a randomly selected seasonal card each quarter.',
    goodsSchedule: 'Schedule: at signup / 3mo / 6mo / 9mo',
    goodsKrBonus: '🇰🇷 Korea annual subscribers: artbook (14 pages) + 1st card sent together at signup',
    goodsPrivacyNote: 'Gifts are sent only to opt-in subscribers. Address and name are collected only at opt-in — choose digital-only to skip personal info entirely.',
    bookTitle: 'Images as visuals, text typed clearly',
    bookText: '',
    castTitle: 'Five Odungi Friends',
    cast: [
      ['Yulmu', 'Papillon dog'],
      ['Baechu', 'Cocker Spaniel dog'],
      ['Sangchu', 'Old English Sheepdog'],
      ['Kimchi', 'Scottish Fold cat'],
      ['Kkami', 'Tuxedo cat'],
    ],
    formTitle: 'Free Sign-Up',
    formText: 'Just email + password. Email is used for account notices only. No name, address, or phone number required.',
    email: 'Email',
    password: 'Password',
    passwordHint: 'At least 6 characters',
    consent: 'I agree to the terms and processing of email/password required for account creation.',
    submit: 'Sign Up With Email + Password',
    submitting: 'Signing up...',
    successTitle: 'Welcome!',
    successText: 'Enjoy all content free with your email sign-up.',
    successCta: 'Go Home',
    successClose: 'Close',
    duplicate: 'This email is already registered. Please log in with the existing account.',
    invalidEmail: 'Please enter a valid email address.',
    weakPassword: 'Password must be at least 6 characters.',
    missing: 'Please enter your email and password.',
    consentMissing: 'Consent is required.',
    fail: 'Sign-up failed.',
    faqTitle: 'FAQ',
    faq: [
      ['Is it really free?', 'Yes. Just sign up with your email to enjoy all content free. The first 3 days need no signup at all.'],
      ['What info do you need to sign up?', 'Only your email and password. No name, address, or phone number required.'],
    ],
  },
};

const CHAR_IMAGES = [
  'assets/char_yulmu.png',
  'assets/char_baechu.png',
  'assets/char_sangchu.png',
  'assets/char_kimchi.png',
  'assets/char_kkami.png',
];

const SIGNUP_COMPLETED_KEY = 'odungiSignupCompletedAt';
const SIGNUP_PROMPT_DISMISS_KEY = 'odungiSignupPromptDismissedAt';
const ARTBOOK_EVENT_DISMISS_KEY = 'odungiArtbookEventDismissedDate';

function getInitialEmail() {
  try {
    const params = new URLSearchParams(window.location.search);
    return params.get('email') || localStorage.getItem('odungiSignupEmailPrefill') || '';
  } catch {
    return '';
  }
}

function getKstDate() {
  return new Date().toLocaleDateString('en-CA', { timeZone: 'Asia/Seoul' });
}

function App() {
  const [lang, setLang] = useState('ko');
  const [form, setForm] = useState({ email: getInitialEmail(), password: '', consent: false });
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState(null);
  const [signedUp, setSignedUp] = useState(() => !!localStorage.getItem('odungiUserId'));
  const [successOpen, setSuccessOpen] = useState(false);
  const c = COPY[lang];

  const updateForm = (key, value) => {
    setForm(prev => ({ ...prev, [key]: value }));
    setMessage(null);
  };

  const scrollToSignup = () => {
    document.getElementById('signup')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
  };

  const closeToHomeForToday = () => {
    localStorage.setItem(ARTBOOK_EVENT_DISMISS_KEY, getKstDate());
    // 가입창은 새창으로 열림 — 닫기는 그 창만 닫고 홈피를 다시 띄우지 않는다.
    window.close();
    // 새창이 아니어서 close가 막히면 뒤로가기(홈 재오픈 방지)
    setTimeout(() => { try { history.back(); } catch (e) {} }, 100);
  };

  const submit = async (e) => {
    e.preventDefault();
    const email = form.email.trim();
    const password = form.password;
    if (!email || !password) return setMessage({ type: 'error', text: c.missing });
    if (password.length < 6) return setMessage({ type: 'error', text: c.weakPassword });
    if (!form.consent) return setMessage({ type: 'error', text: c.consentMissing });

    setBusy(true);
    setMessage(null);
    try {
      const res = await fetch('/api/d1', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'signup', email, password }),
      });
      const data = await res.json();
      if (!data.ok) {
        if (data.error === 'EMAIL_EXISTS') setMessage({ type: 'error', text: c.duplicate });
        else if (data.error === 'INVALID_EMAIL') setMessage({ type: 'error', text: c.invalidEmail });
        else if (data.error === 'WEAK_PASSWORD') setMessage({ type: 'error', text: c.weakPassword });
        else setMessage({ type: 'error', text: c.fail });
        return;
      }
      localStorage.setItem('odungiUserId', data.user.id);
      localStorage.setItem('odungiUserEmail', data.user.email);
      localStorage.setItem(SIGNUP_COMPLETED_KEY, String(Date.now()));
      localStorage.setItem(SIGNUP_PROMPT_DISMISS_KEY, String(Date.now()));
      localStorage.setItem(ARTBOOK_EVENT_DISMISS_KEY, getKstDate());
      localStorage.removeItem('odungiSignupEmailPrefill');
      setForm({ email: '', password: '', consent: false });
      setMessage(null);
      setSignedUp(true);
      setSuccessOpen(true);
    } catch (err) {
      setMessage({ type: 'error', text: `${c.fail} ${err.message || ''}`.trim() });
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="event-page">
      {successOpen && (
        <div className="event-success-modal" role="dialog" aria-modal="true" aria-labelledby="eventSignupSuccessTitle">
          <div className="event-success-card">
            <button className="event-success-close" type="button" onClick={() => setSuccessOpen(false)} aria-label={c.successClose}>×</button>
            <div className="event-success-emoji">🎉</div>
            <h2 id="eventSignupSuccessTitle">{c.successTitle}</h2>
            <p>{c.successText}</p>
            <button className="submit-btn" type="button" onClick={closeToHomeForToday}>{c.successCta}</button>
          </div>
        </div>
      )}
      <nav className="top-nav">
        <a className="brand" href="/">
          <span className="brand-mark">O</span>
          <span>
            <strong>ODUNGI</strong>
            <small>ART BOOK EVENT</small>
          </span>
        </a>
        <div className="nav-actions" style={{justifyContent:'center',flex:1}}>
          <div className="lang-toggle" aria-label="language" style={{margin:'0 auto'}}>
            <button className={lang === 'ko' ? 'active' : ''} onClick={() => setLang('ko')}>{c.langKo}</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>{c.langEn}</button>
          </div>
        </div>
      </nav>

      <main>
        <section className="hero">
          <div className="hero-copy">
            {c.kicker && <div className="kicker">{c.kicker}</div>}
            <h1>
              <span>{c.title1}</span>
              <strong>{c.title2}</strong>
            </h1>
            <p>{c.lead}</p>
            <div className="hero-actions">
              <button className="primary-btn" onClick={scrollToSignup}>{c.cta}</button>
            </div>
            <div className="note-row">
              <span>{c.freeNote}</span>
              <span>{c.payNote}</span>
            </div>
          </div>
        </section>

        <section className="section steps-section">
          <div className="section-head">
            <h2>{c.stepTitle}</h2>
          </div>
          <div className="steps">
            {c.steps.map(([num, title, body]) => (
              <article className="step-card" key={num}>
                <span>{num}</span>
                <h3>{title}</h3>
                <p>{body}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="section cast-section">
          <div className="section-head">
            <h2>{c.castTitle}</h2>
          </div>
          <div className="cast-grid">
            {c.cast.map(([name, desc], idx) => (
              <article className="cast-card" key={name}>
                <img src={CHAR_IMAGES[idx]} alt={name} />
                <h3>{name}</h3>
                <p>{desc}</p>
              </article>
            ))}
          </div>
        </section>

        <section className="section signup-section" id="signup">
          <div className="signup-copy">
            {c.kicker && <div className="kicker">{c.kicker}</div>}
            <h2>{c.formTitle}</h2>
            <p>{c.formText}</p>
          </div>
          {signedUp ? (
            <div className="signup-form signup-complete-card">
              <div className="event-success-emoji">🎉</div>
              <h3>{c.successTitle}</h3>
              <p>{c.successText}</p>
              <button className="submit-btn" type="button" onClick={closeToHomeForToday}>{c.successCta}</button>
            </div>
          ) : (
            <form className="signup-form" onSubmit={submit}>
              <label>
                <span>{c.email}</span>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => updateForm('email', e.target.value)}
                  placeholder="you@email.com"
                  autoComplete="email"
                />
              </label>
              <label>
                <span>{c.password}</span>
                <input
                  type="password"
                  value={form.password}
                  onChange={(e) => updateForm('password', e.target.value)}
                  placeholder={c.passwordHint}
                  autoComplete="new-password"
                />
              </label>
              <label className="consent-line">
                <input
                  type="checkbox"
                  checked={form.consent}
                  onChange={(e) => updateForm('consent', e.target.checked)}
                />
                <span>{c.consent}</span>
              </label>
              {message && <div className={`form-message ${message.type}`}>{message.text}</div>}
              <button className="submit-btn" type="submit" disabled={busy}>
                {busy ? c.submitting : c.submit}
              </button>
            </form>
          )}
        </section>

        <section className="section faq-section">
          <div className="section-head">
            <h2>{c.faqTitle}</h2>
          </div>
          <div className="faq-list">
            {c.faq.map(([q, a]) => (
              <article className="faq-card" key={q}>
                <h3>{q}</h3>
                <p>{a}</p>
              </article>
            ))}
          </div>
        </section>
      </main>

      <footer className="footer">
        © 2026 ODUNGI ART BOOK EVENT
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);