import type { NightModeConfig, NightModeStatus } from './types'

interface TimeConfigProps {
  editMode: boolean
  editConfig: NightModeConfig | null
  actionLoading: string | null
  status: NightModeStatus | null
  onSetEditMode: (v: boolean) => void
  onSetEditConfig: (fn: (prev: NightModeConfig | null) => NightModeConfig | null) => void
  onSave: () => void
  onCancel: () => void
}

export function TimeConfig({
  editMode, editConfig, actionLoading, status,
  onSetEditMode, onSetEditConfig, onSave, onCancel,
}: TimeConfigProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-lg font-semibold text-slate-900">Zeitkonfiguration</h3>
        {editMode ? (
          <div className="flex gap-2">
            <button
              onClick={onCancel}
              className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
            >
              Abbrechen
            </button>
            <button
              onClick={onSave}
              disabled={actionLoading === 'save'}
              className="px-4 py-2 text-sm bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 transition-colors"
            >
              {actionLoading === 'save' ? 'Speichern...' : 'Speichern'}
            </button>
          </div>
        ) : (
          <button
            onClick={() => onSetEditMode(true)}
            className="px-4 py-2 text-sm border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
          >
            Bearbeiten
          </button>
        )}
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            <span className="flex items-center gap-2">
              <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
              </svg>
              Abschaltung um
            </span>
          </label>
          {editMode ? (
            <input
              type="time"
              value={editConfig?.shutdown_time || '22:00'}
              onChange={e => onSetEditConfig(prev => prev ? { ...prev, shutdown_time: e.target.value } : null)}
              className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
            />
          ) : (
            <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
              {editConfig?.shutdown_time || '22:00'}
            </div>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-2">
            <span className="flex items-center gap-2">
              <svg className="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
              Start um
            </span>
          </label>
          {editMode ? (
            <input
              type="time"
              value={editConfig?.startup_time || '06:00'}
              onChange={e => onSetEditConfig(prev => prev ? { ...prev, startup_time: e.target.value } : null)}
              className="w-full px-4 py-3 text-xl font-mono border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500"
            />
          ) : (
            <div className="text-3xl font-mono font-bold text-slate-900 bg-slate-50 px-4 py-3 rounded-lg">
              {editConfig?.startup_time || '06:00'}
            </div>
          )}
        </div>
      </div>

      {/* Letzte Aktion */}
      {status?.config.last_action && (
        <div className="mt-6 pt-6 border-t border-slate-200">
          <div className="text-sm text-slate-500">
            Letzte Aktion:{' '}
            <span className={`font-semibold ${status.config.last_action === 'startup' ? 'text-green-600' : 'text-red-600'}`}>
              {status.config.last_action === 'startup' ? 'Gestartet' : 'Abgeschaltet'}
            </span>
            {status.config.last_action_time && (
              <span className="ml-2">
                am {new Date(status.config.last_action_time).toLocaleString('de-DE')}
              </span>
            )}
          </div>
        </div>
      )}
    </div>
  )
}