"use client";

import React from 'react';
import { OverlaySettings } from '@/lib/types';

interface StyleControlsProps {
  settings: OverlaySettings;
  updateSettings: (newSettings: Partial<OverlaySettings>) => void;
}

export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    let newValue: string | number | boolean = value;

    if (type === 'range') {
      newValue = parseFloat(value);
    } else if (type === 'checkbox') {
      newValue = (e.target as HTMLInputElement).checked;
    }

    updateSettings({ [name]: newValue });
  };

  const handleEmoteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, checked } = e.target;
    updateSettings({
      emotes: {
        ...settings.emotes,
        [name]: checked,
      },
    });
  };

  return (
    <div className="flex flex-col gap-6 p-6 bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 h-full overflow-y-auto w-80 shrink-0">
      <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>

      {/* Font Family */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Family</label>
        <select
          name="fontFamily"
          value={settings.fontFamily}
          onChange={handleChange}
          className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
        >
          <option value="Inter, sans-serif">Inter</option>
          <option value="Roboto, sans-serif">Roboto</option>
          <option value="'Open Sans', sans-serif">Open Sans</option>
          <option value="Lato, sans-serif">Lato</option>
          <option value="Montserrat, sans-serif">Montserrat</option>
          <option value="'Press Start 2P', cursive">Pixel Art</option>
        </select>
      </div>

      {/* Font Size */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Font Size</label>
        <div className="flex items-center gap-2">
          <input
            type="text"
            name="fontSize"
            value={settings.fontSize}
            onChange={handleChange}
            className="w-full p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white"
          />
        </div>
      </div>

      {/* Text Color */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Text Color</label>
        <div className="flex items-center gap-2">
          <input
            type="color"
            name="textColor"
            value={settings.textColor}
            onChange={handleChange}
            className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
          />
          <input
            type="text"
            name="textColor"
            value={settings.textColor}
            onChange={handleChange}
            className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
          />
        </div>
      </div>

      {/* Background Color */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Background Color</label>
        <div className="flex items-center gap-2">
          <input
            type="color"
            name="backgroundColor"
            value={settings.backgroundColor}
            onChange={handleChange}
            className="h-10 w-10 p-0 border-0 rounded overflow-hidden cursor-pointer"
          />
          <input
            type="text"
            name="backgroundColor"
            value={settings.backgroundColor}
            onChange={handleChange}
            className="flex-1 p-2 border rounded-md bg-zinc-50 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white uppercase"
          />
        </div>
      </div>

      {/* Background Opacity */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300 flex justify-between">
          <span>Opacity</span>
          <span>{Math.round(settings.backgroundOpacity * 100)}%</span>
        </label>
        <input
          type="range"
          name="backgroundOpacity"
          min="0"
          max="1"
          step="0.01"
          value={settings.backgroundOpacity}
          onChange={handleChange}
          className="w-full accent-indigo-600 cursor-pointer"
        />
      </div>

      {/* Toggles */}
      <div className="space-y-4 pt-4 border-t border-zinc-200 dark:border-zinc-800">
        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            name="showBadges"
            checked={settings.showBadges}
            onChange={handleChange}
            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
          />
          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Show Badges</span>
        </label>

        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            name="bttv"
            checked={settings.emotes.bttv}
            onChange={handleEmoteChange}
            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
          />
          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">BTTV Emotes</span>
        </label>

        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            name="seventv"
            checked={settings.emotes.seventv}
            onChange={handleEmoteChange}
            className="w-5 h-5 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500"
          />
          <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300">7TV Emotes</span>
        </label>
      </div>
    </div>
  );
}