Settings

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"

// One settings row: name and description on the left, a switch or similar on the right
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>
  )
}

// ① Treat it as saved immediately and show a toast (in a real app, send it to the server here)
function saved(message: string) {
  toast.success(message)
}

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

  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Label>Language</Label>
        <Select
          value={language}
          onValueChange={(value) => {
            setLanguage(value)
            saved("Language changed")
          }}
        >
          <SelectTrigger className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="ja">Japanese</SelectItem>
            <SelectItem value="en">English</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <DeleteAccount />
    </div>
  )
}

// ② For an action that can't be undone, require typing "DELETE" in a confirmation dialog
function DeleteAccount() {
  const [open, setOpen] = useState(false)
  const [confirmText, setConfirmText] = useState("")

  function onDelete() {
    setOpen(false)
    setConfirmText("")
    toast.success("Account deleted (this is a demo, so nothing was actually deleted)")
  }

  return (
    <div className="rounded-lg border border-destructive/30 p-4">
      <p className="text-sm font-medium text-destructive">Delete account</p>
      <p className="mt-1 text-xs text-muted-foreground">All your data will be erased. This can't be undone.</p>

      <Dialog
        open={open}
        onOpenChange={(isOpen) => {
          setOpen(isOpen)
          // Clear the typed text when the dialog closes
          if (!isOpen) setConfirmText("")
        }}
      >
        <DialogTrigger asChild>
          <Button size="sm" className="mt-3 bg-red-600 text-white hover:bg-red-700">
            Delete account
          </Button>
        </DialogTrigger>
        <DialogContent className="p-6">
          <DialogHeader>
            <DialogTitle className="text-lg font-semibold">Delete your account?</DialogTitle>
            <DialogDescription>
              All your data will be erased. This can't be undone. Type DELETE to continue.
            </DialogDescription>
          </DialogHeader>
          <Input value={confirmText} onChange={(e) => setConfirmText(e.target.value)} placeholder="DELETE" />
          <DialogFooter className="mx-0 mb-0 border-t-0 bg-transparent p-0 pt-2">
            <DialogClose asChild>
              <Button variant="outline">Cancel</Button>
            </DialogClose>
            <Button className="bg-red-600 text-white hover:bg-red-700" disabled={confirmText !== "DELETE"} onClick={onDelete}>
              Delete
            </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="Email notifications" description="Get updates by email">
          <Switch
            checked={email}
            onCheckedChange={(on) => {
              setEmail(on)
              saved(on ? "Email notifications on" : "Email notifications off")
            }}
          />
        </SettingRow>
        <SettingRow title="Push notifications" description="Get notifications on your phone">
          <Switch
            checked={push}
            onCheckedChange={(on) => {
              setPush(on)
              saved(on ? "Push notifications on" : "Push notifications off")
            }}
          />
        </SettingRow>
        <SettingRow title="Weekly summary" description="Get a summary of your week every Monday">
          <Switch
            checked={weekly}
            onCheckedChange={(on) => {
              setWeekly(on)
              saved(on ? "Weekly summary on" : "Weekly summary off")
            }}
          />
        </SettingRow>
      </div>
      <p className="mt-3 text-xs text-muted-foreground">Changes are saved automatically</p>
    </div>
  )
}

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

  // Apply the chosen theme to this screen (toggle the 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="Theme" description="Light, dark, or match your system">
      <Select
        value={theme}
        onValueChange={(value) => {
          setTheme(value)
          applyTheme(value)
          saved("Theme changed")
        }}
      >
        <SelectTrigger className="w-40">
          <SelectValue />
        </SelectTrigger>
        <SelectContent position="popper">
          <SelectItem value="light">Light</SelectItem>
          <SelectItem value="dark">Dark</SelectItem>
          <SelectItem value="system">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">Settings</p>

      {/* ③ Split the settings into tabs by type */}
      <Tabs defaultValue="notifications" className="mt-4">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="account">Account</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="display">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>
  )
}