import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Settings } from 'lucide-react';

export function SettingsDialog({ settings, setSettings }: { settings: any, setSettings: any }) {
  return (
    <Dialog>
      <DialogTrigger render={<Button variant="outline" className="w-full justify-start gap-2 border-zinc-700 hover:bg-zinc-800 text-xs" />}>
        <Settings className="w-4 h-4" />
        Configuration
      </DialogTrigger>
      <DialogContent className="bg-zinc-950 text-zinc-200 border-zinc-800 max-w-md">
        <DialogHeader>
          <DialogTitle>System Configuration</DialogTitle>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Theme</label>
            <select 
              className="w-full bg-zinc-900 border border-zinc-800 rounded p-2 text-xs"
              value={settings.theme || 'default'}
              onChange={(e) => setSettings({...settings, theme: e.target.value})}
            >
              <option value="default">Default Dark</option>
              <option value="matrix">Matrix Green</option>
              <option value="cyber">Cyberpunk Blue</option>
              <option value="light">Light Mode</option>
            </select>
          </div>
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Font Family</label>
            <select 
              className="w-full bg-zinc-900 border border-zinc-800 rounded p-2 text-xs"
              value={settings.fontFamily}
              onChange={(e) => setSettings({...settings, fontFamily: e.target.value})}
            >
              <option value="'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', Arial, sans-serif">Gill Sans (Default)</option>
              <option value="'Cascadia Code', 'Fira Mono', 'Consolas', monospace">Monospace</option>
              <option value="'Palatino Linotype', Palatino, serif">Serif</option>
            </select>
          </div>
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Base Font Size</label>
            <select 
              className="w-full bg-zinc-900 border border-zinc-800 rounded p-2 text-xs"
              value={settings.fontSize}
              onChange={(e) => setSettings({...settings, fontSize: e.target.value})}
            >
              <option value="12px">Small</option>
              <option value="14px">Medium</option>
              <option value="16px">Large</option>
            </select>
          </div>
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Banner Color (Hex)</label>
            <div className="flex gap-2">
              <div className="w-8 h-8 rounded border border-zinc-800" style={{ background: settings.bannerColor }} />
              <Input 
                value={settings.bannerColor}
                onChange={(e) => setSettings({...settings, bannerColor: e.target.value})}
                className="bg-zinc-900 border-zinc-800 text-xs font-mono"
              />
            </div>
          </div>
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Watermark Color (Hex)</label>
            <div className="flex gap-2">
              <div className="w-8 h-8 rounded border border-zinc-800" style={{ background: settings.watermarkColor }} />
              <Input 
                value={settings.watermarkColor}
                onChange={(e) => setSettings({...settings, watermarkColor: e.target.value})}
                className="bg-zinc-900 border-zinc-800 text-xs font-mono"
              />
            </div>
          </div>
          <div className="space-y-2">
            <label className="text-xs font-bold text-muted-foreground uppercase">Watermark Text</label>
            <Input 
              value={settings.watermarkText}
              onChange={(e) => setSettings({...settings, watermarkText: e.target.value})}
              className="bg-zinc-900 border-zinc-800 text-xs font-mono"
            />
          </div>
          <div className="flex items-center justify-between">
            <label className="text-xs font-bold text-muted-foreground uppercase">Enable Watermark</label>
            <input 
              type="checkbox" 
              checked={settings.watermarkEnabled}
              onChange={(e) => setSettings({...settings, watermarkEnabled: e.target.checked})}
              className="accent-primary"
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}