// screens-settings.jsx — Account settings, profile, sign out

function Settings({ lang, user, onSignout }) {
  const isAr = lang === "ar";
  return (
    <div className="page" style={{ maxWidth: 900 }}>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><h3 className="card-title">{isAr ? "الملف الشخصي" : "Profile"}</h3></div>
        <div className="row" style={{ gap: 16, alignItems: "center" }}>
          <div className="avatar" style={{ width: 56, height: 56, fontSize: 18 }}>
            {(user?.name || "?").slice(0, 2).toUpperCase()}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 15 }}>{user?.name || "—"}</div>
            <div style={{ fontSize: 12.5, color: "var(--muted)" }} className="mono">{user?.email || "—"}</div>
            <div className="row gap-sm" style={{ marginTop: 6 }}>
              {user?.plan ? (
                <span className="chip chip-success chip-dot">
                  {isAr ? "اشتراك" : "Plan"}: {user.plan === "unlimited" ? (isAr ? "غير محدود" : "Unlimited") :
                                            user.plan === "pro" ? (isAr ? "ثلاث منصات" : "Pro") :
                                            (isAr ? "منصة واحدة" : "Solo")}
                </span>
              ) : (
                <span className="chip">{isAr ? "لا يوجد اشتراك نشط" : "No active subscription"}</span>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <h3 className="card-title">{isAr ? "الاشتراك والفوترة" : "Subscription & billing"}</h3>
        </div>
        <p style={{ fontSize: 13.5, color: "var(--muted)", margin: "0 0 14px" }}>
          {isAr
            ? "للترقية أو تجديد اشتراكك، استخدم بوت التليجرام بأمر /subscribe — هتختار الباقة وهتستلم لينك دفع آمن من فواتيرك."
            : "To upgrade or renew, use the Telegram bot's /subscribe command — pick your plan and pay via Fawaterk."}
        </p>
        <div className="row gap-sm">
          <a className="btn btn-primary" href={`https://t.me/${window.RAWJ_CONFIG.BOT_USERNAME}?start=subscribe`} target="_blank" rel="noopener">
            <Icon.send size={13} /> {isAr ? "افتح البوت للترقية" : "Open bot to upgrade"}
          </a>
          <a className="btn" href={`https://t.me/${window.RAWJ_CONFIG.BOT_USERNAME}`} target="_blank" rel="noopener">
            <Icon.send size={13} /> {isAr ? "افتح البوت" : "Open bot"}
          </a>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><h3 className="card-title">{isAr ? "ربط التليجرام للتنبيهات" : "Telegram alerts link"}</h3></div>
        <p style={{ fontSize: 13.5, color: "var(--muted)", margin: "0 0 14px" }}>
          {isAr
            ? "افتح بوت روّج برو على تليجرام واضغط /start. هتوصلك التنبيهات الفورية لو حساب توقف بسبب فشل دفع."
            : "Open the Rawj Pro Telegram bot and press /start. You'll get instant alerts when an account stops due to payment failure."}
        </p>
        <a className="btn btn-primary" href={`https://t.me/${window.RAWJ_CONFIG.BOT_USERNAME}?start=link_${user?.id ?? ""}`} target="_blank" rel="noopener">
          <Icon.send size={14} /> {isAr ? "افتح بوت تليجرام" : "Open Telegram bot"}
        </a>
      </div>

      <div className="card" style={{ borderColor: "color-mix(in oklch, var(--danger) 25%, transparent)" }}>
        <div className="card-head"><h3 className="card-title" style={{ color: "var(--danger)" }}>{isAr ? "تسجيل الخروج" : "Sign out"}</h3></div>
        <p style={{ fontSize: 13.5, color: "var(--muted)", margin: "0 0 14px" }}>
          {isAr ? "هتطلع من حسابك على هذا الجهاز." : "You'll be signed out from this device."}
        </p>
        <button className="btn btn-danger" onClick={onSignout}>
          {isAr ? "تسجيل الخروج" : "Sign out"}
        </button>
      </div>
    </div>
  );
}

window.Settings = Settings;