# -*- coding: utf-8 -*-
"""
Superium — account + support pages
==================================

login.html / signup.html   centred auth card, phone → OTP with countdown
profile.html               account info (name, family, phone, address)
profile-orders.html        order history with status
profile-addresses.html     saved addresses
support.html               FAQ accordion + contact form

The profile pages share one sidebar, rendered by ``_shell()`` — edit it once
and all three follow.
"""

from __future__ import annotations

from components import breadcrumb, empty_state, fa
from layout import icon, logo

# --------------------------------------------------------------------------
# Profile shell
# --------------------------------------------------------------------------

PROFILE_NAV = [
    ("profile.html", "user", "اطلاعات حساب"),
    ("profile-orders.html", "box", "سفارش‌های من"),
    ("profile-addresses.html", "pin", "آدرس‌ها"),
    ("support.html", "headset", "پشتیبانی"),
]


def _sidebar(active: str) -> str:
    links = "".join(
        f'<a href="{href}" class="sp-menu-item{" is-active" if href == active else ""}">'
        f"{icon(ico, 19)}<span>{label}</span></a>"
        for href, ico, label in PROFILE_NAV
    )
    return f"""
      <aside class="sp-card sp-card-pad sp-profile-side sp-sticky">
        <div class="sp-profile-user">
          <div class="sp-user-avatar" style="inline-size:52px;block-size:52px;font-size:1.25rem">ز</div>
          <div>
            <div class="sp-user-name">زهرا احمدی</div>
            <div class="sp-user-phone">۰۹۳۹۹۹۹۹۹۹۹</div>
          </div>
        </div>
        <div class="sp-profile-credit">
          {icon("wallet", 20)}
          <div><span>اعتبار کیف پول</span><b>۲۴۰,۰۰۰ تومان</b></div>
        </div>
        <nav class="sp-menu" style="padding:0">
          {links}
          <hr class="sp-divider" />
          <a href="login.html" class="sp-menu-item sp-menu-item--logout">
            {icon("logout", 19)}<span>خروج از حساب</span>
          </a>
        </nav>
      </aside>"""


def _shell(active: str, crumb_label: str, body: str) -> str:
    return f"""
      <div class="sp-container">
        {breadcrumb([("home-1-fresh.html", "خانه"), (active, crumb_label)])}
        <div class="sp-shell sp-shell--start">
          {_sidebar(active)}
          <section>{body}</section>
        </div>
      </div>"""


# ==========================================================================
# Auth
# ==========================================================================


def _auth_card(inner: str) -> str:
    return f"""
      <div class="sp-auth">
        <div class="sp-auth-card">
          <a href="home-1-fresh.html" class="sp-auth-logo">{logo()}</a>
          {inner}
        </div>
        <p class="sp-auth-foot">
          با ورود یا ثبت‌نام، <a href="support.html">قوانین و مقررات</a> و
          <a href="support.html">حریم خصوصی</a> را می‌پذیرید.
        </p>
      </div>"""


def login() -> str:
    inner = f"""
      <div x-data="superiumAuth()">
        <!-- Step 1: phone -->
        <div x-show="step === 'phone'">
          <h1 class="sp-auth-title">به سوپردوپر خوش آمدید!</h1>
          <p class="sp-auth-lead">شماره موبایل خود را وارد کنید:</p>

          <form @submit.prevent="sendCode()">
            <label class="sp-field">
              <span class="sp-sr-only">شماره موبایل</span>
              <input type="tel" class="sp-input sp-input--lg" x-model="phone"
                     :class="{{ 'sp-input--invalid': error }}"
                     placeholder="۰۹*********" inputmode="tel" autocomplete="tel"
                     maxlength="11" />
              <span class="sp-error" x-show="error" x-cloak x-text="error"></span>
            </label>
            <button type="submit" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg"
                    :disabled="phone.length < 11">ادامه</button>
          </form>
        </div>

        <!-- Step 2: OTP -->
        <div x-show="step === 'code'" x-cloak>
          <h1 class="sp-auth-title">کد تأیید را وارد کنید</h1>
          <p class="sp-auth-lead">
            کد ۵ رقمی به شماره <b x-text="phone"></b> پیامک شد.
            <button type="button" class="sp-link" @click="step = 'phone'">ویرایش شماره</button>
          </p>

          <form @submit.prevent="verify()">
            <div class="sp-otp" dir="ltr">
              <template x-for="i in 5" :key="i">
                <input type="text" class="sp-otp-box" inputmode="numeric" maxlength="1"
                       :data-otp="i" @input="otpInput($event, i)"
                       @keydown.backspace="otpBack($event, i)" aria-label="رقم کد تأیید" />
              </template>
            </div>
            <span class="sp-error" x-show="error" x-cloak x-text="error"></span>

            <div class="sp-otp-timer">
              <template x-if="seconds > 0">
                <span>ارسال مجدد کد تا <b x-text="clock"></b> دیگر</span>
              </template>
              <template x-if="seconds === 0">
                <button type="button" class="sp-link" @click="sendCode()">ارسال مجدد کد</button>
              </template>
            </div>

            <button type="submit" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg">
              ورود به حساب
            </button>
          </form>
        </div>

        <!-- Step 3: done -->
        <div x-show="step === 'done'" x-cloak style="text-align:center">
          <div class="sp-success-mark" style="margin-inline:auto">{icon("check", 34)}</div>
          <h1 class="sp-auth-title" style="margin-block-start:16px">خوش آمدید!</h1>
          <p class="sp-auth-lead">با موفقیت وارد حساب خود شدید.</p>
          <a href="home-1-fresh.html" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg">
            شروع خرید
          </a>
        </div>

        <hr class="sp-divider" />
        <p class="sp-auth-alt">
          حساب کاربری ندارید؟ <a href="signup.html">ثبت‌نام کنید</a>
        </p>
      </div>"""
    return _auth_card(inner)


def signup() -> str:
    inner = f"""
      <div x-data="superiumAuth()">
        <h1 class="sp-auth-title">ساخت حساب کاربری</h1>
        <p class="sp-auth-lead">برای شروع، اطلاعات زیر را کامل کنید:</p>

        <form @submit.prevent="step = 'done'; notify('حساب شما ساخته شد')"
              x-show="step !== 'done'">
          <div class="sp-form-row">
            <label class="sp-field">
              <span class="sp-label">نام <span class="sp-req">*</span></span>
              <input type="text" class="sp-input" required autocomplete="given-name" />
            </label>
            <label class="sp-field">
              <span class="sp-label">نام خانوادگی <span class="sp-req">*</span></span>
              <input type="text" class="sp-input" required autocomplete="family-name" />
            </label>
          </div>

          <label class="sp-field">
            <span class="sp-label">شماره موبایل <span class="sp-req">*</span></span>
            <input type="tel" class="sp-input" x-model="phone" placeholder="۰۹*********"
                   inputmode="tel" maxlength="11" required autocomplete="tel" />
          </label>

          <label class="sp-field">
            <span class="sp-label">ایمیل (اختیاری)</span>
            <input type="email" class="sp-input" placeholder="name@example.com"
                   autocomplete="email" />
          </label>

          <label class="sp-field">
            <span class="sp-label">کد معرف (اختیاری)</span>
            <input type="text" class="sp-input" placeholder="مثال: SUPER1405" />
            <span class="sp-hint">با کد معرف، اولین ارسال شما رایگان می‌شود.</span>
          </label>

          <label class="sp-check" style="margin-block-end:16px">
            <input type="checkbox" required />
            <span>قوانین و مقررات سوپردوپر مارکت را می‌پذیرم.</span>
          </label>

          <button type="submit" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg">
            ساخت حساب
          </button>
        </form>

        <div x-show="step === 'done'" x-cloak style="text-align:center">
          <div class="sp-success-mark" style="margin-inline:auto">{icon("check", 34)}</div>
          <h2 class="sp-auth-title" style="margin-block-start:16px">حساب شما ساخته شد</h2>
          <p class="sp-auth-lead">حالا می‌توانید اولین سفارش خود را ثبت کنید.</p>
          <a href="market.html" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg">
            شروع خرید
          </a>
        </div>

        <hr class="sp-divider" />
        <p class="sp-auth-alt">قبلاً ثبت‌نام کرده‌اید؟ <a href="login.html">وارد شوید</a></p>
      </div>"""
    return _auth_card(inner)


# ==========================================================================
# Profile — account info
# ==========================================================================


def profile() -> str:
    body = f"""
      <div class="sp-card sp-card-pad" style="margin-block-end:16px">
        <div class="sp-section-head">
          <h1 class="sp-section-title">اطلاعات حساب</h1>
        </div>

        <form @submit.prevent="notify('اطلاعات حساب ذخیره شد')">
          <div class="sp-form-row">
            <label class="sp-field">
              <span class="sp-label">نام <span class="sp-req">*</span></span>
              <input type="text" class="sp-input" value="زهرا" required />
            </label>
            <label class="sp-field">
              <span class="sp-label">نام خانوادگی <span class="sp-req">*</span></span>
              <input type="text" class="sp-input" value="احمدی" required />
            </label>
          </div>

          <div class="sp-form-row">
            <label class="sp-field">
              <span class="sp-label">شماره موبایل</span>
              <input type="tel" class="sp-input" value="۰۹۳۹۹۹۹۹۹۹۹" readonly />
              <span class="sp-hint">برای تغییر شماره با پشتیبانی تماس بگیرید.</span>
            </label>
            <label class="sp-field">
              <span class="sp-label">ایمیل</span>
              <input type="email" class="sp-input" value="zahra@example.com" />
            </label>
          </div>

          <div class="sp-form-row">
            <label class="sp-field">
              <span class="sp-label">کد ملی</span>
              <input type="text" class="sp-input" placeholder="۱۰ رقم" inputmode="numeric"
                     maxlength="10" />
            </label>
            <label class="sp-field">
              <span class="sp-label">تاریخ تولد</span>
              <input type="text" class="sp-input" placeholder="۱۳۷۰/۰۵/۱۲" />
            </label>
          </div>

          <label class="sp-field">
            <span class="sp-label">آدرس پیش‌فرض</span>
            <textarea class="sp-textarea">تهران، محله زرگنده، شریعتی، سیما جنوبی، پلاک ۸، طبقه ۳</textarea>
            <span class="sp-hint">
              <a href="profile-addresses.html">مدیریت همه آدرس‌ها</a>
            </span>
          </label>

          <button type="submit" class="sp-btn sp-btn--primary sp-btn--lg">ذخیره تغییرات</button>
        </form>
      </div>

      <div class="sp-stat-row">
        <div class="sp-stat"><b>۲۴</b><span>سفارش ثبت‌شده</span></div>
        <div class="sp-stat"><b>۳</b><span>آدرس ذخیره‌شده</span></div>
        <div class="sp-stat"><b>۲۴۰,۰۰۰</b><span>اعتبار کیف پول (تومان)</span></div>
        <div class="sp-stat"><b>۱,۸۴۰,۰۰۰</b><span>مجموع صرفه‌جویی (تومان)</span></div>
      </div>"""
    return _shell("profile.html", "اطلاعات حساب", body)


# ==========================================================================
# Profile — orders
# ==========================================================================

ORDERS = [
    {
        "code": "SP-۱۴۰۵۰۳۱۲",
        "status": "در حال آماده‌سازی",
        "tone": "warning",
        "date": "امروز، ۱۴:۲۰",
        "store": "سوپرمارکت لوکس - جردن",
        "items": 7,
        "total": "۴۵۴,۰۰۰",
        "progress": 2,
    },
    {
        "code": "SP-۱۴۰۵۰۲۸۹",
        "status": "تحویل شده",
        "tone": "success",
        "date": "۱۲ خرداد، ۱۹:۰۵",
        "store": "سوپرمارکت ایثار - جردن",
        "items": 12,
        "total": "۸۹۲,۵۰۰",
        "progress": 5,
    },
    {
        "code": "SP-۱۴۰۵۰۲۴۱",
        "status": "تحویل شده",
        "tone": "success",
        "date": "۵ خرداد، ۱۰:۳۰",
        "store": "سوپرمارکت ظفر - آرش",
        "items": 4,
        "total": "۲۱۶,۸۰۰",
        "progress": 5,
    },
    {
        "code": "SP-۱۴۰۵۰۱۹۷",
        "status": "لغو شده",
        "tone": "danger",
        "date": "۲۸ اردیبهشت، ۲۱:۴۰",
        "store": "سوپرمارکت روژان - جردن",
        "items": 3,
        "total": "۱۳۰,۰۰۰",
        "progress": 0,
    },
]

ORDER_STEPS = ["ثبت سفارش", "تأیید فروشگاه", "جمع‌آوری", "ارسال", "تحویل"]


def orders() -> str:
    cards = []
    for o in ORDERS:
        tone = {
            "success": "sp-badge--success",
            "warning": "sp-badge--warning",
            "danger": "sp-badge--discount",
        }[o["tone"]]

        steps = "".join(
            f'<li class="{"is-done" if i < o["progress"] else ""}"><span></span>{label}</li>'
            for i, label in enumerate(ORDER_STEPS)
        )
        tracker = (
            f'<ol class="sp-track">{steps}</ol>' if o["tone"] != "danger" else ""
        )

        cards.append(f"""
        <article class="sp-order">
          <header class="sp-order-head">
            <div>
              <div class="sp-order-code">کد سفارش: {o['code']}</div>
              <div class="sp-order-meta">
                {icon("store", 14)}<span>{o['store']}</span>
                <span class="sp-breadcrumb-sep">·</span>
                {icon("clock", 14)}<span>{o['date']}</span>
              </div>
            </div>
            <span class="sp-badge {tone}">{o['status']}</span>
          </header>

          {tracker}

          <footer class="sp-order-foot">
            <div class="sp-order-sum">
              <span>{fa(o['items'])} کالا</span>
              <span class="sp-breadcrumb-sep">·</span>
              <b>{o['total']} تومان</b>
            </div>
            <div class="sp-order-actions">
              <a href="product.html" class="sp-btn sp-btn--ghost sp-btn--sm">جزئیات سفارش</a>
              <button type="button" class="sp-btn sp-btn--soft sp-btn--sm">خرید مجدد</button>
            </div>
          </footer>
        </article>""")

    body = f"""
      <div class="sp-section-head">
        <h1 class="sp-section-title">سفارش‌های من</h1>
      </div>

      <div class="sp-chip-row" style="margin-block-end:16px">
        <button type="button" class="sp-chip is-active">همه</button>
        <button type="button" class="sp-chip">جاری</button>
        <button type="button" class="sp-chip">تحویل شده</button>
        <button type="button" class="sp-chip">لغو شده</button>
      </div>

      <div class="sp-orders">{"".join(cards)}</div>"""
    return _shell("profile-orders.html", "سفارش‌های من", body)


# ==========================================================================
# Profile — addresses
# ==========================================================================

ADDRESSES = [
    ("خانه", "home", "تهران، محله زرگنده، شریعتی، سیما جنوبی، پلاک ۸، طبقه ۳",
     "زهرا احمدی · ۰۹۳۹۹۹۹۹۹۹۹", True, True),
    ("محل کار", "briefcase", "تهران، جردن، بلوار نلسون ماندلا، پلاک ۲۴، واحد ۱۱",
     "زهرا احمدی · ۰۹۳۹۹۹۹۹۹۹۹", False, True),
    ("خانه پدری", "pin", "قم، سعادتی، بلوار جمهوری اسلامی، خیابان وطن‌دوست، پلاک ۹",
     "محمد احمدی · ۰۹۱۲۰۰۰۰۰۰۰", False, False),
]


def addresses() -> str:
    cards = "".join(
        f"""
        <article class="sp-address-card {"is-default" if is_default else ""} {"" if in_range else "is-out"}">
          <div class="sp-address-card-head">
            <span class="sp-address-icon">{icon(ico, 20)}</span>
            <b>{title}</b>
            {'<span class="sp-badge sp-badge--brand">پیش‌فرض</span>' if is_default else ''}
            {'' if in_range else '<span class="sp-badge sp-badge--discount">خارج از محدوده</span>'}
          </div>
          <p class="sp-address-text">{text}</p>
          <p class="sp-address-person">{icon("user", 15)}<span>{person}</span></p>
          <div class="sp-address-card-foot">
            <a href="address-add.html" class="sp-btn sp-btn--ghost sp-btn--sm">ویرایش</a>
            <a href="address-map.html" class="sp-btn sp-btn--ghost sp-btn--sm">
              {icon("pin", 15)}<span>روی نقشه</span>
            </a>
            <button type="button" class="sp-btn sp-btn--danger sp-btn--sm" aria-label="حذف آدرس">
              {icon("trash", 15)}<span>حذف</span>
            </button>
          </div>
        </article>"""
        for title, ico, text, person, is_default, in_range in ADDRESSES
    )

    body = f"""
      <div class="sp-card sp-card-pad" style="margin-block-end:16px">
        <div class="sp-section-head" style="margin:0">
          <div>
            <h1 class="sp-section-title">آدرس‌های من</h1>
            <div class="sp-section-sub">
              {fa(len(ADDRESSES))} آدرس ذخیره شده - آدرس پیش‌فرض هنگام تسویه انتخاب می‌شود.
            </div>
          </div>
          <a href="address-add.html" class="sp-btn sp-btn--primary sp-btn--sm">
            {icon("plus", 16)}<span>افزودن آدرس</span>
          </a>
        </div>
      </div>

      <div class="sp-address-grid">{cards}</div>

      <div class="sp-out-of-range">
        {icon("info", 18)}
        <div>
          <b>آدرس خارج از محدوده</b>
          <span>
            آدرس‌هایی که خارج از محدوده‌ی سرویس‌دهی هستند هنگام تسویه قابل
            انتخاب نیستند. برای اطلاع از گسترش محدوده با پشتیبانی در تماس باشید.
          </span>
        </div>
      </div>"""
    return _shell("profile-addresses.html", "آدرس‌ها", body)


# ==========================================================================
# Support
# ==========================================================================

FAQ = [
    ("هزینه ارسال چقدر است و چطور محاسبه می‌شود؟",
     "هزینه ارسال را فروشگاه مبدأ و فاصله‌ی آن تا آدرس شما تعیین می‌کند و پیش از "
     "پرداخت، دقیق در صورتحساب نمایش داده می‌شود. اعضای پرو برای سفارش‌های بالای "
     "۲۵۰ هزار تومان ارسال رایگان دارند."),
    ("اگر کالایی در فروشگاه موجود نباشد چه می‌شود؟",
     "در مرحله‌ی انتخاب فروشگاه، اقلام ناموجود هر فروشگاه با علامت خاکستری و برچسب "
     "«ناموجود» مشخص می‌شوند. می‌توانید برای آن‌ها جایگزین انتخاب کنید یا فروشگاه "
     "دیگری را که همه‌ی سبد را پوشش می‌دهد انتخاب کنید."),
    ("قیمت‌ها با قیمت درب فروشگاه تفاوت دارد؟",
     "خیر. قیمت هر کالا همان قیمت درج‌شده در همان فروشگاه است و بابت جمع‌آوری سفارش "
     "هیچ مبلغی به آن اضافه نمی‌شود. تنها هزینه‌های جانبی، آماده‌سازی و ارسال است "
     "که جداگانه نمایش داده می‌شود."),
    ("امکان مرجوع کردن کالا وجود دارد؟",
     "بله. هنگام تحویل، سفارش را بررسی کنید؛ اگر کالایی آسیب‌دیده، اشتباه یا نزدیک "
     "به تاریخ انقضا بود، همان لحظه به پیک تحویل دهید. مبلغ آن ظرف ۲۴ ساعت به کیف "
     "پول شما بازمی‌گردد."),
    ("سفارش را چطور پیگیری کنم؟",
     "از بخش «سفارش‌های من» در حساب کاربری، وضعیت لحظه‌ای هر سفارش را می‌بینید: "
     "تأیید فروشگاه، جمع‌آوری، ارسال و تحویل."),
    ("دریافت حضوری چه تفاوتی با ارسال دارد؟",
     "در دریافت حضوری، فروشگاه سبد شما را آماده می‌کند و خودتان تحویل می‌گیرید. "
     "هزینه‌ی ارسال حذف می‌شود و زمان آماده‌سازی معمولاً کمتر از ۱۵ دقیقه است."),
]


def support() -> str:
    items = "".join(
        f"""
        <div class="sp-faq-item" x-data="{{ open: {str(i == 0).lower()} }}">
          <button type="button" class="sp-faq-q" @click="open = !open" :aria-expanded="open">
            <span>{q}</span>
            <span class="sp-accordion-chevron" :class="{{ 'is-open': open }}">
              {icon("chevron-down", 18)}
            </span>
          </button>
          <div class="sp-faq-a" x-show="open" x-collapse><p>{a}</p></div>
        </div>"""
        for i, (q, a) in enumerate(FAQ)
    )

    return f"""
      <div class="sp-container">
        {breadcrumb([("home-1-fresh.html", "خانه"), ("support.html", "پشتیبانی")])}

        <section class="sp-support-hero">
          <h1 class="sp-hero-title" style="font-size:clamp(1.5rem,3vw,2rem)">
            چطور می‌توانیم کمک کنیم؟
          </h1>
          <p class="sp-hero-lead" style="margin-inline:auto;text-align:center">
            پاسخ بیشتر پرسش‌ها همین‌جاست. اگر جواب خود را پیدا نکردید، فرم پایین
            صفحه را پر کنید - معمولاً زیر ۲ ساعت پاسخ می‌دهیم.
          </p>
          <div class="sp-support-channels">
            <a href="tel:+982100000000" class="sp-support-channel">
              {icon("phone", 24)}<b>تماس تلفنی</b><span>۰۲۱-۰۰۰۰۰۰۰۰ · ۲۴ ساعته</span>
            </a>
            <a href="#contact" class="sp-support-channel">
              {icon("mail", 24)}<b>ارسال پیام</b><span>پاسخ زیر ۲ ساعت کاری</span>
            </a>
            <a href="profile-orders.html" class="sp-support-channel">
              {icon("box", 24)}<b>پیگیری سفارش</b><span>وضعیت لحظه‌ای سفارش‌ها</span>
            </a>
          </div>
        </section>

        <div class="sp-shell">
          <section>
            <div class="sp-section-head">
              <h2 class="sp-section-title">پرسش‌های متداول</h2>
            </div>
            <div class="sp-faq">{items}</div>
          </section>

          <aside class="sp-card sp-card-pad sp-sticky" id="contact">
            <h2 class="sp-section-title" style="margin-block-end:14px">ارسال پیام</h2>
            <form @submit.prevent="notify('پیام شما ارسال شد')">
              <label class="sp-field">
                <span class="sp-label">نام و نام خانوادگی <span class="sp-req">*</span></span>
                <input type="text" class="sp-input" required />
              </label>
              <label class="sp-field">
                <span class="sp-label">شماره موبایل <span class="sp-req">*</span></span>
                <input type="tel" class="sp-input" inputmode="tel" maxlength="11" required />
              </label>
              <label class="sp-field">
                <span class="sp-label">موضوع</span>
                <select class="sp-select">
                  <option>پیگیری سفارش</option>
                  <option>مشکل در پرداخت</option>
                  <option>کیفیت کالا</option>
                  <option>همکاری با فروشگاه‌ها</option>
                  <option>سایر</option>
                </select>
              </label>
              <label class="sp-field">
                <span class="sp-label">متن پیام <span class="sp-req">*</span></span>
                <textarea class="sp-textarea" required
                          placeholder="توضیح کوتاهی از موضوع بنویسید"></textarea>
              </label>
              <button type="submit" class="sp-btn sp-btn--primary sp-btn--block sp-btn--lg">
                ارسال پیام
              </button>
              <p class="sp-hint" style="text-align:center;margin-block-start:10px">
                این فرم نمونه است و پیامی به سرور ارسال نمی‌کند.
              </p>
            </form>
          </aside>
        </div>
      </div>"""
