Newbie_CRM/src/components/settings/theme-settings.tsx

"use client"

import { useEffect, useState } from "react"
import { useTheme } from "next-themes"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { cn } from "@/lib/utils"
import { Sun, Moon, Monitor, Shield } from "lucide-react"
import { useWebsiteTheme } from "@/providers/website-theme-provider"

const COLOR_THEME_KEY = "crm-color-theme"

const modeOptions = [
  { value: "light", icon: Sun, label: "Light" },
  { value: "dark", icon: Moon, label: "Dark" },
  { value: "system", icon: Monitor, label: "System" },
]

const themeOptions = [
  { value: "default", label: "Default", color: "bg-blue-600", ring: "ring-blue-600" },
  { value: "ocean", label: "Ocean", color: "bg-teal-500", ring: "ring-teal-500" },
  { value: "forest", label: "Forest", color: "bg-green-600", ring: "ring-green-600" },
  { value: "sunset", label: "Sunset", color: "bg-orange-500", ring: "ring-orange-500" },
  { value: "midnight", label: "Midnight", color: "bg-indigo-600", ring: "ring-indigo-600" },
  { value: "rose", label: "Rose", color: "bg-pink-600", ring: "ring-pink-600" },
  { value: "amber", label: "Amber", color: "bg-amber-500", ring: "ring-amber-500" },
  { value: "violet", label: "Violet", color: "bg-violet-600", ring: "ring-violet-600" },
  { value: "slate", label: "Slate", color: "bg-slate-500", ring: "ring-slate-500" },
  { value: "ruby", label: "Ruby", color: "bg-red-600", ring: "ring-red-600" },
]

const backgroundOptions = [
  { value: "default", label: "Default", icon: Shield, color: "bg-zinc-500", ring: "ring-zinc-500", desc: "Standard CRM appearance" },
  { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
]

function getStoredColorTheme(): string {
  if (typeof window === "undefined") return "default"
  return localStorage.getItem(COLOR_THEME_KEY) || "default"
}

function applyColorTheme(theme: string) {
  document.documentElement.className = document.documentElement.className
    .replace(/\b(default|ocean|forest|sunset|midnight|rose|amber|violet|slate|ruby)\b/g, "")
    .trim()
  if (theme !== "default") {
    document.documentElement.classList.add(theme)
  }
  localStorage.setItem(COLOR_THEME_KEY, theme)
}

export function ThemeSettings() {
  const { theme, setTheme } = useTheme()
  const { websiteTheme, setWebsiteTheme } = useWebsiteTheme()
  const [colorTheme, setColorTheme] = useState("default")
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    setColorTheme(getStoredColorTheme())
    applyColorTheme(getStoredColorTheme())
  }, [])

  function handleColorChange(value: string) {
    setColorTheme(value)
    applyColorTheme(value)
  }

  if (!mounted) return null

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Theme Mode</CardTitle>
          <CardDescription>
            Choose your preferred appearance mode.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <RadioGroup value={theme || "dark"} onValueChange={setTheme} className="grid grid-cols-3 gap-4">
            {modeOptions.map(({ value, icon: Icon, label }) => (
              <div key={value}>
                <RadioGroupItem value={value} id={`mode-${value}`} className="peer sr-only" />
                <Label
                  htmlFor={`mode-${value}`}
                  className={cn(
                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
                  )}
                >
                  <Icon className="h-6 w-6" />
                  <span className="text-sm font-medium">{label}</span>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Color Theme</CardTitle>
          <CardDescription>
            Select a color accent for the dashboard.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <RadioGroup value={colorTheme} onValueChange={handleColorChange} className="grid grid-cols-5 gap-4">
            {themeOptions.map(({ value, label, color, ring }) => (
              <div key={value}>
                <RadioGroupItem value={value} id={`color-${value}`} className="peer sr-only" />
                <Label
                  htmlFor={`color-${value}`}
                  className={cn(
                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
                  )}
                >
                  <div className={cn("h-8 w-8 rounded-full", color, ring, "ring-2 ring-offset-2 ring-offset-background")} />
                  <span className="text-sm font-medium">{label}</span>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Color Theme for Background</CardTitle>
          <CardDescription>
            Choose the website background theme.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <RadioGroup value={websiteTheme} onValueChange={setWebsiteTheme} className="grid grid-cols-2 gap-4">
            {backgroundOptions.map(({ value, label, icon: Icon, color, ring, desc }) => (
              <div key={value}>
                <RadioGroupItem value={value} id={`bg-${value}`} className="peer sr-only" />
                <Label
                  htmlFor={`bg-${value}`}
                  className={cn(
                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
                  )}
                >
                  <Icon className="h-6 w-6" />
                  <div className={cn("h-8 w-8 rounded-full", color, ring, "ring-2 ring-offset-2 ring-offset-background")} />
                  <span className="text-sm font-medium">{label}</span>
                  <span className="text-xs text-muted-foreground">{desc}</span>
                </Label>
              </div>
            ))}
          </RadioGroup>
        </CardContent>
      </Card>
    </div>
  )
}