/* Akasha — お客様の声 (testimonials) + interactive submission */
const { useState: tS, useEffect: tE } = React;

const VKEY = "akasha_voices_v1";
function loadVoices() { try { return JSON.parse(localStorage.getItem(VKEY)) || []; } catch (e) { return []; } }
function saveVoices(v) { try { localStorage.setItem(VKEY, JSON.stringify(v)); } catch (e) {} }

function Stars({ value, onChange }) {
  return (
    <div className="rating">
      {[1, 2, 3, 4, 5].map((n) => (
        <button type="button" key={n} className={n <= value ? "on" : ""} onClick={() => onChange(n)} aria-label={`${n}つ星`}>
          <Icon name="star" />
        </button>
      ))}
    </div>
  );
}

function VoiceForm({ onAdd, toast }) {
  const preset = ["ぐっすり眠れた", "身体が軽い", "冷えが和らいだ", "肩こり", "むくみ", "気持ちが前向きに"];
  const [f, setF] = tS({ who: "", meta: "", q: "", stars: 5, tags: [] });
  const [err, setErr] = tS({});
  const [done, setDone] = tS(false);
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const toggle = (t) => setF((c) => ({ ...c, tags: c.tags.includes(t) ? c.tags.filter((x) => x !== t) : [...c.tags, t] }));
  function submit(e) {
    e.preventDefault();
    const er = {};
    if (!f.who.trim()) er.who = "お名前・ニックネームをご入力ください";
    if (f.q.trim().length < 10) er.q = "10文字以上でご感想をお聞かせください";
    setErr(er);
    if (Object.keys(er).length) return;
    const v = {
      id: "u-" + Date.now(), init: (f.who.trim()[0] || "・").toUpperCase(),
      who: f.who.trim(), meta: f.meta.trim() || "お客様の声", q: f.q.trim(),
      tags: f.tags.length ? f.tags : ["ありがとうございます"], stars: f.stars, mine: true,
    };
    onAdd(v);
    setDone(true);
    toast && toast("感想を投稿しました。ありがとうございます");
  }
  if (done) return (
    <div className="thanks reveal">
      <Icon name="heart" />
      <h3>ありがとうございます</h3>
      <p>いただいた声は、下の一覧にすぐ反映されます。<br />あなたのめぐりの変化を、大切に受け取りました。</p>
      <div style={{ marginTop: 24 }}><Button variant="ghost" onClick={() => { setDone(false); setF({ who: "", meta: "", q: "", stars: 5, tags: [] }); }}>もう一度書く</Button></div>
    </div>
  );
  return (
    <form className="form reveal" onSubmit={submit}>
      <div className="form__row">
        <div className="field">
          <label>お名前・ニックネーム <span className="req">必須</span></label>
          <input className="inp" value={f.who} onChange={set("who")} placeholder="M様 / みほ など" />
          {err.who && <span className="err">{err.who}</span>}
        </div>
        <div className="field">
          <label>ひとこと（年代・コースなど・任意）</label>
          <input className="inp" value={f.meta} onChange={set("meta")} placeholder="50代・女性 / 全身血流改善コース" />
        </div>
      </div>
      <div className="field">
        <label>満足度</label>
        <Stars value={f.stars} onChange={(n) => setF({ ...f, stars: n })} />
      </div>
      <div className="field">
        <label>感じた変化・ご感想 <span className="req">必須</span></label>
        <textarea className="inp" value={f.q} onChange={set("q")} placeholder="施術のあとの身体の感じや、うれしかった変化をお聞かせください。" />
        {err.q && <span className="err">{err.q}</span>}
      </div>
      <div className="field">
        <label>変化のタグ（任意・複数選択できます）</label>
        <div className="vcard__tags" style={{ marginBottom: 0 }}>
          {preset.map((t) => (
            <button type="button" key={t} className="vtag" onClick={() => toggle(t)}
              style={{ cursor: "pointer", background: f.tags.includes(t) ? "var(--sage-700)" : "var(--sage-50)", color: f.tags.includes(t) ? "#fff" : "var(--sage-800)", borderColor: f.tags.includes(t) ? "var(--sage-700)" : "var(--sage-200)" }}>
              {t}
            </button>
          ))}
        </div>
      </div>
      <Button type="submit" variant="primary" icon="arrow-right" className="form__submit">感想を投稿する</Button>
    </form>
  );
}

function VoiceCardFull({ v }) {
  return (
    <article className="vcard reveal" style={v.mine ? { borderColor: "var(--sage-300)", background: "var(--sage-50)" } : null}>
      {v.stars && (
        <div style={{ display: "flex", gap: 2, marginBottom: 12, color: "var(--gold)" }}>
          {Array.from({ length: v.stars }).map((_, i) => <Icon key={i} name="star" className="fillstar" />)}
        </div>
      )}
      <p className="vcard__q">{v.q}</p>
      <div className="vcard__tags">{v.tags.map((t, i) => <span className="vtag" key={i}>{t}</span>)}</div>
      <div className="vcard__who">
        <div className="vcard__ava">{v.init}</div>
        <div className="vcard__meta"><div className="n">{v.who}{v.mine && <span style={{ color: "var(--sage-600)", fontSize: 11, marginLeft: 8 }}>投稿ありがとうございます</span>}</div><div className="m">{v.meta}</div></div>
      </div>
    </article>
  );
}

function Voices({ toast }) {
  const ref = useReveal();
  const [mine, setMine] = tS(loadVoices());
  function add(v) { const next = [v, ...mine]; setMine(next); saveVoices(next); }
  const all = VOICES;
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="お客様の声" eyebrow="Testimonials" title="巡りが整った、その先の声。"
        lead="施術のあと、お客様から実際にいただいた感想です（プライバシー保護のため匿名で掲載しています）。" />
      <section className="section voices-band">
        <div className="wrap">
          <div className="vgrid">
            {all.map((v, i) => <VoiceCardFull v={v} key={v.id || i} />)}
          </div>
        </div>
      </section>
      <section className="section cta">
        <div className="wrap">
          <p className="eyebrow">Begin the ritual</p>
          <h2>あなたの巡りも、<br />きっと変えられます。</h2>
          <p>まずは全身血流改善コースから。あなたのペースで、一緒に整えていきましょう。</p>
          <div className="cta__row"><Button variant="primary" iconLeft="message-circle" onClick={() => window.open("https://lin.ee/z82bm7A", "_blank", "noopener")}>公式LINEで予約する</Button></div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Voices });