"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, Palette, Shield } from "lucide-react"
import { useWebsiteTheme } from "@/providers/website-theme-provider"

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" },
]

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

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

  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={setColorTheme} 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>
  )
}