import React, { useState, useEffect } from 'react';
import { 
  FaPlus, 
  FaTrash, 
  FaEdit, 
  FaCalendarAlt, 
  FaUsers, 
  FaUser, 
  FaChevronLeft, 
  FaChevronRight,
  FaSave,
  FaTimes
} from 'react-icons/fa';
import calendarService from './services/CalendarService';
import './App.sass';

const App = () => {
  const [events, setEvents] = useState([]);
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [viewType, setViewType] = useState('family'); // 'family' or 'individual'
  const [selectedUser, setSelectedUser] = useState(null);
  const [showAddForm, setShowAddForm] = useState(false);
  const [editingEvent, setEditingEvent] = useState(null);
  const [newEvent, setNewEvent] = useState({
    user: '',
    date: '',
    text: ''
  });

  useEffect(() => {
    loadUsers();
    loadEvents();
  }, [currentDate, viewType, selectedUser]);

  const loadUsers = async () => {
    try {
      const userData = await calendarService.getUsers();
      setUsers(userData);
      if (userData.length > 0 && !selectedUser) {
        setSelectedUser(userData[0].name);
        setNewEvent(prev => ({ ...prev, user: userData[0].name }));
      }
    } catch (err) {
      setError('Fehler beim Laden der Benutzer');
      console.error('Error loading users:', err);
    }
  };

  const loadEvents = async () => {
    try {
      setLoading(true);
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, '0');
      
      const eventData = await calendarService.getEventsForMonth(
        year, 
        month, 
        selectedUser, 
        viewType
      );
      
      setEvents(eventData);
      setError(null);
    } catch (err) {
      setError('Fehler beim Laden der Termine');
      console.error('Error loading events:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddEvent = async (e) => {
    e.preventDefault();
    if (!newEvent.text.trim() || !newEvent.date || !newEvent.user) return;

    try {
      const createdEvent = await calendarService.createEvent(newEvent);
      setEvents([...events, createdEvent]);
      setNewEvent({
        user: selectedUser || users[0]?.name || '',
        date: '',
        text: ''
      });
      setShowAddForm(false);
    } catch (err) {
      setError('Fehler beim Erstellen des Termins');
      console.error('Error creating event:', err);
    }
  };

  const handleUpdateEvent = async (eventId, updatedData) => {
    try {
      const updatedEvent = await calendarService.updateEvent(eventId, updatedData);
      setEvents(events.map(event => 
        event.id === eventId ? updatedEvent : event
      ));
      setEditingEvent(null);
    } catch (err) {
      setError('Fehler beim Aktualisieren des Termins');
      console.error('Error updating event:', err);
    }
  };

  const handleDeleteEvent = async (eventId, user) => {
    try {
      await calendarService.deleteEvent(eventId, user);
      setEvents(events.filter(event => event.id !== eventId));
    } catch (err) {
      setError('Fehler beim Löschen des Termins');
      console.error('Error deleting event:', err);
    }
  };

  const navigateMonth = (direction) => {
    const newDate = new Date(currentDate);
    newDate.setMonth(newDate.getMonth() + direction);
    setCurrentDate(newDate);
  };

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('de-DE', {
      weekday: 'short',
      day: '2-digit',
      month: '2-digit'
    });
  };

  const getCurrentMonthYear = () => {
    return currentDate.toLocaleDateString('de-DE', {
      month: 'long',
      year: 'numeric'
    });
  };

  const groupEventsByDate = (events) => {
    const grouped = {};
    events.forEach(event => {
      const date = event.date;
      if (!grouped[date]) {
        grouped[date] = [];
      }
      grouped[date].push(event);
    });
    
    // Sort dates
    const sortedDates = Object.keys(grouped).sort();
    const result = {};
    sortedDates.forEach(date => {
      result[date] = grouped[date];
    });
    
    return result;
  };

  const groupedEvents = groupEventsByDate(events);

  const getUserColor = (userName) => {
    const colors = [
      '#3b82f6', // blue
      '#10b981', // green
      '#f59e0b', // amber
      '#ef4444', // red
      '#8b5cf6', // purple
      '#06b6d4', // cyan
      '#ec4899', // pink
      '#84cc16'  // lime
    ];
    
    const userIndex = users.findIndex(user => user.name === userName);
    return colors[userIndex % colors.length];
  };

  if (loading && events.length === 0) {
    return (
      <div className="app">
        <div className="loading">
          <FaCalendarAlt className="loading-icon" />
          <p>Kalender wird geladen...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="app calendar-app">
      <header className="header">
        <div className="header-content">
          <h1>
            <FaCalendarAlt />
            Kalender
          </h1>
          
          <div className="month-navigation">
            <button 
              className="btn btn-icon"
              onClick={() => navigateMonth(-1)}
            >
              <FaChevronLeft />
            </button>
            <h2 className="current-month">{getCurrentMonthYear()}</h2>
            <button 
              className="btn btn-icon"
              onClick={() => navigateMonth(1)}
            >
              <FaChevronRight />
            </button>
          </div>
        </div>

        <div className="view-controls">
          <div className="view-type-toggle">
            <button 
              className={`btn ${viewType === 'family' ? 'btn-primary' : 'btn-secondary'}`}
              onClick={() => setViewType('family')}
            >
              <FaUsers />
              Familie
            </button>
            <button 
              className={`btn ${viewType === 'individual' ? 'btn-primary' : 'btn-secondary'}`}
              onClick={() => setViewType('individual')}
            >
              <FaUser />
              Einzeln
            </button>
          </div>
          
          {viewType === 'individual' && (
            <select 
              className="user-select"
              value={selectedUser || ''}
              onChange={(e) => setSelectedUser(e.target.value)}
            >
              {users.map(user => (
                <option key={user.id} value={user.name}>
                  {user.name}
                </option>
              ))}
            </select>
          )}
        </div>
      </header>

      <main className="main">
        {error && (
          <div className="error-message">
            {error}
            <button onClick={() => setError(null)}>×</button>
          </div>
        )}

        {showAddForm && (
          <div className="add-form-overlay">
            <form className="add-form" onSubmit={handleAddEvent}>
              <h3>Neuer Termin</h3>
              <div className="form-group">
                <label>Benutzer</label>
                <select
                  value={newEvent.user}
                  onChange={(e) => setNewEvent({ ...newEvent, user: e.target.value })}
                  required
                >
                  <option value="">Benutzer auswählen</option>
                  {users.map(user => (
                    <option key={user.id} value={user.name}>
                      {user.name}
                    </option>
                  ))}
                </select>
              </div>
              <div className="form-group">
                <label>Datum</label>
                <input
                  type="date"
                  value={newEvent.date}
                  onChange={(e) => setNewEvent({ ...newEvent, date: e.target.value })}
                  required
                />
              </div>
              <div className="form-group">
                <label>Beschreibung</label>
                <input
                  type="text"
                  placeholder="Termin beschreiben..."
                  value={newEvent.text}
                  onChange={(e) => setNewEvent({ ...newEvent, text: e.target.value })}
                  autoFocus
                  required
                />
              </div>
              <div className="form-actions">
                <button type="button" className="btn btn-secondary" onClick={() => setShowAddForm(false)}>
                  <FaTimes />
                  Abbrechen
                </button>
                <button type="submit" className="btn btn-primary">
                  <FaSave />
                  Speichern
                </button>
              </div>
            </form>
          </div>
        )}

        <div className="calendar-content">
          {Object.keys(groupedEvents).length === 0 ? (
            <div className="empty-state">
              <FaCalendarAlt />
              <p>Keine Termine in diesem Monat</p>
              <small>
                {viewType === 'family' 
                  ? 'Füge einen neuen Termin hinzu für alle Familienmitglieder'
                  : `Keine Termine für ${selectedUser} gefunden`
                }
              </small>
            </div>
          ) : (
            <div className="events-list">
              {Object.entries(groupedEvents).map(([date, dayEvents]) => (
                <div key={date} className="day-section">
                  <div className="day-header">
                    <h3>{formatDate(date)}</h3>
                    <span className="event-count">{dayEvents.length} Termin{dayEvents.length !== 1 ? 'e' : ''}</span>
                  </div>
                  <div className="day-events">
                    {dayEvents.map(event => (
                      <CalendarEvent
                        key={event.id}
                        event={event}
                        onUpdate={handleUpdateEvent}
                        onDelete={handleDeleteEvent}
                        editingEvent={editingEvent}
                        setEditingEvent={setEditingEvent}
                        userColor={getUserColor(event.user)}
                        showUser={viewType === 'family'}
                        users={users}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </main>

      <div className="fab-container">
        <button 
          className="fab"
          onClick={() => setShowAddForm(true)}
        >
          <FaPlus />
        </button>
      </div>
    </div>
  );
};

// Calendar Event Component
const CalendarEvent = ({ 
  event, 
  onUpdate, 
  onDelete, 
  editingEvent, 
  setEditingEvent, 
  userColor,
  showUser,
  users 
}) => {
  const [editData, setEditData] = useState({
    user: event.user,
    date: event.date,
    text: event.text
  });

  const handleEdit = () => {
    setEditingEvent(event.id);
    setEditData({
      user: event.user,
      date: event.date,
      text: event.text
    });
  };

  const handleSave = () => {
    onUpdate(event.id, editData);
  };

  const handleCancel = () => {
    setEditingEvent(null);
    setEditData({
      user: event.user,
      date: event.date,
      text: event.text
    });
  };

  const isEditing = editingEvent === event.id;

  return (
    <div className="calendar-event" style={{ borderLeftColor: userColor }}>
      {isEditing ? (
        <div className="edit-form">
          <div className="form-group">
            <select
              value={editData.user}
              onChange={(e) => setEditData({ ...editData, user: e.target.value })}
            >
              {users.map(user => (
                <option key={user.id} value={user.name}>
                  {user.name}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <input
              type="date"
              value={editData.date}
              onChange={(e) => setEditData({ ...editData, date: e.target.value })}
            />
          </div>
          <div className="form-group">
            <input
              type="text"
              value={editData.text}
              onChange={(e) => setEditData({ ...editData, text: e.target.value })}
              onKeyDown={(e) => {
                if (e.key === 'Enter') handleSave();
                if (e.key === 'Escape') handleCancel();
              }}
              autoFocus
            />
          </div>
          <div className="edit-actions">
            <button className="btn btn-primary btn-small" onClick={handleSave}>
              <FaSave />
            </button>
            <button className="btn btn-secondary btn-small" onClick={handleCancel}>
              <FaTimes />
            </button>
          </div>
        </div>
      ) : (
        <>
          <div className="event-content">
            <div className="event-text">{event.text}</div>
            {showUser && (
              <div className="event-user" style={{ color: userColor }}>
                {event.user}
              </div>
            )}
          </div>
          <div className="event-actions">
            <button className="btn btn-secondary btn-small" onClick={handleEdit}>
              <FaEdit />
            </button>
            <button 
              className="btn btn-danger btn-small" 
              onClick={() => onDelete(event.id, event.user)}
            >
              <FaTrash />
            </button>
          </div>
        </>
      )}
    </div>
  );
};

export default App;