"use client"

import { Monitor, Moon, Sun, Globe } from "lucide-react"
import { useTheme } from "next-themes"
import { useTranslations } from "next-intl"

import { LocaleSwitcher } from "@/shared/components/locale-switcher"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Label } from "@/shared/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"

type ThemeChoice = "system" | "light" | "dark"

/**
 * 外观偏好卡片
 *
 * 包含主题切换（system/light/dark）和语言切换。
 * 语言切换复用 shared/components/locale-switcher 组件。
 */
export function ThemePreferencesCard(): React.ReactElement {
  const t = useTranslations("settings.appearance.theme")
  const tLang = useTranslations("settings.appearance.language")
  const { theme, setTheme } = useTheme()

  const value: ThemeChoice = theme === "light" || theme === "dark" || theme === "system" ? theme : "system"

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("title")}</CardTitle>
        <CardDescription>{t("description")}</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4 sm:max-w-md">
        <div className="space-y-2">
          <Label htmlFor="theme">{t("label")}</Label>
          <Select value={value} onValueChange={(v) => setTheme(v)}>
            <SelectTrigger id="theme" suppressHydrationWarning>
              <SelectValue placeholder={t("title")} />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="system">
                <div className="flex items-center gap-2">
                  <Monitor className="h-4 w-4 text-muted-foreground" />
                  {t("system")}
                </div>
              </SelectItem>
              <SelectItem value="light">
                <div className="flex items-center gap-2">
                  <Sun className="h-4 w-4 text-muted-foreground" />
                  {t("light")}
                </div>
              </SelectItem>
              <SelectItem value="dark">
                <div className="flex items-center gap-2">
                  <Moon className="h-4 w-4 text-muted-foreground" />
                  {t("dark")}
                </div>
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="language" className="flex items-center gap-1.5">
            <Globe className="h-3.5 w-3.5 text-muted-foreground" />
            {tLang("label")}
          </Label>
          <div id="language">
            <LocaleSwitcher />
          </div>
          <p className="text-xs text-muted-foreground">{tLang("description")}</p>
        </div>
      </CardContent>
    </Card>
  )
}