/* global React */
// Phone mockup with multiple "screens"

const PHONE_TONES = [
  { name: "default", bg: "linear-gradient(180deg, #fdfaf1, #f5efde)", accent: "#0f4d2a" },
  { name: "emerald", bg: "linear-gradient(180deg, #e4f0ea, #c2dfd0)", accent: "#0b3d22" },
  { name: "cream", bg: "linear-gradient(180deg, #fbf3df, #f3e6c1)", accent: "#a88639" },
  { name: "rose", bg: "linear-gradient(180deg, #f7e6e3, #ecc9c2)", accent: "#8a3a2a" },
  { name: "lavender", bg: "linear-gradient(180deg, #ede7f4, #d6cae7)", accent: "#4a3a72" },
  { name: "midnight", bg: "linear-gradient(180deg, #1a2030, #0d1320)", accent: "#c9a961" },
];

const PHONE_SCREENSHOT_MAP = {
  splash: "assets/screenshots/splash.jpeg",
  home: "assets/screenshots/home.jpeg",
  languages: "assets/screenshots/languages.jpeg",
  library: "assets/screenshots/libarary.jpeg",
  mushafs: "assets/screenshots/mushafs.jpeg",
  mushafs2: "assets/screenshots/mushafs-2.jpeg",
  quran: "assets/screenshots/quran.jpeg",
  quranTafseer: "assets/screenshots/quran-tafseer.jpeg",
  reciters: "assets/screenshots/quraa.jpeg",
  tilawa: "assets/screenshots/tilawa.jpeg",
  prayer: "assets/screenshots/prayer-times.jpeg",
  qibla: "assets/screenshots/qiblah.jpeg",
  azkar: "assets/screenshots/azkar.jpeg",
  sabha: "assets/screenshots/sabha.jpeg",
};

function resolvePhoneScreenshot(screen) {
  return PHONE_SCREENSHOT_MAP[screen] || PHONE_SCREENSHOT_MAP.home;
}

function PhoneFrame({ screen = "quran", rotation = 0, scale = 1, className = "", autoCycle = false, toneIndex }) {
  const [prev, setPrev] = useState(screen);
  const [transitioning, setTransitioning] = useState(false);
  const [cycle, setCycle] = useState(0);
  useEffect(() => {
    if (screen === prev) return;
    setTransitioning(true);
    if (autoCycle) setCycle(c => (c + 1) % PHONE_TONES.length);
    const t = setTimeout(() => { setPrev(screen); setTransitioning(false); }, 480);
    return () => clearTimeout(t);
  }, [screen]);

  useEffect(() => {
    if (!autoCycle) return;
    const id = setInterval(() => setCycle(c => (c + 1) % PHONE_TONES.length), 4500);
    return () => clearInterval(id);
  }, [autoCycle]);

  const tone = PHONE_TONES[(toneIndex != null ? toneIndex : cycle) % PHONE_TONES.length];
  const isDark = tone.name === "midnight";

  return (
    <div className={"phone " + className} style={{ transform: `rotate(${rotation}deg) scale(${scale})` }}>
      <div className="phone__frame">
        <div className="phone__screen-shell">
          <div className="phone__screen" style={{ background: tone.bg, transition: "background .8s ease", color: isDark ? "#f3ece0" : "" }} data-tone={tone.name}>
            <div className="phone__stage">
              <div key={prev} className={"phone__layer " + (transitioning ? "is-leaving" : "is-resting")}>
                <PhoneScreen screen={prev} dark={isDark}/>
              </div>
              {transitioning && (
                <div key={screen + "_in"} className="phone__layer is-entering">
                  <PhoneScreen screen={screen} dark={isDark}/>
                </div>
              )}
            </div>
          </div>
        </div>
        <img className="phone__case-art" src="assets/iphone-case.avif" alt="" aria-hidden="true" />
      </div>
    </div>
  );
}

function PhoneStatusBar({ dark = false }) {
  return (
    <div className={"phone__ios-status" + (dark ? " is-dark" : "")} aria-hidden="true">
      <span className="phone__ios-time">9:41</span>
      <span className="phone__ios-right">
        <svg className="phone__ios-signal" width="13" height="10" viewBox="0 0 17 12" fill="currentColor">
          <rect x="1" y="7" width="2.4" height="4" rx=".7"/>
          <rect x="5" y="5.5" width="2.4" height="5.5" rx=".7"/>
          <rect x="9" y="4" width="2.4" height="7" rx=".7"/>
          <rect x="13" y="2.5" width="2.4" height="8.5" rx=".7"/>
        </svg>
        <svg className="phone__ios-wifi" width="11" height="10" viewBox="0 0 14 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
          <path d="M1.5 4.7C5 1.8 9 1.8 12.5 4.7"/>
          <path d="M3.3 6.8c2.5-2 4.9-2 7.4 0"/>
          <path d="M5.5 9.1c1-.8 2-.8 3 0"/>
        </svg>
        <svg className="phone__ios-battery" width="19" height="9" viewBox="0 0 24 11" fill="none" stroke="currentColor" strokeWidth="1.2">
          <rect x=".9" y=".9" width="19.2" height="9.2" rx="2.4"/>
          <rect x="2.6" y="2.6" width="14.6" height="5.8" rx="1.4" fill="currentColor" stroke="none"/>
          <rect x="21.2" y="3.6" width="1.8" height="3.8" rx=".9" fill="currentColor" stroke="none"/>
        </svg>
      </span>
    </div>
  );
}

function PhoneScreen({ screen, dark = false }) {
  const src = resolvePhoneScreenshot(screen);
  return (
    <div className="phone__shot">
      <PhoneStatusBar dark={dark}/>
      <img
        className="phone__img-screen"
        src={src}
        alt={screen}
        loading="lazy"
        decoding="async"
      />
    </div>
  );
}

function ScreenQuran() {
  return (
    <div className="scr scr--quran">
      <div className="scr__top">
        <button className="scr__icon-btn"><Icon name="arrow-right" size={18}/></button>
        <div className="scr__title">
          <div className="scr__title-ar">البقرة</div>
          <div className="scr__title-en">Al-Baqarah · 286</div>
        </div>
        <button className="scr__icon-btn"><Icon name="bookmark" size={18}/></button>
      </div>
      <div className="scr__bismillah">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</div>
      <div className="scr__ayahs">
        <span>الٓمٓ</span>
        <AyahMark n={1}/>
        <span>ذَٰلِكَ ٱلْكِتَٰبُ لَا رَيْبَ ۛ فِيهِ ۛ هُدًى لِّلْمُتَّقِينَ</span>
        <AyahMark n={2}/>
        <span>ٱلَّذِينَ يُؤْمِنُونَ بِٱلْغَيْبِ وَيُقِيمُونَ ٱلصَّلَوٰةَ وَمِمَّا رَزَقْنَٰهُمْ يُنفِقُونَ</span>
        <AyahMark n={3}/>
        <span>وَٱلَّذِينَ يُؤْمِنُونَ بِمَآ أُنزِلَ إِلَيْكَ</span>
      </div>
      <div className="scr__tabbar">
        <div className="scr__tab is-active"><Icon name="book" size={18}/></div>
        <div className="scr__tab"><Icon name="wave" size={18}/></div>
        <div className="scr__tab"><Icon name="mosque" size={18}/></div>
        <div className="scr__tab"><Icon name="bookmark" size={18}/></div>
      </div>
    </div>
  );
}

function AyahMark({ n }) {
  return (
    <span className="scr__ayah-mark">
      <svg viewBox="0 0 32 32" width="22" height="22">
        <path d="M16 2 L20 10 L28 10 L22 16 L28 22 L20 22 L16 30 L12 22 L4 22 L10 16 L4 10 L12 10 Z" fill="#fdf6e3" stroke="#a88639" strokeWidth="1"/>
      </svg>
      <span>{toArabicNum(n)}</span>
    </span>
  );
}

function ScreenReciters() {
  return (
    <div className="scr scr--list">
      <div className="scr__top">
        <button className="scr__icon-btn"><Icon name="arrow-right" size={18}/></button>
        <div className="scr__title"><div className="scr__title-ar">القرّاء</div><div className="scr__title-en">Reciters</div></div>
        <button className="scr__icon-btn"><Icon name="globe" size={18}/></button>
      </div>
      <div className="scr__search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>
        <span>ابحث عن قارئ...</span>
      </div>
      <div className="scr__list">
        {RECITERS.slice(0, 4).map((r, i) => (
          <div key={r.en} className={"scr__list-row" + (i === 1 ? " is-active" : "")}>
            <div className="scr__avatar">{r.initial}</div>
            <div className="scr__list-info">
              <div className="scr__list-name">{r.name}</div>
              <div className="scr__list-meta">{r.en} · {r.surahs} سورة</div>
            </div>
            <button className="scr__play-btn"><Icon name={i === 1 ? "pause" : "play"} size={14}/></button>
          </div>
        ))}
      </div>
    </div>
  );
}

function ScreenPrayer() {
  return (
    <div className="scr scr--prayer">
      <div className="scr__prayer-head">
        <div>
          <div className="scr__prayer-hijri">١٥ رمضان ١٤٤٦</div>
          <div className="scr__prayer-greg">Mar 15, 2025</div>
        </div>
        <div className="scr__prayer-loc"><Icon name="location" size={12}/> مكة</div>
      </div>
      <div className="scr__prayer-next">
        <div className="scr__prayer-next-label">الصلاة القادمة</div>
        <div className="scr__prayer-next-name">العصر</div>
        <div className="scr__prayer-next-time">15:43</div>
        <div className="scr__prayer-next-count">بعد ٢ ساعة و ١٤ دقيقة</div>
      </div>
      <div className="scr__prayer-list">
        {PRAYERS.slice(0, 5).map((p, i) => (
          <div key={p.en} className={"scr__prayer-row" + (i === 3 ? " is-next" : "") + (i < 3 ? " is-past" : "")}>
            <Icon name={p.icon} size={16}/>
            <span>{p.name}</span>
            <span className="scr__prayer-row-time">{p.time}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ScreenAzkar() {
  return (
    <div className="scr scr--azkar">
      <div className="scr__top">
        <button className="scr__icon-btn"><Icon name="arrow-right" size={18}/></button>
        <div className="scr__title"><div className="scr__title-ar">أذكار الصباح</div><div className="scr__title-en">Morning Azkar</div></div>
        <button className="scr__icon-btn"><Icon name="bell" size={18}/></button>
      </div>
      <div className="scr__azkar-card">
        <div className="scr__azkar-counter">
          <div className="scr__azkar-ring">
            <svg viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="44" fill="none" stroke="rgba(201,169,97,.25)" strokeWidth="4"/>
              <circle cx="50" cy="50" r="44" fill="none" stroke="#c9a961" strokeWidth="4" strokeDasharray="276" strokeDashoffset="80" transform="rotate(-90 50 50)" strokeLinecap="round"/>
            </svg>
            <div className="scr__azkar-count">٧<small>/١٠</small></div>
          </div>
        </div>
        <div className="scr__azkar-text">
          اللَّهُمَّ بِكَ أَصْبَحْنَا، وَبِكَ أَمْسَيْنَا، وَبِكَ نَحْيَا، وَبِكَ نَمُوتُ، وَإِلَيْكَ النُّشُورُ
        </div>
        <div className="scr__azkar-tag">يقال مرة واحدة</div>
      </div>
      <div className="scr__azkar-progress">
        <div className="scr__azkar-step is-done"/>
        <div className="scr__azkar-step is-done"/>
        <div className="scr__azkar-step is-active"/>
        <div className="scr__azkar-step"/>
        <div className="scr__azkar-step"/>
      </div>
    </div>
  );
}

function ScreenQibla() {
  return (
    <div className="scr scr--qibla">
      <div className="scr__top">
        <button className="scr__icon-btn"><Icon name="arrow-right" size={18}/></button>
        <div className="scr__title"><div className="scr__title-ar">اتجاه القبلة</div><div className="scr__title-en">Qibla Direction</div></div>
        <button className="scr__icon-btn"><Icon name="location" size={18}/></button>
      </div>
      <div className="scr__qibla">
        <div className="scr__qibla-compass">
          <div className="scr__qibla-ring"/>
          <div className="scr__qibla-dots">
            {Array.from({ length: 36 }).map((_, i) => (
              <span key={i} style={{ transform: `rotate(${i * 10}deg) translateY(-80px)` }}/>
            ))}
          </div>
          <div className="scr__qibla-needle"/>
          <div className="scr__qibla-kaaba">🕋</div>
        </div>
        <div className="scr__qibla-info">
          <div><b>٢٤٣°</b><small>من الشمال</small></div>
          <div><b>٦٧ كم</b><small>إلى مكة</small></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneFrame, PhoneStatusBar, PhoneScreen, ScreenQuran, ScreenReciters, ScreenPrayer, ScreenAzkar, ScreenQibla });