import React, { useState } from 'react';
import { updateStoeberhundefuehrerMe } from '../../services/stoeberhundefuehrer';
import './StoeberhundefuehrerDashboard.css';

const StoeberhundefuehrerDashboard = ({ stoeberhundefuehrerUser, onLogout }) => {
  const [userData, setUserData] = useState(stoeberhundefuehrerUser);
  const [editing, setEditing] = useState(false);
  const [formData, setFormData] = useState({
    phone: stoeberhundefuehrerUser.phone || '',
    landline: stoeberhundefuehrerUser.landline || '',
    address: stoeberhundefuehrerUser.address || '',
    available: stoeberhundefuehrerUser.available
  });
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState(null);

  const handleSave = async (e) => {
    e.preventDefault();
    setSaving(true);
    setMessage(null);
    try {
      const result = await updateStoeberhundefuehrerMe(formData);
      if (result.success) {
        setUserData({ ...userData, ...formData });
        setEditing(false);
        setMessage({ type: 'success', text: 'Daten erfolgreich gespeichert' });
      }
    } catch (err) {
      setMessage({ type: 'error', text: err.response?.data?.message || 'Fehler beim Speichern' });
    } finally {
      setSaving(false);
    }
  };

  const handleAvailabilityToggle = async () => {
    const newVal = !userData.available;
    setSaving(true);
    setMessage(null);
    try {
      const result = await updateStoeberhundefuehrerMe({ available: newVal });
      if (result.success) {
        setUserData({ ...userData, available: newVal });
        setFormData({ ...formData, available: newVal });
        setMessage({ type: 'success', text: newVal ? 'Sie sind jetzt als verfügbar markiert' : 'Sie sind jetzt als nicht verfügbar markiert' });
      }
    } catch (err) {
      setMessage({ type: 'error', text: 'Fehler beim Aktualisieren' });
    } finally {
      setSaving(false);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('stoeberhundefuehrerToken');
    onLogout();
  };

  return (
    <div className="stoeberhundefuehrer-dashboard">
      <div className="stoeberhundefuehrer-dashboard-card">
        <div className="stoeberhundefuehrer-dashboard-header">
          <div>
            <h2>Mein Profil</h2>
            <p className="stoeberhundefuehrer-name">{userData.name}</p>
          </div>
          <button className="btn-stoeberhundefuehrer-logout" onClick={handleLogout}>Abmelden</button>
        </div>

        {message && (
          <div className={`stoeberhundefuehrer-message stoeberhundefuehrer-message-${message.type}`}>{message.text}</div>
        )}

        {/* Availability Toggle */}
        <div className="stoeberhundefuehrer-availability-section">
          <div className="availability-label">Meine Verfügbarkeit</div>
          <button
            className={`availability-big-btn ${userData.available ? 'btn-green' : 'btn-red'}`}
            onClick={handleAvailabilityToggle}
            disabled={saving}
          >
            <span className={`status-dot-lg ${userData.available ? 'dot-green' : 'dot-red'}`} />
            {userData.available ? '✅ Verfügbar – zum Wechsel klicken' : '🔴 Nicht verfügbar – zum Wechsel klicken'}
          </button>
          <p className="availability-hint">
            Klicken Sie, um Ihre Verfügbarkeit zu ändern. Nur verfügbare Stöberhundeführer erscheinen in der öffentlichen Suchliste.
          </p>
        </div>

        {/* Contact Data */}
        <div className="stoeberhundefuehrer-contact-section">
          <div className="stoeberhundefuehrer-section-header">
            <h3>Kontaktdaten</h3>
            {!editing && (
              <button className="btn-stoeberhundefuehrer-edit" onClick={() => setEditing(true)}>Bearbeiten</button>
            )}
          </div>

          {!editing ? (
            <div className="stoeberhundefuehrer-info-list">
              <div className="stoeberhundefuehrer-info-row">
                <span className="info-label">Adresse</span>
                <span>{userData.address}</span>
              </div>
              <div className="stoeberhundefuehrer-info-row">
                <span className="info-label">Mobil</span>
                <a href={`tel:${userData.phone}`}>{userData.phone}</a>
              </div>
              {userData.landline && (
                <div className="stoeberhundefuehrer-info-row">
                  <span className="info-label">Festnetz</span>
                  <a href={`tel:${userData.landline}`}>{userData.landline}</a>
                </div>
              )}
            </div>
          ) : (
            <form onSubmit={handleSave} className="stoeberhundefuehrer-edit-form">
              <div className="form-group">
                <label>Adresse</label>
                <input type="text" value={formData.address}
                  onChange={e => setFormData({ ...formData, address: e.target.value })} required />
              </div>
              <div className="form-group">
                <label>Mobilnummer</label>
                <input type="tel" value={formData.phone}
                  onChange={e => setFormData({ ...formData, phone: e.target.value })} required />
              </div>
              <div className="form-group">
                <label>Festnetz (optional)</label>
                <input type="tel" value={formData.landline}
                  onChange={e => setFormData({ ...formData, landline: e.target.value })} />
              </div>
              <div className="stoeberhundefuehrer-form-actions">
                <button type="submit" className="btn-stoeberhundefuehrer-primary" disabled={saving}>
                  {saving ? 'Speichert...' : 'Speichern'}
                </button>
                <button type="button" className="btn-stoeberhundefuehrer-cancel" onClick={() => setEditing(false)}>
                  Abbrechen
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

export default StoeberhundefuehrerDashboard;
