// screens-modal.jsx — buy time, contact form, call screen
const useState_M = React.useState;
const useEffect_M = React.useEffect;

// ── Buy time ──────────────────────────────────────────────────────────
function detectCurrency() {
  const stored = localStorage.getItem("c2i_currency");
  if (stored && ["usd", "eur", "gbp"].includes(stored)) return stored;
  try {
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || "";
    let cur = "usd";
    if (tz === "Europe/London" || tz === "Europe/Belfast") cur = "gbp";
    else if (tz.startsWith("Europe/")) cur = "eur";
    localStorage.setItem("c2i_currency", cur);
    return cur;
  } catch { return "usd"; }
}

function BuyTime({ t, fa, balanceState, plans, liveMode, onClose, onPaid, liveSeconds, liveDays, hasEverPurchased }) {
  const [currency] = useState_M(detectCurrency);
  const sym = (t.currency_sym && t.currency_sym[currency]) || "$";

  const fallbackPlans = [
    { id: "starter",  name: "Quick Call",  minutes: 5,  price: 3.99, expiry_days: 3,  currency: "usd" },
    { id: "standard", name: "Family Call", minutes: 10, price: 6.99, expiry_days: 7,  currency: "usd" },
    { id: "premium",  name: "Best Value",  minutes: 30, price: 9.99, expiry_days: 14, currency: "usd" }
  ];

  const [fetchedPlans, setFetchedPlans] = useState_M(null);
  const [pickId, setPickId] = useState_M("premium");
  const [busy, setBusy] = useState_M(false);
  const [err, setErr] = useState_M(null);

  useEffect_M(() => {
    if (liveMode) {
      C2I.listPlans(currency).then((r) => {
        if (r.plans && r.plans.length) setFetchedPlans(r.plans);
      }).catch(() => {});
    }
  }, [currency]);

  const allPlans = fetchedPlans || (plans && plans.length ? plans : fallbackPlans);
  const picked = allPlans.find(p => p.id === pickId) || allPlans[allPlans.length - 1];
  const isEmpty = balanceState === "empty";

  const showTrialNote = !hasEverPurchased;
  const showUrgency = !isEmpty && liveDays != null && liveDays <= 2 && liveSeconds > 0;

  const handlePay = async () => {
    setErr(null); setBusy(true);
    try {
      if (liveMode) {
        const { checkout_url, session_id } = await C2I.checkout(picked.id, currency);
        // Paddle's success redirect doesn't carry the transaction id,
        // so remember it for the /payment-success handler.
        localStorage.setItem("c2i_pending_txn", session_id);
        window.location.href = checkout_url;
        return;
      } else {
        onPaid(picked);
      }
    } catch (e) {
      setErr(e.offline ? t.network_err : (e.message || "Couldn't start checkout."));
    } finally { setBusy(false); }
  };

  const perMin = (p) => (p.price / p.minutes).toFixed(2);

  return (
    <div className="buy">
      <div className="head">
        <h2 className="display">{isEmpty ? t.buy_h_empty : t.buy_h}</h2>
        <button className="close" onClick={onClose} aria-label="close"><Ico name="x" size={20} /></button>
      </div>
      {isEmpty && <div className="lead" style={{marginTop: -4, marginBottom: 8, color: 'var(--ink-mute)'}}>{t.buy_sub_empty}</div>}

      <div className="lead" style={{fontSize: 13, lineHeight: 1.5, color: 'var(--ink-soft)', marginBottom: 16}}>
        {(t.buy_anchor && t.buy_anchor[currency]) || (t.buy_anchor && t.buy_anchor.usd) || ""}
      </div>

      <div className="pkgs">
        {allPlans.map((p) => {
          const isBest = p.id === "premium";
          const sub = (t.plan_subs && t.plan_subs[p.id]) || "";
          const icon = (t.plan_icons && t.plan_icons[p.id]) || "";
          return (
            <div key={p.id}
                 className={`pkg ${pickId === p.id ? "selected" : ""} ${isBest ? "best" : ""}`}
                 onClick={() => setPickId(p.id)}>
              {isBest && <div className="tag">{t.plan_tag_best}</div>}
              <div className="radio"></div>
              <div className="body">
                <div className="mins">{icon} {p.name}</div>
                <div className="sub" style={{fontStyle: 'italic'}}>{sub}</div>
                <div style={{fontSize: 11, color: 'var(--ink-mute)', marginTop: 2}}>{t.plan_detail(p.minutes, p.expiry_days)}</div>
              </div>
              <div className="price-col" style={{textAlign: fa ? 'left' : 'right', minWidth: 60}}>
                <div className="price">{t.price_fmt(p.price, sym)}</div>
                <div style={{fontSize: 10, color: 'var(--ink-mute)'}}>{t.per_min_fmt(perMin(p), sym)}</div>
              </div>
            </div>
          );
        })}
      </div>

      {showTrialNote &&
      <div style={{marginTop: 14, padding: "10px 14px", background:'var(--saffron-soft)', borderRadius:'var(--r-md)', fontSize: 12.5, color:'oklch(0.38 0.06 65)', lineHeight: 1.4}}>
        {t.pkg_trial_note}
      </div>
      }

      {showUrgency &&
      <div style={{marginTop: 10, padding: "10px 14px", background:'oklch(0.92 0.08 60)', borderRadius:'var(--r-md)', fontSize: 12.5, color:'oklch(0.35 0.10 55)', lineHeight: 1.4}}>
        {t.urgency_banner(fmtMins(liveSeconds, fa), liveDays)}
      </div>
      }

      {err && <div style={{marginTop: 12}}><ErrBox msg={err} /></div>}

      <div className="total">
        <div>
          <div className="lbl">{t.total}</div>
          <div style={{fontSize: 11, color:'var(--ink-mute)', marginTop: 2}}>{t.expires_in(picked.expiry_days)}</div>
        </div>
        <span className="v">{t.price_fmt(picked.price, sym)}</span>
      </div>

      <div className="actions">
        <button className="btn btn-primary btn-block btn-lg" onClick={handlePay} disabled={busy}>
          <Ico name="card" size={16} /> {busy ? "…" : `${t.pay_with} ${t.price_fmt(picked.price, sym)}`}
        </button>
        <div className="secure">{t.secure}</div>
      </div>
    </div>
  );
}

// ── Contact form ──────────────────────────────────────────────────────
function ContactForm({ t, fa, draft, liveMode, onSave, onCancel, onDelete }) {
  const [name, setName] = useState_M(draft?.name || "");
  const [num, setNum] = useState_M(draft?.numDisplay || draft?.phone || "");
  const [busy, setBusy] = useState_M(false);
  const [err, setErr] = useState_M(null);

  const initial = (name[0] || "?").toUpperCase();

  const submit = async () => {
    setErr(null);
    const phoneClean = fromFa(num).replace(/[^\d+]/g, "");
    if (!phoneClean) { setErr(fa ? "شماره لازم است." : "Phone is required."); return; }
    setBusy(true);
    try {
      if (liveMode) {
        if (draft?.id) {
          await C2I.updateContact(draft.id, { name: name || null, phone: phoneClean });
        } else {
          await C2I.addContact({ name: name || null, phone: phoneClean });
        }
      }
      onSave({ id: draft?.id, name: name || "Untitled", phone: phoneClean, numDisplay: num });
    } catch (e) {
      setErr(e.offline ? t.network_err : (e.message || "Couldn't save."));
    } finally { setBusy(false); }
  };

  const removeIt = async () => {
    if (!draft?.id) return onCancel();
    if (!confirm(fa ? "حذف این مخاطب؟" : "Delete this contact?")) return;
    setBusy(true);
    try {
      if (liveMode) await C2I.deleteContact(draft.id);
      onDelete?.(draft.id);
    } catch (e) {
      setErr(e.offline ? t.network_err : (e.message || "Couldn't delete."));
    } finally { setBusy(false); }
  };

  return (
    <div className="cform">
      <div className="head">
        <button onClick={onCancel}><Ico name="x" size={20} /></button>
        <h2 className="display">{draft?.id ? t.edit_contact : t.new_contact}</h2>
        <div style={{width: 24}}></div>
      </div>

      <div className="photo">
        <div className="av">{initial}</div>
      </div>

      <div className="fields">
        {err && <ErrBox msg={err} />}
        <div className="field">
          <label>{t.first_name}</label>
          <input value={name} onChange={(e)=>setName(e.target.value)} placeholder={fa ? "مامان" : "Mom"} autoFocus />
        </div>
        <div className="field">
          <label>{t.home_number}</label>
          <input value={num} onChange={(e)=>setNum(e.target.value)} className="mono" placeholder={fa ? "+۹۸ ۹۱۲ ۳۴۵ ۶۷۸۹" : "+98 912 345 6789"} />
          <div className="hint">{t.home_number_hint}</div>
        </div>
      </div>

      <div className="save-row">
        <button className="btn btn-primary btn-block btn-lg" onClick={submit} disabled={busy}>
          {busy ? "…" : t.save}
        </button>
        {draft?.id && (
          <button className="btn-link btn-block" style={{display:'block', width:'100%', textAlign:'center', marginTop: 12, color:'var(--ember)', cursor:'pointer'}} onClick={removeIt}>
            {t.delete_contact}
          </button>
        )}
      </div>
    </div>
  );
}

// ── Call screen ───────────────────────────────────────────────────────
// Backend statuses: queued | in-progress | completed | cancelled
// Frontend visualization adds a "reaching"/"connecting" microstate after queued
function CallScreen({ t, fa, contact, callId, status, durationSeconds, liveMode, onEnd }) {
  // status from backend; durationSeconds is the live or final duration
  const isQueued      = status === "queued";
  const isInProgress  = status === "in-progress";
  const isCompleted   = status === "completed";
  const isCancelled   = status === "cancelled";
  const isLive        = isInProgress;

  const statusText =
    isQueued      ? t.call_status_queued :
    isInProgress  ? t.call_status_connected :
    isCompleted   ? (fa ? "تماس به پایان رسید" : "Call ended") :
    isCancelled   ? (fa ? "لغو شد" : "Cancelled") :
                    t.call_status_connecting;

  const handleEnd = async () => {
    if (callId && liveMode && isQueued) {
      try { await C2I.cancelCall(callId); } catch {}
    }
    onEnd();
  };

  const [mute, setMute] = useState_M(false);
  const [speaker, setSpeaker] = useState_M(false);

  return (
    <div className="call-screen">
      <div className="who">
        <div className="name">{contact.name}</div>
        <div className="num mono">{contact.numDisplay || contact.phone}</div>
      </div>
      <div className={`status ${isLive || isCompleted ? "connected" : ""}`}>
        <span className="dot"></span>{statusText}
      </div>

      <div className="call-bridge">
        <div className="bridge">
          <div className="leg left">
            <div className="photo">{fa ? "ت" : "Y"}</div>
            <div className="label">{t.leg_you}</div>
          </div>
          <div className="line">
            <svg viewBox="0 0 200 24" preserveAspectRatio="none">
              <path d="M0 12 Q 50 0, 100 12 T 200 12" fill="none"
                stroke={isLive || isCompleted ? "var(--success)" : "var(--saffron)"}
                strokeWidth="1.5"
                strokeDasharray={isLive || isCompleted ? "0" : "4 4"}
                opacity={isQueued ? 0.4 : 1}>
                {!(isLive || isCompleted) && (
                  <animate attributeName="stroke-dashoffset" from="0" to="-16" dur="0.8s" repeatCount="indefinite" />
                )}
              </path>
              <circle cx="100" cy="12" r="3"
                fill={isLive || isCompleted ? "var(--success)" : "var(--saffron)"}
                opacity={isQueued ? 0.4 : 1} />
            </svg>
          </div>
          <div className="leg right">
            <div className="photo">{contact.initial || contact.name?.[0] || "?"}</div>
            <div className="label">{t.leg_them}</div>
          </div>
          <div className="timer display">
            {(isLive || isCompleted) ? fmtMins(durationSeconds || 0, fa) : <span style={{color:'var(--ink-mute)'}}>--:--</span>}
            <span className="lbl">{isLive ? t.talked_for : (isCompleted ? t.talked_for : "·")}</span>
          </div>
        </div>
      </div>

      <div className="call-actions">
        <button className={`ca ${mute ? "on" : ""}`} onClick={() => setMute(!mute)} disabled={!isLive} style={{opacity: isLive ? 1 : 0.5}}>
          <Ico name={mute ? "mic-off" : "mic"} size={20} />
          <span>{t.call_mute}</span>
        </button>
        <button className={`ca ${speaker ? "on" : ""}`} onClick={() => setSpeaker(!speaker)} disabled={!isLive} style={{opacity: isLive ? 1 : 0.5}}>
          <Ico name="speaker" size={20} />
          <span>{t.call_speaker}</span>
        </button>
        <button className="ca" disabled={!isLive} style={{opacity: isLive ? 1 : 0.5}}>
          <Ico name="keypad" size={20} />
          <span>{t.call_keypad}</span>
        </button>
      </div>

      <div className="call-end-row">
        <button className="call-end" onClick={handleEnd}>
          <Ico name="phone-fill" size={18} style={{transform: 'rotate(135deg)'}}/>
          {isQueued ? (fa ? "لغو صف" : "Cancel queue") : t.call_end_call}
        </button>
      </div>
    </div>
  );
}

window.BuyTime = BuyTime;
window.ContactForm = ContactForm;
window.CallScreen = CallScreen;