/* global React, Icon, ASSET, CONTACT_CONFIG */
const { useState: useS, useRef, useEffect } = React;

const COOLDOWN_KEY = "contact_last_sent";

function getContactEmail() {
  return CONTACT_CONFIG.email;
}

function getContactMailto() {
  return `mailto:${getContactEmail()}`;
}

function getCooldownLeft() {
  try {
    const last = Number(localStorage.getItem(COOLDOWN_KEY) || 0);
    const remaining = CONTACT_CONFIG.cooldownMs - (Date.now() - last);
    return remaining > 0 ? Math.ceil(remaining / 1000) : 0;
  } catch (err) {
    return 0;
  }
}

function markContactSent() {
  try {
    localStorage.setItem(COOLDOWN_KEY, String(Date.now()));
  } catch (err) {
    // localStorage can be unavailable in strict privacy modes; sending should still succeed.
  }
}

async function sendContactForm(formData) {
  const endpoint = encodeURIComponent(CONTACT_CONFIG.formsubmitEndpoint);
  const res = await fetch(`https://formsubmit.co/ajax/${endpoint}`, {
    method: "POST",
    headers: { Accept: "application/json" },
    body: formData,
  });

  if (!res.ok) {
    throw new Error(`Contact form submission failed: ${res.status}`);
  }

  return res.json();
}

function validateContactForm(formData, lang) {
  const name = String(formData.get("name") || "").trim();
  const email = String(formData.get("email") || "").trim();
  const type = String(formData.get("type") || "").trim();

  if (!name) return lang === "jp" ? "名前を入力してください。" : "Name is required.";
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return lang === "jp" ? "正しいメールアドレスを入力してください。" : "Please enter a valid email.";
  }
  if (!type) return lang === "jp" ? "お問い合わせ種別を選択してください。" : "Please select an inquiry type.";

  return "";
}

// ============== CONTACT ==============
function Contact({ lang }) {
  const [type, setType] = useS("");
  const [sending, setSending] = useS(false);
  const [done, setDone] = useS(false);
  const [error, setError] = useS("");
  const [cooldownLeft, setCooldownLeft] = useS(0);
  const [messageLength, setMessageLength] = useS(0);
  const mountedAtRef = useRef(Date.now());
  const types = lang === "jp"
    ? ["SaaS / Webアプリ開発","社内ツール開発","広告運用自動化 / AdTech","データダッシュボード / データ基盤","PdM / テクニカルアドバイザー","その他"]
    : ["SaaS / Web App","Internal Tools","Ad Ops Automation / AdTech","Data Dashboards / Platform","PdM / Tech Advisor","Other"];

  useEffect(() => {
    if (cooldownLeft <= 0) return undefined;

    const timer = window.setTimeout(() => {
      setCooldownLeft((left) => Math.max(left - 1, 0));
    }, 1000);

    return () => window.clearTimeout(timer);
  }, [cooldownLeft]);

  async function handleSubmit(e) {
    e.preventDefault();
    if (sending) return;

    const formEl = e.currentTarget;
    const formData = new FormData(formEl);
    const left = getCooldownLeft();

    if (left > 0) {
      setCooldownLeft(left);
      setError(
        lang === "jp"
          ? `連続送信を防ぐため ${left} 秒お待ちください。`
          : `Please wait ${left}s before sending again.`
      );
      return;
    }

    if (Date.now() - mountedAtRef.current < CONTACT_CONFIG.minFillTimeMs) {
      setError(lang === "jp" ? "送信エラー。再度お試しください。" : "Submission error. Please try again.");
      return;
    }

    const validationError = validateContactForm(formData, lang);
    if (validationError) {
      setError(validationError);
      return;
    }

    setSending(true);
    setError("");
    setCooldownLeft(0);

    try {
      await sendContactForm(formData);
      markContactSent();
      setDone(true);
      setType("");
      setMessageLength(0);
      formEl.reset();
    } catch (err) {
      console.error("Contact form error:", err);
      setError(
        lang === "jp"
          ? "送信に失敗しました。時間を置いて再度お試しいただくか、メールで直接ご連絡ください。"
          : "Failed to send. Please try again later or email directly."
      );
    } finally {
      setSending(false);
    }
  }

  return (
    <section id="contact" data-screen-label="08 Contact">
      <div className="container">
        <div className="contact-head">
          <h2 className="h-section">
            <small>CONTACT</small>
            {lang === "jp" ? "お問い合わせ" : "Get in touch"}
          </h2>
          <p className="lead" style={{ marginTop: 16 }}>
            {lang === "jp" ? "プロジェクトのご相談、業務委託のご依頼、パートナーシップのご提案など、お気軽にお問い合わせください。内容を確認のうえ、迅速にご返信いたします。" : "Project inquiries, freelance engagements, partnerships — reach out anytime. I'll get back to you quickly."}
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-left">
            <div className="contact-photo"><img className="visual-img" src={ASSET("visual_assets/contact_workspace_photo.webp")} alt="Workspace desk" /></div>
            <div className="contact-info">
              <h3>{lang === "jp" ? "直接のご連絡先" : "Direct contact"}</h3>
              <div className="sub">{lang === "jp" ? "まずはメールでお気軽にご連絡ください。" : "Email is the fastest way to reach me."}</div>

              <div className="row">
                <div className="ico">{Icon.mail(18)}</div>
                <div>
                  <div className="lbl">{lang === "jp" ? "メールアドレス" : "Email"}</div>
                  <div className="val"><a href={getContactMailto()} style={{ color: "var(--ink)" }}>{getContactEmail()}</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">{Icon.github(18)}</div>
                <div>
                  <div className="lbl">GitHub</div>
                  <div className="val"><a href="https://github.com/kenya6565" target="_blank" rel="noreferrer" style={{ color: "var(--ink)" }}>github.com/kenya6565</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">{Icon.linkedin(18)}</div>
                <div>
                  <div className="lbl">LinkedIn</div>
                  <div className="val"><a href="https://www.linkedin.com/in/kenya-fujisaki-93a4ba185/" target="_blank" rel="noreferrer" style={{ color: "var(--ink)" }}>linkedin.com/in/kenya-fujisaki</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico" style={{ color: "#21BDDB" }}>{Icon.wantedly(18)}</div>
                <div>
                  <div className="lbl">Wantedly</div>
                  <div className="val"><a href="https://www.wantedly.com/id/kenya_fujisaki" target="_blank" rel="noreferrer" style={{ color: "var(--ink)" }}>wantedly.com/id/kenya_fujisaki</a></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">{Icon.clock(18)}</div>
                <div>
                  <div className="lbl">{lang === "jp" ? "返信の目安" : "Response time"}</div>
                  <div className="val">{lang === "jp" ? "通常、24時間以内にご返信いたします。" : "Typically within 24 hours."}<small>{lang === "jp" ? "※内容によりお時間をいただく場合がございます。" : "Some inquiries may take longer."}</small></div>
                </div>
              </div>
              <div className="row">
                <div className="ico">{Icon.users(18)}</div>
                <div style={{ flex: 1 }}>
                  <div className="lbl">{lang === "jp" ? "ご相談いただきたい内容（例）" : "What to discuss (examples)"}</div>
                  <ul>
                    {(lang === "jp" ? ["新規プロダクトの開発相談 / 要件整理","既存プロダクトの改善・機能追加","社内業務の自動化・効率化","データ基盤・ダッシュボードの構築","技術顧問・テクニカルアドバイザーのご相談"] : ["New product builds & discovery","Enhancing or evolving existing products","Workflow automation","Data platforms & dashboards","Technical advisory engagements"]).map((t, i) => <li key={i}>{t}</li>)}
                  </ul>
                </div>
              </div>
              <div className="contact-note">
                <span style={{ color: "var(--navy)" }}>{Icon.lock(14)}</span>
                <span>{lang === "jp" ? "送信内容はメール配送サービス Formsubmit.co を経由して暗号化送信されます。本お問い合わせの目的以外には使用しません。" : "Submissions are routed via Formsubmit.co (encrypted) and used solely to respond to your inquiry."}</span>
              </div>
            </div>
          </div>

          {done ? (
            <div className="form contact-success" role="status" aria-live="polite">
              <div className="success-icon">{Icon.check(40)}</div>
              <h3>{lang === "jp" ? "送信しました！" : "Message sent!"}</h3>
              <p>{lang === "jp" ? `${CONTACT_CONFIG.responseTimeHours}時間以内にご返信いたします。` : `I'll reply within ${CONTACT_CONFIG.responseTimeHours} hours.`}</p>
              <button type="button" className="btn btn-primary" onClick={() => { setDone(false); mountedAtRef.current = Date.now(); }}>
                {lang === "jp" ? "別のお問い合わせ" : "Send another"}
              </button>
            </div>
          ) : (
            <form className="form" onSubmit={handleSubmit} noValidate>
              <h3>{lang === "jp" ? "無料案件相談フォーム" : "Free consultation form"}</h3>
              <div className="form-trust">
                <span>{Icon.shield(14)} {lang === "jp" ? "完全無料" : "100% Free"}</span>
                <span>{Icon.clock(14)} {lang === "jp" ? "1分で完了" : "1-min form"}</span>
                <span>{Icon.send(14)} {lang === "jp" ? "24時間以内に返信" : "Reply within 24h"}</span>
              </div>
              <input type="hidden" name="_subject" value={CONTACT_CONFIG.emailSubject} />
              <input type="hidden" name="_captcha" value="false" />
              <input type="hidden" name="_template" value="table" />
              <input
                type="text"
                name="_honey"
                tabIndex={-1}
                autoComplete="off"
                className="contact-honey"
                style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0, pointerEvents: "none" }}
                aria-hidden="true"
              />
              <div className="form-row">
                <div className="field">
                  <label>{lang === "jp" ? "名前" : "Name"} <span className="req">{lang === "jp" ? "必須" : "Required"}</span></label>
                  <input type="text" name="name" placeholder={lang === "jp" ? "例：藤崎 賢也" : "e.g. Taro Yamada"} required maxLength={100} autoComplete="name" />
                </div>
                <div className="field">
                  <label>{lang === "jp" ? "会社名" : "Company"}</label>
                  <input type="text" name="company" placeholder={lang === "jp" ? "例：株式会社〇〇" : "e.g. Acme, Inc."} maxLength={100} autoComplete="organization" />
                </div>
              </div>
              <div className="field" style={{ marginBottom: 18 }}>
                <label>{lang === "jp" ? "メールアドレス" : "Email"} <span className="req">{lang === "jp" ? "必須" : "Required"}</span></label>
                <input type="email" name="email" placeholder="example@your-domain.com" required maxLength={254} autoComplete="email" />
              </div>
              <div className="field" style={{ marginBottom: 18 }}>
                <label>{lang === "jp" ? "お問い合わせ種別" : "Inquiry type"} <span className="req">{lang === "jp" ? "必須" : "Required"}</span></label>
                <div className="radios">
                  {types.map((t, i) => (
                    <label className="radio" key={i}>
                      <input type="radio" name="type" value={t} checked={type === t} required onChange={() => setType(t)} />
                      {t}
                    </label>
                  ))}
                </div>
              </div>
              <div className="field" style={{ marginBottom: 8 }}>
                <label>{lang === "jp" ? "メッセージ" : "Message"}</label>
                <textarea
                  name="message"
                  placeholder={lang === "jp" ? "ご相談内容・ご要望などをご記入ください。" : "Tell me about your project or question."}
                  maxLength={1000}
                  onInput={(e) => setMessageLength(e.currentTarget.value.length)}
                ></textarea>
                <div style={{ textAlign: "right", fontSize: 11, color: "var(--muted)", marginTop: 6 }}>{messageLength} / 1000</div>
              </div>
              <div className="submit-row">
                <button type="submit" className="btn-submit" disabled={sending} aria-busy={sending}>
                  {sending ? (lang === "jp" ? "送信中..." : "Sending...") : <>{lang === "jp" ? "送信する" : "Send message"} {Icon.send(16)}</>}
                </button>
                {error && <div className="form-error" role="alert">{error}</div>}
                {cooldownLeft > 0 && <div className="form-cooldown" role="status" aria-live="polite">{lang === "jp" ? `残り ${cooldownLeft} 秒` : `${cooldownLeft}s remaining`}</div>}
                <div className="form-foot">{Icon.shield(14)}{lang === "jp" ? "送信内容は Formsubmit.co 経由で本お問い合わせへの返信目的にのみ使用します。" : "Submissions are routed via Formsubmit.co and used only to respond to your inquiry."}</div>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ============== FOOTER ==============
function Footer({ lang }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="foot-grid foot">
          <div className="foot-brand">
            <div className="name">Kenya Fujisaki</div>
            <p>{lang === "jp" ? "Product-minded Full-stack Engineer / PdM。SaaS・自動化・データ活用を中心に、事業の成長に伴走します。" : "Product-minded Full-stack Engineer / PdM. SaaS, automation, and data — partnering for growth."}</p>
          </div>
          <div>
            <h4>{lang === "jp" ? "セクション" : "Sections"}</h4>
            <ul>
              {(lang === "jp" ? ["プロジェクト","サービス","プロフィール","お問い合わせ"] : ["Projects","Services","Profile","Contact"]).map((t, i) => (
                <li key={i}><a href={`#${["projects","services","profile","contact"][i]}`}>{t}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{lang === "jp" ? "リンク" : "Elsewhere"}</h4>
            <ul>
              <li><a href="https://github.com/kenya6565" target="_blank" rel="noreferrer">GitHub</a></li>
              <li><a href="https://www.linkedin.com/in/kenya-fujisaki-93a4ba185/" target="_blank" rel="noreferrer">LinkedIn</a></li>
              <li><a href="https://www.wantedly.com/id/kenya_fujisaki" target="_blank" rel="noreferrer">Wantedly</a></li>
            </ul>
          </div>
          <div>
            <h4>{lang === "jp" ? "コンタクト" : "Contact"}</h4>
            <ul>
              <li><a href={getContactMailto()}>{getContactEmail()}</a></li>
              <li>{lang === "jp" ? "東京（リモート可）" : "Tokyo (Remote)"}</li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Kenya Fujisaki. All rights reserved.</div>
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;