import React, { useState, useEffect } from 'react';
import { User, Home, Briefcase, Calendar, AlertCircle, Plus, Edit, Trash2, Check, X, ChevronLeft, Moon, Sun } from 'lucide-react';

export default function App() {
  // Facility name - change this to your facility name
  const facilityName = "Wuma Frenkendorf";
  
  // Initial demo data
  const [clients, setClients] = useState([
    {
      id: '1',
      name: 'Max Mustermann',
      roomNumber: '101',
      photo: null,
      isHome: true,
      notHomeReason: '',
      uAboExpiryDate: '2025-06-15',
      entries: [
        { id: '1', category: 'Gemeinde', description: 'Anmeldung Ferienprogramm', status: 'open', date: '2025-06-01' }
      ],
      appointments: [
        { id: '1', type: 'Arzttermin', date: '2025-06-10', time: '14:00', description: 'Hausarzt Kontrolle' }
      ]
    },
    {
      id: '2', 
      name: 'Anna Schmidt',
      roomNumber: '102',
      photo: null,
      isHome: false,
      notHomeReason: 'Schule',
      uAboExpiryDate: '2025-06-08',
      entries: [],
      appointments: []
    }
  ]);

  const [selectedClient, setSelectedClient] = useState(null);
  const [showAddClient, setShowAddClient] = useState(false);
  const [editingClient, setEditingClient] = useState(null);
  const [darkMode, setDarkMode] = useState(false);

  // Effect to apply dark mode class to document
  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [darkMode]);

  // Add new client
  const addClient = (clientData) => {
    console.log("Adding client:", clientData);
    const newClient = {
      ...clientData,
      id: Date.now().toString(),
      isHome: true,
      notHomeReason: '',
      entries: [],
      appointments: []
    };
    setClients(prevClients => [...prevClients, newClient]);
    setShowAddClient(false);
  };

  // Update client
  const updateClient = (clientId, updates) => {
    console.log("Updating client:", clientId, updates);
    setClients(prevClients => 
      prevClients.map(c => c.id === clientId ? { ...c, ...updates } : c)
    );
    if (selectedClient?.id === clientId) {
      setSelectedClient(prev => ({ ...prev, ...updates }));
    }
  };

  // Delete client
  const deleteClient = (clientId) => {
    if (window.confirm('Möchten Sie diesen Klienten wirklich löschen?')) {
      setClients(prevClients => prevClients.filter(c => c.id !== clientId));
      if (selectedClient?.id === clientId) {
        setSelectedClient(null);
      }
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors flex flex-col">
      {/* Header */}
      <header className="bg-blue-600 dark:bg-blue-800 text-white p-4 shadow-lg">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex items-center gap-3">
            {selectedClient && (
              <button
                onClick={() => setSelectedClient(null)}
                className="p-2 hover:bg-blue-700 rounded-lg transition"
              >
                <ChevronLeft size={24} />
              </button>
            )}
            <h1 className="text-2xl font-bold">
              {selectedClient ? selectedClient.name : `Wohngruppe App ${facilityName}`}
            </h1>
          </div>
          <button
            onClick={() => setDarkMode(prevMode => !prevMode)}
            className="p-2 hover:bg-blue-700 rounded-lg transition"
          >
            {darkMode ? <Sun size={20} /> : <Moon size={20} />}
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-grow max-w-7xl mx-auto p-4 w-full">
        {!selectedClient ? (
          // Client List View
          <div>
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-2xl font-bold dark:text-white">Klienten Übersicht</h2>
              <button
                onClick={() => setShowAddClient(true)}
                className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition"
              >
                <Plus size={20} />
                Neuer Klient
              </button>
            </div>

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              {clients.map(client => (
                <ClientCard
                  key={client.id}
                  client={client}
                  onSelect={() => setSelectedClient(client)}
                  onEdit={() => setEditingClient(client)}
                  onDelete={() => deleteClient(client.id)}
                />
              ))}
            </div>
          </div>
        ) : (
          // Client Detail View
          <ClientDetail
            client={selectedClient}
            onUpdateClient={updateClient}
          />
        )}
      </main>

      {/* Footer */}
      <footer className="bg-gray-200 dark:bg-gray-800 text-center py-4">
        <p className="text-sm text-gray-600 dark:text-gray-400">
          © 2025 Dagem Tegegne. All rights reserved.
        </p>
      </footer>

      {/* Modals */}
      {showAddClient && (
        <ClientModal
          onSave={addClient}
          onClose={() => setShowAddClient(false)}
        />
      )}

      {editingClient && (
        <ClientModal
          client={editingClient}
          onSave={(data) => {
            updateClient(editingClient.id, data);
            setEditingClient(null);
          }}
          onClose={() => setEditingClient(null)}
        />
      )}
    </div>
  );
}

// Client Card Component
function ClientCard({ client, onSelect, onEdit, onDelete }) {
  const daysUntilExpiry = client.uAboExpiryDate 
    ? Math.ceil((new Date(client.uAboExpiryDate) - new Date()) / (1000 * 60 * 60 * 24))
    : null;

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 hover:shadow-lg transition">
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-16 h-16 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
            {client.photo ? (
              <img src={client.photo} alt={client.name} className="w-full h-full rounded-full object-cover" />
            ) : (
              <User size={32} className="text-gray-500 dark:text-gray-400" />
            )}
          </div>
          <div>
            <h3 className="font-semibold text-lg dark:text-white">{client.name}</h3>
            <p className="text-gray-600 dark:text-gray-400">Zimmer {client.roomNumber}</p>
          </div>
        </div>
        <span className={`px-2 py-1 rounded-full text-xs font-medium ${
          client.isHome 
            ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' 
            : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
        }`}>
          {client.isHome ? 'Zu Hause' : 'Abwesend'}
        </span>
      </div>

      {daysUntilExpiry !== null && daysUntilExpiry <= 7 && (
        <div className={`mb-4 p-2 rounded-lg flex items-center gap-2 ${
          daysUntilExpiry < 0 
            ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
            : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
        }`}>
          <AlertCircle size={16} />
          <span className="text-sm font-medium">
            U-Abo {daysUntilExpiry < 0 ? 'abgelaufen' : `läuft in ${daysUntilExpiry} Tagen ab`}
          </span>
        </div>
      )}

      <div className="flex gap-2">
        <button
          onClick={onSelect}
          className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition"
        >
          Details
        </button>
        <button
          onClick={onEdit}
          className="p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg transition"
        >
          <Edit size={18} className="text-gray-700 dark:text-gray-300" />
        </button>
        <button
          onClick={onDelete}
          className="p-2 bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-800 rounded-lg transition"
        >
          <Trash2 size={18} className="text-red-600 dark:text-red-400" />
        </button>
      </div>
    </div>
  );
}

// Client Detail Component
function ClientDetail({ client, onUpdateClient }) {
  return (
    <div className="space-y-6">
      {/* Client Header */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div className="flex items-center gap-4">
          <div className="w-24 h-24 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
            {client.photo ? (
              <img src={client.photo} alt={client.name} className="w-full h-full rounded-full object-cover" />
            ) : (
              <User size={48} className="text-gray-500 dark:text-gray-400" />
            )}
          </div>
          <div>
            <h2 className="text-2xl font-bold dark:text-white">{client.name}</h2>
            <p className="text-gray-600 dark:text-gray-400">Zimmer {client.roomNumber}</p>
          </div>
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <PresenceSection client={client} onUpdate={onUpdateClient} />
        <UAboSection client={client} onUpdate={onUpdateClient} />
      </div>

      <EntriesSection client={client} onUpdate={onUpdateClient} />
      <AppointmentsSection client={client} onUpdate={onUpdateClient} />
    </div>
  );
}

// Presence Section
function PresenceSection({ client, onUpdate }) {
  const [notHomeReason, setNotHomeReason] = useState('');
  const [customReason, setCustomReason] = useState('');

  const reasons = ['Spazieren', 'Schule', 'Arzt', 'Wochenende weg', 'Andere'];

  const togglePresence = () => {
    if (client.isHome) {
      onUpdate(client.id, { isHome: false });
    } else {
      onUpdate(client.id, { isHome: true, notHomeReason: '' });
      setNotHomeReason('');
      setCustomReason('');
    }
  };

  const updateReason = (reason) => {
    setNotHomeReason(reason);
    if (reason !== 'Andere') {
      onUpdate(client.id, { notHomeReason: reason });
    }
  };

  const saveCustomReason = () => {
    if (customReason.trim()) {
      onUpdate(client.id, { notHomeReason: customReason });
    }
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 dark:text-white">
        <Home size={20} />
        Anwesenheit
      </h3>

      <button
        onClick={togglePresence}
        className={`w-full py-3 rounded-lg font-medium transition ${
          client.isHome
            ? 'bg-green-600 hover:bg-green-700 text-white'
            : 'bg-gray-400 hover:bg-gray-500 text-white'
        }`}
      >
        {client.isHome ? 'Zu Hause' : 'Nicht zu Hause'}
      </button>

      {!client.isHome && (
        <div className="mt-4 space-y-3">
          <select
            value={notHomeReason}
            onChange={(e) => updateReason(e.target.value)}
            className="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          >
            <option value="">Grund wählen...</option>
            {reasons.map(reason => (
              <option key={reason} value={reason}>{reason}</option>
            ))}
          </select>

          {notHomeReason === 'Andere' && (
            <div className="flex gap-2">
              <input
                type="text"
                value={customReason}
                onChange={(e) => setCustomReason(e.target.value)}
                placeholder="Grund eingeben..."
                className="flex-1 p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              />
              <button
                onClick={saveCustomReason}
                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
              >
                OK
              </button>
            </div>
          )}

          {client.notHomeReason && (
            <p className="text-sm text-gray-600 dark:text-gray-400">
              Grund: {client.notHomeReason}
            </p>
          )}
        </div>
      )}
    </div>
  );
}

// U-Abo Section
function UAboSection({ client, onUpdate }) {
  const [editing, setEditing] = useState(false);
  const [date, setDate] = useState(client.uAboExpiryDate || '');

  const daysUntilExpiry = date 
    ? Math.ceil((new Date(date) - new Date()) / (1000 * 60 * 60 * 24))
    : null;

  const saveDate = () => {
    onUpdate(client.id, { uAboExpiryDate: date });
    setEditing(false);
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <h3 className="text-lg font-semibold mb-4 flex items-center gap-2 dark:text-white">
        <Calendar size={20} />
        U-Abo Status
      </h3>

      {!editing ? (
        <div>
          {daysUntilExpiry !== null ? (
            <div className={`p-3 rounded-lg ${
              daysUntilExpiry < 0
                ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                : daysUntilExpiry <= 7
                ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
            }`}>
              <p className="font-medium">
                {daysUntilExpiry < 0
                  ? 'U-Abo ist abgelaufen!'
                  : daysUntilExpiry === 0
                  ? 'U-Abo läuft heute ab!'
                  : `U-Abo gültig noch ${daysUntilExpiry} Tage`}
              </p>
              <p className="text-sm mt-1">Ablaufdatum: {new Date(date).toLocaleDateString('de-DE')}</p>
            </div>
          ) : (
            <p className="text-gray-600 dark:text-gray-400">Kein Ablaufdatum eingetragen</p>
          )}

          <button
            onClick={() => setEditing(true)}
            className="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"
          >
            {date ? 'Datum ändern' : 'Datum hinzufügen'}
          </button>
        </div>
      ) : (
        <div className="space-y-3">
          <input
            type="date"
            value={date}
            onChange={(e) => setDate(e.target.value)}
            className="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          />
          <div className="flex gap-2">
            <button
              onClick={saveDate}
              className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition"
            >
              Speichern
            </button>
            <button
              onClick={() => {
                setDate(client.uAboExpiryDate || '');
                setEditing(false);
              }}
              className="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg transition"
            >
              Abbrechen
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// Entries Section
function EntriesSection({ client, onUpdate }) {
  const [showAdd, setShowAdd] = useState(false);
  const [newEntry, setNewEntry] = useState({
    category: '',
    customCategory: '',
    description: '',
    status: 'open'
  });

  const categories = ['Gemeinde', 'Beistand(in)', 'Convalere', 'Schule', 'Gesundheit', 'Andere'];

  const addEntry = () => {
    if (!newEntry.category || !newEntry.description) return;

    const entry = {
      id: Date.now().toString(),
      category: newEntry.category === 'Andere' ? newEntry.customCategory : newEntry.category,
      description: newEntry.description,
      status: 'open',
      date: new Date().toISOString().split('T')[0]
    };

    onUpdate(client.id, { entries: [...client.entries, entry] });
    setNewEntry({ category: '', customCategory: '', description: '', status: 'open' });
    setShowAdd(false);
  };

  const toggleStatus = (entryId) => {
    const updated = client.entries.map(e => 
      e.id === entryId 
        ? { ...e, status: e.status === 'open' ? 'finished' : 'open' }
        : e
    );
    onUpdate(client.id, { entries: updated });
  };

  const deleteEntry = (entryId) => {
    const updated = client.entries.filter(e => e.id !== entryId);
    onUpdate(client.id, { entries: updated });
  };

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold flex items-center gap-2 dark:text-white">
          <Briefcase size={20} />
          Einträge
        </h3>
        <button
          onClick={() => setShowAdd(!showAdd)}
          className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg flex items-center gap-1 transition"
        >
          <Plus size={16} />
          Neu
        </button>
      </div>

      {showAdd && (
        <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg space-y-3">
          <select
            value={newEntry.category}
            onChange={(e) => setNewEntry({ ...newEntry, category: e.target.value })}
            className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
          >
            <option value="">Kategorie wählen...</option>
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>

          {newEntry.category === 'Andere' && (
            <input
              type="text"
              value={newEntry.customCategory}
              onChange={(e) => setNewEntry({ ...newEntry, customCategory: e.target.value })}
              placeholder="Kategorie eingeben..."
              className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
            />
          )}

          <textarea
            value={newEntry.description}
            onChange={(e) => setNewEntry({ ...newEntry, description: e.target.value })}
            placeholder="Beschreibung..."
            rows="3"
            className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
          />

          <div className="flex gap-2">
            <button
              onClick={addEntry}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"
            >
              Speichern
            </button>
            <button
              onClick={() => {
                setShowAdd(false);
                setNewEntry({ category: '', customCategory: '', description: '', status: 'open' });
              }}
              className="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg transition"
            >
              Abbrechen
            </button>
          </div>
        </div>
      )}

      <div className="space-y-2">
        {client.entries.map(entry => (
          <div key={entry.id} className="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-medium dark:text-white">{entry.category}</span>
                  <span className={`px-2 py-1 text-xs rounded-full ${
                    entry.status === 'open'
                      ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                      : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                  }`}>
                    {entry.status === 'open' ? 'Offen' : 'Erledigt'}
                  </span>
                </div>
                <p className="text-gray-600 dark:text-gray-300 text-sm">{entry.description}</p>
                <p className="text-gray-500 dark:text-gray-400 text-xs mt-1">
                  {new Date(entry.date).toLocaleDateString('de-DE')}
                </p>
              </div>
              <div className="flex gap-1">
                <button
                  onClick={() => toggleStatus(entry.id)}
                  className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition"
                >
                  {entry.status === 'open' ? (
                    <Check size={16} className="text-green-600 dark:text-green-400" />
                  ) : (
                    <X size={16} className="text-gray-600 dark:text-gray-400" />
                  )}
                </button>
                <button
                  onClick={() => deleteEntry(entry.id)}
                  className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition"
                >
                  <Trash2 size={16} className="text-red-600 dark:text-red-400" />
                </button>
              </div>
            </div>
          </div>
        ))}
        {client.entries.length === 0 && (
          <p className="text-center text-gray-500 dark:text-gray-400 py-4">Keine Einträge vorhanden</p>
        )}
      </div>
    </div>
  );
}

// Appointments Section
function AppointmentsSection({ client, onUpdate }) {
  const [showAdd, setShowAdd] = useState(false);
  const [newAppointment, setNewAppointment] = useState({
    type: '',
    customType: '',
    date: '',
    time: '',
    description: ''
  });

  const types = ['Arzttermin', 'Gesprächstermin Schule', 'Gesprächstermin Wohngruppe', 'Gesprächstermin Beistand', 'Andere'];

  const addAppointment = () => {
    if (!newAppointment.type || !newAppointment.date) return;

    const appointment = {
      id: Date.now().toString(),
      type: newAppointment.type === 'Andere' ? newAppointment.customType : newAppointment.type,
      date: newAppointment.date,
      time: newAppointment.time,
      description: newAppointment.description
    };

    const updated = [...client.appointments, appointment].sort((a, b) => 
      new Date(a.date) - new Date(b.date)
    );

    onUpdate(client.id, { appointments: updated });
    setNewAppointment({ type: '', customType: '', date: '', time: '', description: '' });
    setShowAdd(false);
  };

  const deleteAppointment = (appointmentId) => {
    const updated = client.appointments.filter(a => a.id !== appointmentId);
    onUpdate(client.id, { appointments: updated });
  };

  const isPast = (date) => new Date(date) < new Date().setHours(0, 0, 0, 0);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-semibold flex items-center gap-2 dark:text-white">
          <Calendar size={20} />
          Termine
        </h3>
        <button
          onClick={() => setShowAdd(!showAdd)}
          className="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded-lg flex items-center gap-1 transition"
        >
          <Plus size={16} />
          Neu
        </button>
      </div>

      {showAdd && (
        <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg space-y-3">
          <select
            value={newAppointment.type}
            onChange={(e) => setNewAppointment({ ...newAppointment, type: e.target.value })}
            className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
          >
            <option value="">Terminart wählen...</option>
            {types.map(type => (
              <option key={type} value={type}>{type}</option>
            ))}
          </select>

          {newAppointment.type === 'Andere' && (
            <input
              type="text"
              value={newAppointment.customType}
              onChange={(e) => setNewAppointment({ ...newAppointment, customType: e.target.value })}
              placeholder="Terminart eingeben..."
              className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
            />
          )}

          <div className="grid grid-cols-2 gap-2">
            <input
              type="date"
              value={newAppointment.date}
              onChange={(e) => setNewAppointment({ ...newAppointment, date: e.target.value })}
              className="p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
            />
            <input
              type="time"
              value={newAppointment.time}
              onChange={(e) => setNewAppointment({ ...newAppointment, time: e.target.value })}
              className="p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
            />
          </div>

          <textarea
            value={newAppointment.description}
            onChange={(e) => setNewAppointment({ ...newAppointment, description: e.target.value })}
            placeholder="Beschreibung (optional)..."
            rows="2"
            className="w-full p-2 border rounded-lg dark:bg-gray-600 dark:border-gray-500 dark:text-white"
          />

          <div className="flex gap-2">
            <button
              onClick={addAppointment}
              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"
            >
              Speichern
            </button>
            <button
              onClick={() => {
                setShowAdd(false);
                setNewAppointment({ type: '', customType: '', date: '', time: '', description: '' });
              }}
              className="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg transition"
            >
              Abbrechen
            </button>
          </div>
        </div>
      )}

      <div className="space-y-2">
        {client.appointments.map(appointment => (
          <div 
            key={appointment.id} 
            className={`p-3 rounded-lg ${
              isPast(appointment.date) 
                ? 'bg-gray-100 dark:bg-gray-700 opacity-60' 
                : 'bg-blue-50 dark:bg-blue-900/20'
            }`}
          >
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-medium dark:text-white">{appointment.type}</span>
                  {isPast(appointment.date) && (
                    <span className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-600 rounded-full text-gray-600 dark:text-gray-300">
                      Vergangen
                    </span>
                  )}
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  {new Date(appointment.date).toLocaleDateString('de-DE')}
                  {appointment.time && ` um ${appointment.time} Uhr`}
                </p>
                {appointment.description && (
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{appointment.description}</p>
                )}
              </div>
              <button
                onClick={() => deleteAppointment(appointment.id)}
                className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition"
              >
                <Trash2 size={16} className="text-red-600 dark:text-red-400" />
              </button>
            </div>
          </div>
        ))}
        {client.appointments.length === 0 && (
          <p className="text-center text-gray-500 dark:text-gray-400 py-4">Keine Termine vorhanden</p>
        )}
      </div>
    </div>
  );
}

// Client Modal Component
function ClientModal({ client, onSave, onClose }) {
  const [formData, setFormData] = useState({
    name: client?.name || '',
    roomNumber: client?.roomNumber || '',
    photo: client?.photo || null,
    uAboExpiryDate: client?.uAboExpiryDate || ''
  });

  const handleSubmit = () => {
    if (!formData.name || !formData.roomNumber) {
      alert('Name und Zimmernummer sind erforderlich!');
      return;
    }
    console.log("Submitting form data:", formData);
    onSave(formData);
  };

  const handlePhotoChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setFormData({ ...formData, photo: reader.result });
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
        <h2 className="text-xl font-bold mb-4 dark:text-white">
          {client ? 'Klient bearbeiten' : 'Neuer Klient'}
        </h2>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium mb-1 dark:text-gray-300">Name</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
              className="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1 dark:text-gray-300">Zimmernummer</label>
            <input
              type="text"
              value={formData.roomNumber}
              onChange={(e) => setFormData({ ...formData, roomNumber: e.target.value })}
              className="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
          </div>

          <div>
            <label className="block text-sm font-medium mb-1 dark:text-gray-300">Foto</label>
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center overflow-hidden">
                {formData.photo ? (
                  <img src={formData.photo} alt="Preview" className="w-full h-full object-cover" />
                ) : (
                  <User size={32} className="text-gray-500 dark:text-gray-400" />
                )}
              </div>
              <input
                type="file"
                accept="image/*"
                onChange={handlePhotoChange}
                className="text-sm dark:text-gray-300"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1 dark:text-gray-300">U-Abo Ablaufdatum</label>
            <input
              type="date"
              value={formData.uAboExpiryDate}
              onChange={(e) => setFormData({ ...formData, uAboExpiryDate: e.target.value })}
              className="w-full p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
            />
          </div>

          <div className="flex gap-2 pt-4">
            <button
              onClick={handleSubmit}
              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition"
            >
              Speichern
            </button>
            <button
              type="button"
              onClick={onClose}
              className="flex-1 bg-gray-400 hover:bg-gray-500 text-white py-2 rounded-lg transition"
            >
              Abbrechen
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}