حساب و تنظیماتِ اپ

"use client"

import * as React from "react"

import { BellIcon, ChevronLeftIcon, CreditCardIcon, GuideIcon, LogoutIcon, MoonIcon, ShieldCheckIcon, TicketIcon, UserIcon } from "@/components/icons"
import { AppBar, AppBarTitle } from "@/components/ui/app-bar"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Switch } from "@/components/ui/switch"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const GROUPS = [
  {
    title: "حساب",
    items: [
      { label: "اطلاعاتِ شخصی", icon: <UserIcon /> },
      { label: "کارت‌های بانکی", icon: <CreditCardIcon />, value: toFaDigits(2) },
      { label: "امنیت و ورود", icon: <ShieldCheckIcon /> },
    ],
  },
  {
    title: "پشتیبانی",
    items: [
      { label: "درخواست‌های من", icon: <TicketIcon /> },
      { label: "راهنما", icon: <GuideIcon /> },
    ],
  },
]

/**
 * پروفایل و تنظیماتِ اپ: سربرگ با عکس، نام و ویرایش؛ گروه‌های فهرستی ردیف‌کامل‌لمسی با
 * آیکون و فلش، سوییچ‌های اعلان و حالتِ شب در همان ردیف، و خروج جدا در پایین.
 */
export default function MobileProfileBlock() {
  const [notify, setNotify] = React.useState(true)
  const [dark, setDark] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <div className="mx-auto flex min-h-svh w-full max-w-md flex-col bg-subtle">
        <AppBar sticky className="bg-subtle">
          <AppBarTitle>حسابِ من</AppBarTitle>
        </AppBar>

        <main className="flex flex-1 flex-col gap-6 p-4">
          <section className="flex items-center gap-4 rounded-xl bg-card p-4">
            <Avatar size="lg" alt="مهسا کریمی" src={stockImages.personWoman1.src} className="size-16" />
            <div className="flex flex-1 flex-col">
              <span className="text-lg font-bold">مهسا کریمی</span>
              <bdi dir="ltr" className="text-start text-sm text-muted-foreground">
                {toFaDigits("0912 123 4567")}
              </bdi>
            </div>
            <Button variant="outline">ویرایش</Button>
          </section>

          {GROUPS.map((group) => (
            <section key={group.title} aria-labelledby={`group-${group.title}`} className="flex flex-col gap-2">
              <h2 id={`group-${group.title}`} className="px-2 text-sm font-medium text-muted-foreground">
                {group.title}
              </h2>
              <ul className="flex flex-col divide-y divide-border overflow-hidden rounded-xl bg-card">
                {group.items.map((item) => (
                  <li key={item.label}>
                    <a href="#" className="flex min-h-14 items-center gap-3 px-4 hover:bg-muted">
                      <span aria-hidden className="text-muted-foreground [&>svg]:size-5">
                        {item.icon}
                      </span>
                      <span className="flex-1">{item.label}</span>
                      {item.value && <span className="text-sm text-muted-foreground">{item.value}</span>}
                      <ChevronLeftIcon aria-hidden className="size-5 text-muted-foreground ltr:rotate-180" />
                    </a>
                  </li>
                ))}
              </ul>
            </section>
          ))}

          <section aria-labelledby="group-settings" className="flex flex-col gap-2">
            <h2 id="group-settings" className="px-2 text-sm font-medium text-muted-foreground">
              تنظیمات
            </h2>
            <ul className="flex flex-col divide-y divide-border overflow-hidden rounded-xl bg-card">
              <li className="flex min-h-14 items-center gap-3 px-4">
                <BellIcon aria-hidden className="size-5 text-muted-foreground" />
                <label htmlFor="notify" className="flex-1">
                  اعلان‌ها
                </label>
                <Switch id="notify" checked={notify} onCheckedChange={setNotify} />
              </li>
              <li className="flex min-h-14 items-center gap-3 px-4">
                <MoonIcon aria-hidden className="size-5 text-muted-foreground" />
                <label htmlFor="dark" className="flex-1">
                  حالتِ شب
                </label>
                <Switch id="dark" checked={dark} onCheckedChange={setDark} />
              </li>
            </ul>
          </section>

          <Button variant="outline" color="destructive" fullWidth className="mt-2 bg-card">
            <LogoutIcon />
            خروج از حساب
          </Button>
          <p className="text-center text-xs text-muted-foreground">نسخهٔ {toFaDigits("3.2.0")}</p>
        </main>
      </div>
    </ControlSizeProvider>
  )
}