"use client";

import * as React from "react";
import { PaintBucket } from "lucide-react";
import { Button } from "@/components/ui/button";

export function applyCustomTheme(hex: string) {
  let c = hex.substring(1);
  if (c.length === 3) c = c.split('').map(x => x + x).join('');
  const r = parseInt(c.substr(0, 2), 16);
  const g = parseInt(c.substr(2, 2), 16);
  const b = parseInt(c.substr(4, 2), 16);

  const a = [r, g, b].map((v) => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  const luminance = a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;

  const isLight = luminance > 0.179;
  const root = document.documentElement;

  root.style.setProperty("--background", hex);
  
  if (isLight) {
    root.style.setProperty("--foreground", "#18181b");
    root.style.setProperty("--card", "rgba(255, 255, 255, 0.6)");
    root.style.setProperty("--card-foreground", "#18181b");
    root.style.setProperty("--border", "rgba(0, 0, 0, 0.1)");
    root.style.setProperty("--muted", "rgba(0, 0, 0, 0.05)");
    root.style.setProperty("--muted-foreground", "rgba(0, 0, 0, 0.6)");
    root.classList.remove("dark");
  } else {
    root.style.setProperty("--foreground", "#fafafa");
    root.style.setProperty("--card", "rgba(255, 255, 255, 0.05)");
    root.style.setProperty("--card-foreground", "#fafafa");
    root.style.setProperty("--border", "rgba(255, 255, 255, 0.1)");
    root.style.setProperty("--muted", "rgba(255, 255, 255, 0.1)");
    root.style.setProperty("--muted-foreground", "rgba(255, 255, 255, 0.6)");
    root.classList.add("dark");
  }
}

export function ThemeToggle() {
  const [mounted, setMounted] = React.useState(false);
  const [color, setColor] = React.useState("#09090b");

  React.useEffect(() => {
    setMounted(true);
    const saved = localStorage.getItem("custom-theme-color");
    if (saved) {
      setColor(saved);
      applyCustomTheme(saved);
    }
  }, []);

  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newColor = e.target.value;
    setColor(newColor);
    localStorage.setItem("custom-theme-color", newColor);
    applyCustomTheme(newColor);
  };

  if (!mounted) {
    return (
      <Button variant="outline" size="icon" className="h-9 w-9 opacity-50 relative overflow-hidden">
        <PaintBucket className="h-4 w-4" />
      </Button>
    );
  }

  return (
    <div className="relative inline-block">
      <Button
        variant="outline"
        size="icon"
        className="h-9 w-9 bg-card border-border relative overflow-hidden"
        style={{ backgroundColor: color }}
        title="Change theme color"
      >
        <PaintBucket className="h-4 w-4 mix-blend-difference text-white" />
        <input 
          type="color" 
          value={color} 
          onChange={handleColorChange}
          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
        />
      </Button>
    </div>
  );
}