"use client";

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

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

export default function StyleControls({ settings, updateSettings }: StyleControlsProps) {
  const [copySuccess, setCopySuccess] = React.useState(false);

  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,
      },
    });
  };

  const copyLink = () => {
    // Mock token for now
    const url = `${window.location.origin}/overlay/mock-token`;
    navigator.clipboard.writeText(url);
    setCopySuccess(true);
    setTimeout(() => setCopySuccess(false), 2000);
  };

  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">
      
      {/* Copy Link Section */}
      <div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800 rounded-lg">
        <h3 className="text-xs font-semibold text-indigo-900 dark:text-indigo-200 uppercase tracking-wider mb-2">Overlay URL</h3>
        <div className="flex gap-2">
          <input 
            readOnly 
            value="/overlay/..." 
            className="flex-1 min-w-0 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded text-xs px-2 py-1 text-zinc-500"
          />
          <button 
            onClick={copyLink}
            className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs px-3 py-1 rounded transition-colors"
          >
            {copySuccess ? 'Copied!' : 'Copy'}
          </button>
        </div>
      </div>

      <div className="space-y-1">
        <h2 className="text-xl font-bold text-zinc-900 dark:text-white">Style Editor</h2>
        <p className="text-xs text-zinc-500">Customize your chat appearance</p>
      </div>

      {/* Resolution */}
      <div className="space-y-2">
        <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Base Resolution</label>
        <select
          name="resolution"
          value={settings.resolution}
          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="720p">720p (HD)</option>
          <option value="1080p">1080p (Full HD)</option>
        </select>
      </div>

      {/* 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>

      <SupportModule />
    </div>
  );
}