// src/pages-form.jsx — Request form + Success screen

const REQUEST_TYPES = [
  { value: "", label: "— Выберите тип запроса —" },
  { value: "purchase", label: "Закупка товара" },
  { value: "supplier", label: "Подбор поставщика" },
  { value: "logistics", label: "Логистика" },
  { value: "import-export", label: "Импорт / экспорт" },
  { value: "consulting", label: "Консультация" },
  { value: "other", label: "Другое" },
];

const COUNTRIES = [
  "Беларусь", "Россия", "Казахстан", "Армения", "Кыргызстан",
  "Узбекистан", "Азербайджан", "Молдова", "Таджикистан", "Грузия", "Другая",
];

function RequestPage({ navigate }) {
  const [step, setStep] = useState("form"); // form | submitting | success
  const [requestId, setRequestId] = useState(null);
  const [form, setForm] = useState({
    name: "", company: "", email: "", phone: "",
    country: "", reqType: "", message: "", consent: false,
  });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  function set(k, v) { setForm((f) => ({ ...f, [k]: v })); }

  function validate(data) {
    const e = {};
    if (!data.name.trim()) e.name = "Укажите имя";
    if (!data.company.trim()) e.company = "Укажите компанию";
    if (!data.email.trim() && !data.phone.trim()) {
      e.email = "Нужен email или Telegram/телефон";
      e.phone = "Нужен email или Telegram/телефон";
    } else if (data.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email.trim())) {
      e.email = "Проверьте формат email";
    }
    if (!data.country) e.country = "Выберите страну";
    if (!data.reqType) e.reqType = "Выберите тип запроса";
    if (!data.message.trim()) e.message = "Опишите задачу";
    else if (data.message.trim().length < 20) e.message = "Слишком коротко — нужно хотя бы 20 символов";
    if (!data.consent) e.consent = "Нужно согласие на обработку данных";
    return e;
  }

  function onSubmit(ev) {
    ev.preventDefault();
    const e = validate(form);
    setErrors(e);
    setTouched({ name: true, company: true, email: true, phone: true, country: true, reqType: true, message: true, consent: true });
    if (Object.keys(e).length > 0) {
      return;
    }
    setStep("submitting");
    setTimeout(() => {
      const id = generateRequestId();
      setRequestId(id);
      setStep("success");
      window.scrollTo({ top: 0, behavior: "smooth" });
    }, 1400);
  }

  if (step === "success") {
    return <RequestSuccess requestId={requestId} form={form} navigate={navigate} reset={() => {
      setForm({ name: "", company: "", email: "", phone: "", country: "", reqType: "", message: "", consent: false });
      setErrors({}); setTouched({}); setStep("form"); setRequestId(null);
    }} />;
  }

  const f = form;
  const show = (k) => touched[k] && errors[k];

  return (
    <div className="page-enter" data-screen-label="Request form">
      <PageHeader
        num="/05"
        tag="Форма заявки"
        title="Опишите задачу — соберём первичную оценку."
        lead="Заполнение займёт 2–3 минуты. После отправки получите номер заявки и автоматическое подтверждение на email. Менеджер вернётся в течение 4 рабочих часов."
        breadcrumb={<span><a href="./" onClick={(ev) => { ev.preventDefault(); navigate("home"); }} style={{cursor:"pointer"}}>Главная</a> &nbsp;/&nbsp; Форма заявки</span>}
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 64 }} className="form-grid">
            <aside style={{ position: "sticky", top: 100, alignSelf: "start" }} className="form-aside">
              <div className="card" style={{ padding: 28, marginBottom: 16 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 14 }}>Что вам понадобится</div>
                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                  {["Имя и компания", "Email или Telegram", "Описание задачи (1–2 абзаца)"].map((line, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14 }}>
                      <span style={{ color: "var(--accent)", marginTop: 2 }}>●</span>
                      <span>{line}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="card" style={{ padding: 28 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 14 }}>Что будет дальше</div>
                <ol style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                  {[
                    "Присвоим номер заявки REQ-2026-XXXX.",
                    "Отправим подтверждение на email.",
                    "В течение 4 рабочих часов ответим уточнениями.",
                  ].map((line, i) => (
                    <li key={i} style={{ display: "flex", gap: 12, fontSize: 14, lineHeight: 1.5 }}>
                      <span className="mono" style={{ color: "var(--accent)", fontSize: 11, paddingTop: 4 }}>0{i + 1}</span>
                      <span>{line}</span>
                    </li>
                  ))}
                </ol>
              </div>
              <div style={{ marginTop: 16, padding: "14px 16px", background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 4, fontSize: 12, lineHeight: 1.5, color: "var(--text-dim)" }}>
                Отправка формы не раскрывает деталей сделки. Конкретику обсуждаем после первого ответа, при необходимости — под NDA.
              </div>
            </aside>

            <form onSubmit={onSubmit} className="request-form" noValidate>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="form-row">
                <Field label="Имя" required error={show("name") && errors.name}>
                  <input className="field__input" value={f.name}
                    onChange={(e) => set("name", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, name: true }))}
                    placeholder="Александр Иванов" />
                </Field>
                <Field label="Компания" required error={show("company") && errors.company}>
                  <input className="field__input" value={f.company}
                    onChange={(e) => set("company", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, company: true }))}
                    placeholder={'ООО «Пример»'} />
                </Field>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="form-row">
                <Field label="Email" error={show("email") && errors.email} hint="Email или Telegram — нужен хотя бы один контакт">
                  <input type="email" className="field__input" value={f.email}
                    onChange={(e) => set("email", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, email: true }))}
                    placeholder="you@company.com" />
                </Field>
                <Field label="Телефон / Telegram" error={show("phone") && errors.phone}>
                  <input className="field__input" value={f.phone}
                    onChange={(e) => set("phone", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, phone: true }))}
                    placeholder="@username или +375..." />
                </Field>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="form-row">
                <Field label="Страна клиента" required error={show("country") && errors.country}>
                  <select className="field__select" value={f.country}
                    onChange={(e) => set("country", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, country: true }))}>
                    <option value="">— Выберите страну —</option>
                    {COUNTRIES.map((c) => <option key={c} value={c}>{c}</option>)}
                  </select>
                </Field>
                <Field label="Тип запроса" required error={show("reqType") && errors.reqType}>
                  <select className="field__select" value={f.reqType}
                    onChange={(e) => set("reqType", e.target.value)}
                    onBlur={() => setTouched((t) => ({ ...t, reqType: true }))}>
                    {REQUEST_TYPES.map((r) => <option key={r.value} value={r.value}>{r.label}</option>)}
                  </select>
                </Field>
              </div>

              <Field label="Описание задачи" required error={show("message") && errors.message}
                     hint="Что нужно привезти / какую задачу решить. Можно без чувствительных деталей — уточним под NDA.">
                <textarea className="field__textarea" value={f.message}
                  onChange={(e) => set("message", e.target.value)}
                  onBlur={() => setTouched((t) => ({ ...t, message: true }))}
                  placeholder="Например: нужно найти поставщика промышленного оборудования в ЕС и организовать доставку в Минск. Объём — 1 контейнер, срок — 6–8 недель." />
              </Field>

              <div style={{ marginTop: 8, padding: "20px 22px", background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 4 }}>
                <label className="checkbox">
                  <input type="checkbox" checked={f.consent}
                    onChange={(e) => set("consent", e.target.checked)} />
                  <span>
                    Я ознакомлен(а) с{" "}
                    <a onClick={(e) => { e.preventDefault(); navigate("privacy"); }} style={{cursor:"pointer"}}>Политикой конфиденциальности</a>
                    {" "}и даю{" "}
                    <a onClick={(e) => { e.preventDefault(); navigate("consent"); }} style={{cursor:"pointer"}}>согласие на обработку персональных данных</a>.
                  </span>
                </label>
                {show("consent") && errors.consent && (
                  <div className="field__error" style={{ marginTop: 10, marginLeft: 30 }}>{errors.consent}</div>
                )}
              </div>

              <div style={{ marginTop: 32, display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
                <Button type="submit" size="lg" disabled={step === "submitting"}>
                  {step === "submitting" ? (
                    <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
                      <span style={{
                        width: 14, height: 14, borderRadius: "50%",
                        border: "2px solid rgba(255,255,255,0.3)",
                        borderTopColor: "#fff",
                        animation: "spin 0.8s linear infinite",
                        display: "inline-block",
                      }} />
                      Отправляем...
                    </span>
                  ) : (
                    <>Отправить заявку <ArrowIcon /></>
                  )}
                </Button>
                <span className="t-caption" style={{ textTransform: "none", letterSpacing: 0 }}>
                  <span style={{ color: "var(--success)" }}>●</span> Защита от спама включена · отправка зашифрована (HTTPS)
                </span>
              </div>

              <style>{`
                @media (max-width: 720px) {
                  .form-row { grid-template-columns: 1fr !important; }
                  .form-grid { grid-template-columns: 1fr !important; }
                  .form-aside { position: static !important; }
                }
              `}</style>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}

function Field({ label, required, error, hint, children }) {
  return (
    <div className={"field" + (error ? " field--error" : "")}>
      <label className="field__label">
        <span>{label}{required && <span className="req"> *</span>}</span>
      </label>
      {children}
      {error
        ? <div className="field__error">{error}</div>
        : hint && <div className="field__hint">{hint}</div>}
    </div>
  );
}

function RequestSuccess({ requestId, form, navigate, reset }) {
  const time = new Date();
  const timeFmt = time.toLocaleString("ru-RU", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });

  return (
    <div className="page-enter" data-screen-label="Request success">
      <section className="section section--first" style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="wrap">
          <span className="tag" style={{ marginBottom: 32, display: "inline-flex" }}>
            <span style={{ color: "var(--accent)" }}>✓</span> Заявка отправлена
          </span>
          <h1 className="t-h1" style={{ marginBottom: 24, maxWidth: 960 }}>
            Готово. Заявка зарегистрирована под номером{" "}
            <span className="mono accent" style={{ fontSize: "0.85em", letterSpacing: "-0.02em" }}>{requestId}</span>.
          </h1>
          <p className="t-lead" style={{ maxWidth: 720 }}>
            В течение 4 рабочих часов ответим уточнениями или первичной оценкой. Копия заявки отправлена на ваш email.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 32 }} className="success-grid">
            {/* Mock email/telegram notification preview */}
            <div>
              <div className="t-caption" style={{ marginBottom: 14 }}>Уведомление о заявке</div>
              <div style={{
                background: "var(--bg-1)",
                border: "1px solid var(--line)",
                borderRadius: 6,
                overflow: "hidden",
              }}>
                <div style={{
                  padding: "16px 24px",
                  borderBottom: "1px solid var(--line)",
                  background: "var(--bg-2)",
                  display: "flex",
                  alignItems: "center",
                  gap: 14,
                }}>
                  <span style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: "var(--accent)",
                    color: "var(--accent-fg)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 12, fontWeight: 700, letterSpacing: "0.02em",
                  }}>AG</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>ACCORD GROUP · Bot</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>Telegram · сейчас</div>
                  </div>
                  <span className="mono" style={{ fontSize: 11, color: "var(--text-dim)" }}>NEW</span>
                </div>
                <div style={{ padding: "24px 28px", fontSize: 14, lineHeight: 1.6 }}>
                  <div style={{ marginBottom: 16, fontFamily: "var(--font-ui), ui-sans-serif, sans-serif", fontSize: 13 }}>
                    <span style={{ color: "var(--accent)" }}>▸ Новая заявка</span>
                  </div>
                  <Row label="Номер" value={requestId} mono />
                  <Row label="Дата" value={timeFmt} mono />
                  <Row label="Имя" value={form.name} />
                  <Row label="Компания" value={form.company} />
                  <Row label="Email" value={form.email || "—"} />
                  <Row label="Контакт" value={form.phone || "—"} />
                  <Row label="Страна" value={form.country} />
                  <Row label="Тип" value={REQUEST_TYPES.find((r) => r.value === form.reqType)?.label || ""} />
                  <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line)" }}>
                    <div className="t-caption" style={{ marginBottom: 8 }}>Комментарий</div>
                    <div style={{ fontSize: 13, color: "var(--text-mid)" }}>{form.message}</div>
                  </div>
                </div>
              </div>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div className="card" style={{ padding: 28 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 14 }}>Что произошло</div>
                {[
                  ["✓", "Заявка зарегистрирована", "Присвоен номер " + requestId],
                  ["✓", "Уведомление в Telegram", "Дежурный менеджер получил оповещение"],
                  ["✓", "Копия на email компании", "С пометкой \"новая заявка\""],
                  ["✓", "Автоответ клиенту", form.email ? "Отправлен на " + form.email : "Контакт не указан"],
                ].map((row, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12, padding: "12px 0", borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
                    <span style={{ color: "var(--success)", fontSize: 14 }}>{row[0]}</span>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{row[1]}</div>
                      <div style={{ fontSize: 12, color: "var(--text-dim)", marginTop: 2 }}>{row[2]}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button onClick={() => navigate("home")}>На главную <ArrowIcon /></Button>
                <Button variant="ghost" onClick={reset}>Отправить ещё одну</Button>
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 920px) {
              .success-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
}

function Row({ label, value, mono }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 12, padding: "6px 0" }}>
      <span className="t-caption" style={{ paddingTop: 2 }}>{label}</span>
      <span className={mono ? "mono" : ""} style={{ fontSize: 14 }}>{value}</span>
    </div>
  );
}

Object.assign(window, { RequestPage, RequestSuccess, Field, REQUEST_TYPES, COUNTRIES });