'use client'

import { GlobalStyles } from '../types'
import { Input } from '../../ui/input'
import { Label } from '../../ui/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../ui/select'
import { THEME_PRESETS } from '../utils/defaults'
import { cn } from '../../../lib/utils'

interface GlobalStylesPanelProps {
  globalStyles: GlobalStyles
  onChange: (styles: GlobalStyles) => void
}

export function GlobalStylesPanel({ globalStyles, onChange }: GlobalStylesPanelProps) {
  return (
    <div className="space-y-4">
      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
        Email Design
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Background Color</Label>
        <div className="flex gap-2">
          <input
            type="color"
            value={globalStyles.backgroundColor}
            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
            className="h-8 w-8 rounded border cursor-pointer"
          />
          <Input
            value={globalStyles.backgroundColor}
            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
            className="h-8 text-xs"
          />
        </div>
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Content Width (px)</Label>
        <Input
          type="number"
          value={globalStyles.contentWidth}
          onChange={(e) =>
            onChange({ ...globalStyles, contentWidth: parseInt(e.target.value) || 600 })
          }
          className="h-8 text-xs"
          min={400}
          max={800}
        />
      </div>

      <div className="space-y-1">
        <Label className="text-xs">Font Family</Label>
        <Select
          value={globalStyles.fontFamily}
          onValueChange={(v) => onChange({ ...globalStyles, fontFamily: v })}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'>
              System (Default)
            </SelectItem>
            <SelectItem value="Arial, sans-serif">Arial</SelectItem>
            <SelectItem value="Georgia, serif">Georgia</SelectItem>
            <SelectItem value="Verdana, sans-serif">Verdana</SelectItem>
            <SelectItem value="'Trebuchet MS', sans-serif">Trebuchet MS</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="border-t pt-4 space-y-2">
        <div className="text-xs font-medium text-muted-foreground">Themes</div>
        <div className="grid gap-2">
          {THEME_PRESETS.map((preset) => (
            <button
              key={preset.id}
              onClick={() => onChange(preset.globalStyles)}
              className={cn(
                'flex items-center gap-3 p-2 rounded border text-left text-xs transition-colors',
                globalStyles.theme === preset.id
                  ? 'border-primary bg-primary/5'
                  : 'border-border hover:bg-muted'
              )}
            >
              <div
                className="h-6 w-6 rounded border"
                style={{ backgroundColor: preset.globalStyles.backgroundColor }}
              />
              <div>
                <div className="font-medium">{preset.name}</div>
                <div className="text-muted-foreground">{preset.description}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}