import { useEffect, useState } from 'react';
import { startOfDay } from 'date-fns';
import PickupConfigTable from './components/PickupConfigTable';
import RangePickerModal from './components/RangePickerModal';
import usePickupConfig from './hooks/usePickupConfig';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

const PickupConfigEditor = () => {
  const {
    config,
    loading,
    status,
    error,
    fetchConfig,
    saveConfig,
    toggleActive,
    toggleProfileCheck,
    toggleOnlyNotify,
    changeWeekday,
    updateDateRange
  } = usePickupConfig();
  const [activeRangePicker, setActiveRangePicker] = useState(null);
  const minSelectableDate = startOfDay(new Date());

  const handleWeekdayChange = (index, value, entryId) => {
    changeWeekday(index, value);
    if (value && entryId) {
      setActiveRangePicker((prev) => (prev === entryId ? null : prev));
    }
  };

  useEffect(() => {
    if (!activeRangePicker) {
      return;
    }
    const entry = config.find((item) => item.id === activeRangePicker);
    if (!entry || entry.desiredWeekday) {
      setActiveRangePicker(null);
    }
  }, [activeRangePicker, config]);

  const activeRangeEntry = activeRangePicker
    ? config.find((item) => item.id === activeRangePicker) || null
    : null;

  if (loading) {
    return <div className="text-center p-8">Lade Konfiguration...</div>;
  }

  const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">ioBroker Abholung-Konfiguration</h1>
      
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
          {error}
        </div>
      )}
      
      {status && (
        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
          {status}
        </div>
      )}
      
      <PickupConfigTable
        config={config}
        weekdays={weekdays}
        onToggleActive={toggleActive}
        onToggleProfileCheck={toggleProfileCheck}
        onToggleOnlyNotify={toggleOnlyNotify}
        onWeekdayChange={handleWeekdayChange}
        onRangePickerRequest={setActiveRangePicker}
      />
      
      <div className="mt-6 flex justify-between">
        <button 
          onClick={fetchConfig} 
          className="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded"
        >
          Zurücksetzen
        </button>
        <button 
          onClick={saveConfig} 
          className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded"
        >
          Konfiguration speichern
        </button>
      </div>
      
      <div className="mt-8 p-4 border rounded bg-gray-50">
        <h2 className="text-lg font-bold mb-2">Aktuelle JSON-Konfiguration:</h2>
        <pre className="bg-gray-100 p-4 rounded overflow-x-auto">
          {JSON.stringify(config, null, 2)}
        </pre>
      </div>

      {activeRangeEntry && (
        <RangePickerModal
          entry={activeRangeEntry}
          minDate={minSelectableDate}
          onSelectRange={(startDate, endDate) =>
            updateDateRange(activeRangeEntry.id, startDate, endDate)
          }
          onResetRange={() => {
            updateDateRange(activeRangeEntry.id, null, null);
            setActiveRangePicker(null);
          }}
          onClose={() => setActiveRangePicker(null)}
        />
      )}
    </div>
  );
};

export default PickupConfigEditor;