設定頁面

import { useState } from "react"
import { toast } from "sonner"
import { Button } from "./components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./components/ui/dialog"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"
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 { Toaster } from "./components/ui/sonner"

// 一列設定：左邊是名稱和說明，右邊是開關等元件
function SettingRow({ title, description, children }: { title: string; description: string; children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-between gap-4 py-3">
      <div>
        <p className="text-sm font-medium">{title}</p>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
      {children}
    </div>
  )
}

// ① 一操作就當作已儲存，並跳出通知（實際專案會在這裡傳送到伺服器）
function saved(message: string) {
  toast.success(message)
}

function AccountTab() {
  const [language, setLanguage] = useState("ja")

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label>語言</Label>
        <Select
          value={language}
          onValueChange={(value) => {
            setLanguage(value)
            saved("語言已變更")
          }}
        >
          <SelectTrigger className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="ja">日文</SelectItem>
            <SelectItem value="en">English</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <DeleteAccount />
    </div>
  )
}

// ② 無法復原的操作，要先在確認對話框中輸入「刪除」
function DeleteAccount() {
  const [open, setOpen] = useState(false)
  const [confirmText, setConfirmText] = useState("")

  function onDelete() {
    setOpen(false)
    setConfirmText("")
    toast.success("帳號已刪除（這是示範，不會真的刪除）")
  }

  return (
    <div className="rounded-lg border border-destructive/30 p-4">
      <p className="text-sm font-medium text-destructive">刪除帳號</p>
      <p className="mt-1 text-xs text-muted-foreground">所有資料都會被清除，且無法復原</p>

      <Dialog
        open={open}
        onOpenChange={(isOpen) => {
          setOpen(isOpen)
          // 關閉時清空已輸入的文字
          if (!isOpen) setConfirmText("")
        }}
      >
        <DialogTrigger asChild>
          <Button size="sm" className="mt-3 bg-red-600 text-white hover:bg-red-700">
            刪除帳號
          </Button>
        </DialogTrigger>
        <DialogContent className="p-6">
          <DialogHeader>
            <DialogTitle className="text-lg font-semibold">確定要刪除嗎？</DialogTitle>
            <DialogDescription>
              所有資料都會被清除，且無法復原。請輸入「刪除」以繼續。
            </DialogDescription>
          </DialogHeader>
          <Input value={confirmText} onChange={(e) => setConfirmText(e.target.value)} placeholder="刪除" />
          <DialogFooter className="mx-0 mb-0 border-t-0 bg-transparent p-0 pt-2">
            <DialogClose asChild>
              <Button variant="outline">取消</Button>
            </DialogClose>
            <Button className="bg-red-600 text-white hover:bg-red-700" disabled={confirmText !== "刪除"} onClick={onDelete}>
              刪除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

function NotificationsTab() {
  const [email, setEmail] = useState(true)
  const [push, setPush] = useState(false)
  const [weekly, setWeekly] = useState(true)

  return (
    <div>
      <div className="divide-y">
        <SettingRow title="電子郵件通知" description="透過電子郵件接收通知">
          <Switch
            checked={email}
            onCheckedChange={(on) => {
              setEmail(on)
              saved(on ? "已開啟電子郵件通知" : "已關閉電子郵件通知")
            }}
          />
        </SettingRow>
        <SettingRow title="推播通知" description="在手機上顯示通知">
          <Switch
            checked={push}
            onCheckedChange={(on) => {
              setPush(on)
              saved(on ? "已開啟推播通知" : "已關閉推播通知")
            }}
          />
        </SettingRow>
        <SettingRow title="每週摘要" description="每週一寄送上週的摘要">
          <Switch
            checked={weekly}
            onCheckedChange={(on) => {
              setWeekly(on)
              saved(on ? "已開啟每週摘要" : "已關閉每週摘要")
            }}
          />
        </SettingRow>
      </div>
      <p className="mt-3 text-xs text-muted-foreground">變更會立即儲存</p>
    </div>
  )
}

function DisplayTab() {
  const [theme, setTheme] = useState("light")

  // 把選擇的主題套用到畫面（加上或移除 dark 這個 class）
  function applyTheme(value: string) {
    const dark = value === "dark" || (value === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)
    document.documentElement.classList.toggle("dark", dark)
  }

  return (
    <SettingRow title="主題" description="淺色、深色或跟隨系統">
      <Select
        value={theme}
        onValueChange={(value) => {
          setTheme(value)
          applyTheme(value)
          saved("主題已變更")
        }}
      >
        <SelectTrigger className="w-40">
          <SelectValue />
        </SelectTrigger>
        <SelectContent position="popper">
          <SelectItem value="light">淺色</SelectItem>
          <SelectItem value="dark">深色</SelectItem>
          <SelectItem value="system">跟隨系統</SelectItem>
        </SelectContent>
      </Select>
    </SettingRow>
  )
}

export default function App() {
  return (
    <div className="mx-auto my-6 w-full max-w-md rounded-xl border bg-card p-6 text-card-foreground">
      <p className="text-lg font-semibold">設定</p>

      {/* ③ 用分頁依設定類型分開顯示 */}
      <Tabs defaultValue="notifications" className="mt-4">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="account">帳號</TabsTrigger>
          <TabsTrigger value="notifications">通知</TabsTrigger>
          <TabsTrigger value="display">顯示</TabsTrigger>
        </TabsList>
        <TabsContent value="account" className="mt-5">
          <AccountTab />
        </TabsContent>
        <TabsContent value="notifications" className="mt-3">
          <NotificationsTab />
        </TabsContent>
        <TabsContent value="display" className="mt-3">
          <DisplayTab />
        </TabsContent>
      </Tabs>

      <Toaster position="bottom-right" />
    </div>
  )
}