تنظیمات

"use client"

import * as React from "react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Label } from "@/components/ui/label"
import { PasswordField } from "@/components/ui/password-field"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/toast"

const NOTIFICATIONS = [
  { id: "orders", label: "وضعیت سفارش‌ها", description: "پیامک هنگام ارسال و تحویل", on: true },
  { id: "offers", label: "پیشنهادها و تخفیف‌ها", description: "ایمیل هفتگی", on: false },
  { id: "login", label: "ورود از دستگاه تازه", description: "هشدار فوری امنیتی", on: true },
]

export default function SettingsBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto w-full max-w-2xl p-4 sm:p-6">
        <header className="mb-8">
          <div className="flex flex-col gap-1">
            <h1 className="text-2xl font-bold">تنظیمات</h1>
            <p className="text-sm text-muted-foreground">اعلان‌ها، ترجیحات نمایش و امنیت حساب.</p>
          </div>
        </header>
        <ControlSizeProvider size="xl">
          <Tabs defaultValue="notifications" className="gap-4">
            <TabsList>
              <TabsTrigger value="notifications">اعلان‌ها</TabsTrigger>
              <TabsTrigger value="preferences">ترجیحات</TabsTrigger>
              <TabsTrigger value="security">امنیت</TabsTrigger>
            </TabsList>

            <TabsContent value="notifications">
              <Card>
                <CardHeader>
                  <CardTitle>اعلان‌ها</CardTitle>
                  <CardDescription>انتخاب کنید دربارهٔ چه چیزهایی باخبر شوید.</CardDescription>
                </CardHeader>
                <CardContent className="flex flex-col divide-y divide-border">
                  {NOTIFICATIONS.map((item) => (
                    <div key={item.id} className="flex items-center justify-between gap-4 py-3">
                      <div className="flex flex-col gap-1">
                        <Label htmlFor={`notify-${item.id}`}>{item.label}</Label>
                        <p className="text-xs text-muted-foreground">{item.description}</p>
                      </div>
                      <Switch
                        id={`notify-${item.id}`}
                        defaultChecked={item.on}
                        // پیام باید بگوید کدام تنظیم و به کدام حالت رفت، نه فقط «ذخیره شد».
                        onCheckedChange={(on) =>
                          on
                            ? toast.success(`«${item.label}» روشن شد.`, { description: item.description })
                            : toast(`«${item.label}» خاموش شد.`, { description: "دیگر برایش اعلانی نمی‌فرستیم." })
                        }
                      />
                    </div>
                  ))}
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="preferences">
              <Card>
                <CardHeader>
                  <CardTitle>ترجیحات</CardTitle>
                </CardHeader>
                <CardContent className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                  <div className="flex flex-col gap-2">
                    <Label id="calendar-label">تقویم</Label>
                    <Select name="calendar" defaultValue="jalali">
                      <SelectTrigger aria-labelledby="calendar-label" className="w-full">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="jalali">شمسی</SelectItem>
                        <SelectItem value="gregorian">میلادی</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="flex flex-col gap-2">
                    <Label id="currency-label">واحد پول</Label>
                    <Select name="currency" defaultValue="toman">
                      <SelectTrigger aria-labelledby="currency-label" className="w-full">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="toman">تومان</SelectItem>
                        <SelectItem value="rial">ریال</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </CardContent>
                <CardFooter className="justify-end">
                  <Button onClick={() => toast.success("ترجیحات ذخیره شد.")}>ذخیره</Button>
                </CardFooter>
              </Card>
            </TabsContent>

            <TabsContent value="security" className="flex flex-col gap-4">
              <Card>
                <CardHeader>
                  <CardTitle>تغییر رمز عبور</CardTitle>
                </CardHeader>
                <CardContent className="flex flex-col gap-4">
                  <PasswordField label="رمز فعلی" autoComplete="current-password" required />
                  <PasswordField label="رمز تازه" autoComplete="new-password" strength requirements required />
                </CardContent>
                <CardFooter className="justify-end">
                  <Button onClick={() => toast.success("رمز عبور تغییر کرد.")}>تغییر رمز</Button>
                </CardFooter>
              </Card>
              <Card className="border-destructive">
                <CardHeader>
                  <CardTitle>حذف حساب</CardTitle>
                  <CardDescription>همهٔ اطلاعات شما برای همیشه پاک می‌شود.</CardDescription>
                </CardHeader>
                <CardFooter>
                  <AlertDialog>
                    <AlertDialogTrigger asChild>
                      <Button variant="outline" color="destructive">
                        حذف حساب
                      </Button>
                    </AlertDialogTrigger>
                    <ControlSizeProvider size="xl" asChild>
                      <AlertDialogContent>
                        <AlertDialogHeader>
                          <AlertDialogTitle>حساب حذف شود؟</AlertDialogTitle>
                          <AlertDialogDescription>این کار قابل بازگشت نیست.</AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel>انصراف</AlertDialogCancel>
                          <AlertDialogAction variant="destructive">حذف حساب</AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </ControlSizeProvider>
                  </AlertDialog>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </ControlSizeProvider>
      </main>
    </ControlSizeProvider>
  )
}