'use client'

/**
 * Night Mode - Dashboard-gesteuerte Nachtabschaltung
 *
 * Ermoeglicht das automatische Stoppen und Starten von Docker-Services
 * nach Zeitplan. Manuelles Starten/Stoppen ebenfalls moeglich.
 */

import { useNightMode } from './_components/useNightMode'
import { MainControl } from './_components/MainControl'
import { StatusCards } from './_components/StatusCards'
import { TimeConfig } from './_components/TimeConfig'
import { ServiceList } from './_components/ServiceList'
import { InfoBox } from './_components/InfoBox'

export default function NightModePage() {
  const {
    status,
    services,
    loading,
    actionLoading,
    error,
    successMessage,
    editMode,
    setEditMode,
    editConfig,
    setEditConfig,
    saveConfig,
    executeAction,
    toggleEnabled,
    cancelEdit,
    runningCount,
    stoppedCount,
  } = useNightMode()

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-slate-900">Nachtabschaltung</h1>
        <p className="text-slate-500 mt-1">Automatisches Stoppen und Starten von Docker-Services nach Zeitplan.</p>
      </div>

      {/* Status Messages */}
      {error && (
        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center gap-3">
          <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          {error}
        </div>
      )}
      {successMessage && (
        <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 flex items-center gap-3">
          <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
          {successMessage}
        </div>
      )}

      {loading ? (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
        </div>
      ) : (
        <>
          <MainControl
            editConfig={editConfig}
            actionLoading={actionLoading}
            onToggle={toggleEnabled}
            onExecute={executeAction}
          />

          <StatusCards
            status={status}
            runningCount={runningCount}
            stoppedCount={stoppedCount}
          />

          <TimeConfig
            editMode={editMode}
            editConfig={editConfig}
            actionLoading={actionLoading}
            status={status}
            onSetEditMode={setEditMode}
            onSetEditConfig={setEditConfig}
            onSave={saveConfig}
            onCancel={cancelEdit}
          />

          <ServiceList services={services} status={status} />

          <InfoBox />
        </>
      )}
    </div>
  )
}