/* Tazeyo! — Kariyer bileşenleri */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Icon (Lucide) ---------- */
function Icon({ name, size = 20, color = "currentColor", stroke = 2, style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      ref.current.appendChild(i);
      window.lucide.createIcons({ attrs: { width: size, height: size, stroke: color, "stroke-width": stroke } });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, flex: "0 0 auto", ...style }} />;
}

/* ---------- Value card ---------- */
function ValueCard({ v }) {
  return (
    <div className="value">
      <div className="value__ic"><Icon name={v.icon} size={26} stroke={2} /></div>
      <h3 className="value__t">{v.t}</h3>
      <p className="value__d">{v.d}</p>
    </div>
  );
}

/* ---------- Job card ---------- */
function JobCard({ job, onOpen }) {
  return (
    <div className="job" role="button" tabIndex={0}
      onClick={() => onOpen(job)}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onOpen(job); } }}>
      <div className="job__main">
        <span className="job__dept">{job.dept}</span>
        <h3 className="job__t">{job.title}</h3>
        <div className="job__meta">
          <span><Icon name="map-pin" size={16} color="var(--kiwi-600)" />{job.district}, {job.city}</span>
          <span><Icon name="clock" size={16} color="var(--kiwi-600)" />{job.type}</span>
          <span><Icon name="briefcase" size={16} color="var(--kiwi-600)" />{job.mode}</span>
        </div>
      </div>
      <div className="job__go"><Icon name="arrow-right" size={22} /></div>
    </div>
  );
}

/* ---------- Application form ---------- */
function ApplicationForm({ job, onShowKvkk }) {
  const [form, setForm] = useState({ name: "", phone: "", email: "" });
  const [consent, setConsent] = useState(false);
  const [errors, setErrors] = useState({});
  const [state, setState] = useState("idle"); // idle | sending | done | error
  const [serverMsg, setServerMsg] = useState("");

  const set = (k) => (e) => { setForm((f) => ({ ...f, [k]: e.target.value })); setErrors((er) => ({ ...er, [k]: null })); };

  function validate() {
    const er = {};
    if (form.name.trim().length < 3) er.name = "Lütfen ad ve soyadını gir.";
    const phoneDigits = form.phone.replace(/\D/g, "");
    if (phoneDigits.length < 10) er.phone = "Geçerli bir telefon numarası gir.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim())) er.email = "Geçerli bir e-posta adresi gir.";
    setErrors(er);
    return Object.keys(er).length === 0;
  }

  async function submit(e) {
    e.preventDefault();
    if (!consent) return;
    if (!validate()) return;
    setState("sending");
    setServerMsg("");
    try {
      const res = await fetch("/api/apply", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: form.name.trim(),
          phone: form.phone.trim(),
          email: form.email.trim(),
          jobId: job.id,
          jobTitle: job.title,
          jobLocation: `${job.district}, ${job.city}`,
          consent: true,
          submittedAt: new Date().toISOString(),
        }),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data.error || `Sunucu hatası (${res.status})`);
      }
      setState("done");
    } catch (err) {
      setState("error");
      setServerMsg(
        location.hostname === "localhost" || location.protocol === "file:" || location.hostname.endsWith(".dev")
          ? "Başvuru gönderimi yalnızca Cloudflare Pages üzerinde (canlı ortamda) çalışır. Önizlemede e-posta gönderilmez."
          : "Başvurun gönderilemedi. Lütfen biraz sonra tekrar dene."
      );
    }
  }

  if (state === "done") {
    return (
      <div className="success">
        <div className="success__ic"><Icon name="check" size={38} stroke={2.4} /></div>
        <h3 className="success__t">Başvurun bize ulaştı!</h3>
        <p className="success__d">Teşekkürler {form.name.trim().split(" ")[0]}. <strong>{job.title}</strong> pozisyonu için başvurunu aldık. İK ekibimiz en kısa sürede sana dönüş yapacak.</p>
      </div>
    );
  }

  return (
    <form className="formwrap" onSubmit={submit} noValidate>
      <h3 className="formwrap__t">Bu pozisyona başvur</h3>
      <p className="formwrap__s">{job.title} · {job.district}, {job.city}</p>

      <div className="field">
        <label htmlFor="ap-name">Ad soyad</label>
        <input id="ap-name" type="text" autoComplete="name" placeholder="Adın ve soyadın"
          value={form.name} onChange={set("name")} aria-invalid={!!errors.name} />
        {errors.name && <div className="field__err">{errors.name}</div>}
      </div>

      <div className="field">
        <label htmlFor="ap-phone">Telefon</label>
        <input id="ap-phone" type="tel" inputMode="tel" autoComplete="tel" placeholder="05XX XXX XX XX"
          value={form.phone} onChange={set("phone")} aria-invalid={!!errors.phone} />
        {errors.phone && <div className="field__err">{errors.phone}</div>}
      </div>

      <div className="field">
        <label htmlFor="ap-email">E-posta</label>
        <input id="ap-email" type="email" inputMode="email" autoComplete="email" placeholder="ornek@eposta.com"
          value={form.email} onChange={set("email")} aria-invalid={!!errors.email} />
        {errors.email && <div className="field__err">{errors.email}</div>}
      </div>

      <div className="consent">
        <input id="ap-consent" type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
        <label htmlFor="ap-consent">
          <a onClick={(e) => { e.preventDefault(); onShowKvkk(); }}>KVKK Aydınlatma Metni</a>'ni okudum ve kişisel verilerimin işe alım süreçlerinde işlenmesini onaylıyorum.
        </label>
      </div>

      <button type="submit" className="btn btn--primary btn--lg btn--block" disabled={!consent || state === "sending"}>
        {state === "sending" ? <><span className="spinner" />Gönderiliyor…</> : <>Başvuruyu gönder<Icon name="send" size={18} /></>}
      </button>

      {state === "error" && <div className="form-status form-status--err">{serverMsg}</div>}
    </form>
  );
}

/* ---------- Job detail sheet (modal) ---------- */
function JobSheet({ job, onClose, onShowKvkk }) {
  const open = !!job;
  const ref = useRef(null);

  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    if (open) {
      document.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      if (ref.current) ref.current.scrollTop = 0;
    }
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  return (
    <div className="overlay" data-open={open} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      {job && (
        <div className="sheet" ref={ref} role="dialog" aria-modal="true" aria-label={`${job.title} ilan detayı`}>
          <div className="sheet__head">
            <div>
              <span className="job__dept">{job.dept}</span>
              <h2 className="detail__t">{job.title}</h2>
              <div className="detail__meta">
                <span><Icon name="map-pin" size={15} color="var(--kiwi-600)" />{job.district}, {job.city}</span>
                <span><Icon name="clock" size={15} color="var(--kiwi-600)" />{job.type}</span>
                <span><Icon name="briefcase" size={15} color="var(--kiwi-600)" />{job.mode}</span>
              </div>
            </div>
            <button className="sheet__close" onClick={onClose} aria-label="Kapat"><Icon name="x" size={22} /></button>
          </div>

          <div className="sheet__body">
            <p className="detail__lead">{job.summary}</p>

            <h3 className="detail__h">Neler yapacaksın?</h3>
            <ul className="detail__list">
              {job.responsibilities.map((r, i) => <li key={i}>{r}</li>)}
            </ul>

            <h3 className="detail__h">Aranan nitelikler</h3>
            <ul className="detail__list">
              {job.requirements.map((r, i) => <li key={i}>{r}</li>)}
            </ul>

            <ApplicationForm job={job} onShowKvkk={onShowKvkk} />
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------- Non-copiable e-posta ----------
   E-posta yalnızca CSS ::after üretilen içeriğiyle gösterilir.
   Metin düğümü ya da attribute olarak DOM'da bulunmaz → seçilemez & kopyalanamaz. */
function NoCopyEmail() {
  return <span className="nocopy-email" aria-hidden="true" />;
}

/* Metin içindeki {{EMAIL}} yer tutucusunu kopyalanamaz e-posta ile değiştirir */
function renderWithEmail(text) {
  const parts = text.split("{{EMAIL}}");
  return parts.map((p, i) => (
    <React.Fragment key={i}>{p}{i < parts.length - 1 && <NoCopyEmail />}</React.Fragment>
  ));
}

/* ---------- KVKK text modal ---------- */
function KvkkModal({ open, onClose, kvkk }) {
  useEffect(() => {
    function onKey(e) { if (e.key === "Escape") onClose(); }
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  return (
    <div className="overlay" data-open={open} style={{ zIndex: 120 }} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      {open && kvkk && (
        <div className="sheet" role="dialog" aria-modal="true" aria-label={kvkk.title} style={{ maxWidth: 680 }}>
          <div className="sheet__head">
            <h2 className="detail__t" style={{ fontSize: "var(--text-2xl)" }}>{kvkk.title}</h2>
            <button className="sheet__close" onClick={onClose} aria-label="Kapat"><Icon name="x" size={22} /></button>
          </div>
          <div className="sheet__body kvkk-doc">
            {kvkk.intro.map((p, i) => (
              <p key={`in-${i}`} className="kvkk-p">{renderWithEmail(p)}</p>
            ))}
            {kvkk.sections.map((s, si) => (
              <div key={`s-${si}`} className="kvkk-section">
                <h3 className="kvkk-h">{s.h}</h3>
                {(s.paras || []).map((p, pi) => <p key={`p-${pi}`} className="kvkk-p">{renderWithEmail(p)}</p>)}
                {s.list && (
                  <ul className="kvkk-list">
                    {s.list.map((li, li2) => <li key={`l-${li2}`}>{renderWithEmail(li)}</li>)}
                  </ul>
                )}
                {(s.parasAfter || []).map((p, pi) => <p key={`pa-${pi}`} className="kvkk-p">{renderWithEmail(p)}</p>)}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, ValueCard, JobCard, ApplicationForm, JobSheet, KvkkModal, NoCopyEmail });