import type { NightModeConfig } from './types'

interface MainControlProps {
  editConfig: NightModeConfig | null
  actionLoading: string | null
  onToggle: () => void
  onExecute: (action: 'start' | 'stop') => void
}

export function MainControl({ editConfig, actionLoading, onToggle, onExecute }: MainControlProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
        {/* Toggle */}
        <div className="flex items-center gap-6">
          <div
            onClick={onToggle}
            className={`relative inline-flex h-10 w-20 cursor-pointer items-center rounded-full transition-colors ${
              editConfig?.enabled ? 'bg-orange-600' : 'bg-slate-300'
            } ${actionLoading === 'toggle' ? 'opacity-50 cursor-wait' : ''}`}
          >
            <span
              className={`inline-block h-8 w-8 transform rounded-full bg-white shadow-lg transition-transform ${
                editConfig?.enabled ? 'translate-x-11' : 'translate-x-1'
              }`}
            />
          </div>
          <div>
            <h2 className="text-xl font-semibold text-slate-900">
              Nachtmodus: {editConfig?.enabled ? 'Aktiv' : 'Inaktiv'}
            </h2>
            <p className="text-sm text-slate-500">
              {editConfig?.enabled
                ? `Abschaltung um ${editConfig.shutdown_time}, Start um ${editConfig.startup_time}`
                : 'Zeitgesteuerte Abschaltung ist deaktiviert'}
            </p>
          </div>
        </div>

        {/* Manuelle Aktionen */}
        <div className="flex gap-3">
          <button
            onClick={() => onExecute('stop')}
            disabled={actionLoading !== null}
            className="flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 disabled:opacity-50 transition-colors"
          >
            {actionLoading === 'stop' ? (
              <span className="animate-spin">&#9696;</span>
            ) : (
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
              </svg>
            )}
            Jetzt abschalten
          </button>
          <button
            onClick={() => onExecute('start')}
            disabled={actionLoading !== null}
            className="flex items-center gap-2 px-5 py-2.5 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 disabled:opacity-50 transition-colors"
          >
            {actionLoading === 'start' ? (
              <span className="animate-spin">&#9696;</span>
            ) : (
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            )}
            Jetzt starten
          </button>
        </div>
      </div>
    </div>
  )
}