/* Her Nail — Chat Consultation Widget */

const FAQS = [
  {
    id: "home-visit",
    question: "自宅に来てもらえますか？",
    answer: "はい、ご自宅への訪問が可能です。\n外出が難しい方や、慣れた場所でゆっくり受けたい方にもご利用いただきやすいサービスです。\nお母さま・お祖母さまのご状況に合わせてご相談ください。",
    initialText: "自宅への訪問について相談したいです。\n外出が少し難しいため、自宅で受けられるか確認したいです。",
  },
  {
    id: "other-venue",
    question: "家に来てもらいたくない場合、場所は選べますか？",
    answer: "はい、ご自宅以外の場所でもご相談いただけます。\nご自宅への訪問に抵抗がある場合は、お近くのレンタルスペースなどを利用して施術を受けることも可能です。\n別途スペース利用料などがかかる場合がありますので、場所やご希望に合わせてご案内します。",
    initialText: "自宅以外の場所で受けられるか相談したいです。\n近くのレンタルスペースなどを利用できる場合の流れや追加料金について知りたいです。",
  },
  {
    id: "relax-massage",
    question: "RELAXプランで、ネイルなし・ハンドマッサージ中心にできますか？",
    answer: "はい、可能です。\nネイルカラーなしで、ハンドケアやハンドマッサージを中心にした内容へカスタマイズできます。\n実際に「派手なネイルより、手元のケアを中心にしたい」というご要望も多くいただいています。\nご希望に合わせて内容や料金をご相談いただけます。",
    initialText: "RELAXプランについて相談したいです。\nネイルカラーなしで、ハンドケアやハンドマッサージ中心の内容を検討しています。",
  },
  {
    id: "who-comes",
    question: "どんな人が来てくれますか？",
    answer: "丁寧で明るく、コスメやネイルに詳しいネイリストがお伺いします。\nご高齢の方にも安心して受けていただけるよう、無理のないペースで、やさしくコミュニケーションを取りながら進めます。",
    initialText: "当日来てくださるネイリストについて相談したいです。\n高齢の家族でも安心して受けられるか、雰囲気や対応について確認したいです。",
  },
  {
    id: "design",
    question: "爪はどんなデザインになりますか？",
    answer: "事前にネイリストと相談しながら調整できます。\n派手なデザインだけでなく、自然で上品なカラーや、手元がきれいに見えるケア中心の仕上がりも可能です。\nお母さま・お祖母さまの好みや生活スタイルに合わせてご提案します。",
    initialText: "爪のデザインについて相談したいです。\n派手すぎない自然な仕上がりや、本人に合うデザインを事前に相談できるか確認したいです。",
  },
  {
    id: "aftercare",
    question: "ネイルオフなどのアフターケアはありますか？",
    answer: "はい、アフターケアやメンテナンスのご相談も可能です。\nプレゼントの翌月に再度ご依頼いただくなど、ネイルオフや手元のメンテナンスを含めたご依頼も承れます。リピート割引きもご提案可能です。継続的なケアをご希望の場合もお気軽にご相談ください。",
    initialText: "アフターケアについて相談したいです。\nネイルオフや翌月以降のメンテナンスも含めて依頼できるか知りたいです。",
  },
  {
    id: "area",
    question: "日本全国どこでも来てくれますか？",
    answer: "現在はテストマーケティング中のため、できる限り全国対応できるよう調整しています。\nエリアによって対応方法や日程の調整が必要になる場合がありますので、まずはお住まいの地域を添えてお問い合わせください。",
    initialText: "対応エリアについて相談したいです。\n希望の訪問場所が対応可能か確認したいです。",
  },
  {
    id: "premium-photo",
    question: "プレミアムプランの撮影では、母だけでなくプレゼントした私も入れますか？",
    answer: "はい、ご一緒に撮影いただくことも可能です。\nプレミアムプランでは、お母さま・お祖母さまのポートレート撮影を中心に行いますが、\n何カットか撮影する中で、ご家族と一緒のお写真も残していただけます。\n大切な記念として、ぜひご相談ください。",
    initialText: "プレミアムプランの撮影について相談したいです。\n母・祖母のポートレートだけでなく、プレゼントする家族も一緒に写真に入れるか確認したいです。",
  },
  {
    id: "family-together",
    question: "母と娘で、横に並んで一緒に受けることはできますか？",
    answer: "はい、可能です。お母さまと娘さま、またはお祖母さまとお孫さまなど、ご家族で一緒に受けていただくこともできます。母娘セット割として、通常それぞれで受けるよりもお得なセット料金をご案内できる場合があります。実際に、孫・母・祖母の3世代でのご相談もいただいています。",
    initialText: "家族で一緒に受けることについて相談したいです。\n母娘、祖母と孫、または3世代で一緒に受けられるか、セット料金も含めて知りたいです。",
  },
  {
    id: "other",
    question: "その他、予約前に少し相談したい",
    answer: "もちろんです。それが通常の流れとなっております。まだ具体的に決まっていない段階でも、予約前のご相談としてお気軽にお送りください。お母さま・お祖母さまのご状況や、ご希望に合わせてご案内します。",
    initialText: "予約前に少し相談したいです。\n詳しい状況をお伝えしたうえで、どのプランや内容が合いそうか相談できればと思っています。",
  },
];

function ChatConsultationWidget() {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState("faq"); // 'faq' | 'answer' | 'form' | 'done'
  const [selectedFaq, setSelectedFaq] = React.useState(null);
  const [form, setForm] = React.useState({ name: "", email: "", phone: "", content: "", website: "" });
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);
  const prevPathRef = React.useRef(null);

  const log = (event, data) => {
    console.log("[HerNail Chat]", event, data || "");
    // GA4 イベント送信（gtag が読み込まれていれば）
    if (typeof gtag === "function") {
      gtag("event", event, {
        event_category: "chat_consultation",
        ...( data || {} ),
      });
    }
  };

  const handleOpen = () => {
    setOpen(true);
    log("chat_open");
  };

  const handleClose = () => {
    setOpen(false);
    // URL を元のパスに戻す（/chat-thanks から離脱）
    if (prevPathRef.current !== null) {
      window.history.replaceState({}, "", prevPathRef.current);
      prevPathRef.current = null;
    }
  };

  const handleReset = () => {
    setStep("faq");
    setSelectedFaq(null);
    setForm({ name: "", email: "", phone: "", content: "", website: "" });
    setError(null);
    setSubmitting(false);
  };

  const handleFaqSelect = (faq) => {
    setSelectedFaq(faq);
    setStep("answer");
    log("faq_select", { id: faq.id, question: faq.question });
  };

  const handleOpenForm = () => {
    setForm(f => ({ ...f, content: selectedFaq ? selectedFaq.initialText : "" }));
    setStep("form");
    setError(null);
    log("consultation_form_open", { faqId: selectedFaq?.id });
  };

  const handleFormChange = (field, value) => {
    setForm(f => ({ ...f, [field]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.phone || !form.content) {
      setError("必須項目をすべて入力してください。");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch("/api/chat-consultation", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          honeypot: form.website,
          name: form.name,
          email: form.email,
          phone: form.phone,
          content: form.content,
          faqTitle: selectedFaq?.question || "",
          faqAnswer: selectedFaq?.answer || "",
          sourceUrl: window.location.href,
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || "送信に失敗しました。時間をおいて再度お試しください。");
        log("consultation_submit_error", { status: res.status, error: data.error });
        return;
      }
      setStep("done");
      log("consultation_submit_success", { faqId: selectedFaq?.id });
      // コンバージョン計測用 URL に変更
      prevPathRef.current = window.location.pathname + window.location.search;
      window.history.pushState({}, "", "/chat-thanks");
    } catch (err) {
      setError("ネットワークエラーが発生しました。時間をおいて再度お試しください。");
      log("consultation_submit_error", { error: err.message });
    } finally {
      setSubmitting(false);
    }
  };

  const answerLines = selectedFaq ? selectedFaq.answer.split("\n") : [];

  return (
    <React.Fragment>
      {/* Floating trigger button */}
      <button
        className="ccw-trigger"
        onClick={handleOpen}
        aria-label="予約前に相談する"
        title="予約前に相談する"
        style={{ display: open ? "none" : undefined }}
      >
        <span className="ccw-trigger-inner" aria-hidden="true">
          <svg viewBox="0 0 48 48" fill="none" width="28" height="28">
            <path d="M24 5C13.51 5 5 13.51 5 24c0 3.3.87 6.4 2.38 9.09L5 43l9.91-2.38C17.6 42.13 20.7 43 24 43c10.49 0 19-8.51 19-19S34.49 5 24 5z" fill="currentColor"/>
            <text x="24" y="31" textAnchor="middle" fill="white" fontSize="20" fontFamily="Georgia,serif" fontStyle="italic" fontWeight="400">?</text>
          </svg>
        </span>
      </button>

      {/* Chat panel */}
      {open && (
        <div className="ccw-panel" role="dialog" aria-modal="true" aria-label="Her Nail ギフト相談">
          {/* Header */}
          <div className="ccw-header">
            <div className="ccw-header-inner">
              <span className="ccw-header-en">Her Nail</span>
              <span className="ccw-header-title">ギフト相談</span>
            </div>
            <button className="ccw-close" onClick={handleClose} aria-label="閉じる">✕</button>
          </div>

          {/* Body */}
          <div className="ccw-body">

            {/* Step: FAQ list */}
            {step === "faq" && (
              <React.Fragment>
                <div className="ccw-bubble ccw-bubble--system">
                  お母さま・お祖母さまへの贈り物として、「うちの場合でも大丈夫かな？」というご相談を承ります。まずは近い内容を選んでください。
                </div>
                <div className="ccw-faq-list">
                  {FAQS.map(faq => (
                    <button
                      key={faq.id}
                      className="ccw-faq-btn"
                      onClick={() => handleFaqSelect(faq)}
                    >
                      {faq.question}
                    </button>
                  ))}
                </div>
              </React.Fragment>
            )}

            {/* Step: FAQ answer */}
            {step === "answer" && selectedFaq && (
              <React.Fragment>
                <div className="ccw-bubble ccw-bubble--user">
                  {selectedFaq.question}
                </div>
                <div className="ccw-bubble ccw-bubble--system">
                  {answerLines.map((line, i) => (
                    <React.Fragment key={i}>
                      {line}
                      {i < answerLines.length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </div>
                <div className="ccw-answer-actions">
                  <button className="ccw-cta-btn" onClick={handleOpenForm}>
                    この内容で相談する
                  </button>
                  <button className="ccw-back-btn" onClick={() => setStep("faq")}>
                    ← 他の質問を見る
                  </button>
                </div>
              </React.Fragment>
            )}

            {/* Step: Consultation form */}
            {step === "form" && (
              <React.Fragment>
                <div className="ccw-bubble ccw-bubble--system ccw-bubble--small">
                  相談内容を下書きしました。<br />
                  必要に応じて、状況に合わせて編集してください。
                </div>
                <form className="ccw-form" onSubmit={handleSubmit} noValidate>
                  {/* Honeypot */}
                  <input
                    type="text"
                    name="website"
                    value={form.website}
                    onChange={e => handleFormChange("website", e.target.value)}
                    tabIndex={-1}
                    autoComplete="off"
                    style={{ display: "none" }}
                    aria-hidden="true"
                  />

                  <div className="ccw-field">
                    <label className="ccw-label">お名前 <span className="ccw-req">必須</span></label>
                    <input
                      type="text"
                      className="ccw-input"
                      placeholder="山田 花子"
                      value={form.name}
                      onChange={e => handleFormChange("name", e.target.value)}
                      required
                    />
                  </div>

                  <div className="ccw-field">
                    <label className="ccw-label">メールアドレス <span className="ccw-req">必須</span></label>
                    <input
                      type="email"
                      className="ccw-input"
                      placeholder="example@email.com"
                      value={form.email}
                      onChange={e => handleFormChange("email", e.target.value)}
                      required
                    />
                  </div>

                  <div className="ccw-field">
                    <label className="ccw-label">電話番号 <span className="ccw-req">必須</span></label>
                    <input
                      type="tel"
                      className="ccw-input"
                      placeholder="090-1234-5678"
                      value={form.phone}
                      onChange={e => handleFormChange("phone", e.target.value)}
                      required
                    />
                  </div>

                  <div className="ccw-field">
                    <label className="ccw-label">相談内容 <span className="ccw-req">必須</span></label>
                    <textarea
                      className="ccw-textarea"
                      rows={5}
                      value={form.content}
                      onChange={e => handleFormChange("content", e.target.value)}
                      required
                    />
                  </div>

                  {error && (
                    <div className="ccw-error">{error}</div>
                  )}

                  <button
                    type="submit"
                    className="ccw-submit-btn"
                    disabled={submitting}
                  >
                    {submitting ? "送信中…" : "相談を送る"}
                  </button>

                  <button
                    type="button"
                    className="ccw-back-btn"
                    onClick={() => { setStep("answer"); setError(null); }}
                  >
                    ← 回答に戻る
                  </button>
                </form>
              </React.Fragment>
            )}

            {/* Step: Done */}
            {step === "done" && (
              <React.Fragment>
                <div className="ccw-bubble ccw-bubble--system ccw-bubble--done">
                  ご相談ありがとうございます。<br />
                  内容を確認のうえ、担当者よりご連絡いたします。<br /><br />
                  お母さま・お祖母さまにとって、<br />
                  やさしい時間になるようお手伝いできれば嬉しいです。
                </div>
                <div className="ccw-answer-actions">
                  <button className="ccw-back-btn" onClick={handleReset}>
                    もう一度相談する
                  </button>
                </div>
              </React.Fragment>
            )}

          </div>
        </div>
      )}
    </React.Fragment>
  );
}