/**
 * TASKMATE - Kontaktmanagement
 * =============================
 * Frontend-Modul für Kontakte
 * VERSION: 332-fixed-api-paths
 */

import { api } from './api.js';
import store from './store.js';
import { $, $$, createElement, formatDate, debounce } from './utils.js';

class ContactsManager {
  constructor() {
    this.container = null;
    this.currentView = 'list'; // list, detail, form
    this.currentContact = null;
    this.searchQuery = '';
    this.activeFilter = 'all'; // all, person, company
    this.isInitialized = false;
    
    // Bind methods
    this.handleSearch = debounce(this.handleSearch.bind(this), 300);
    this.handleContactClick = this.handleContactClick.bind(this);
    this.handleAddContact = this.handleAddContact.bind(this);
    this.handleFilterChange = this.handleFilterChange.bind(this);
  }

  async init() {
    console.log('[Contacts] Initializing... VERSION: 332-fixed-api-paths');
    
    this.container = $('#view-contacts');
    if (!this.container) {
      console.error('[Contacts] Container not found');
      return;
    }

    // Initial setup
    this.renderLayout();
    
    // Only load contacts if user is authenticated and project is selected
    const currentProject = store.getCurrentProject();
    if (currentProject && currentProject.id) {
      await this.loadContacts();
    } else {
      console.warn('[Contacts] Waiting for project selection before loading contacts');
    }
    
    // Subscribe to store updates
    this.subscribeToUpdates();
    
    this.isInitialized = true;
    console.log('[Contacts] Initialized');
  }

  renderLayout() {
    this.container.innerHTML = `
      <div class="contacts-layout">
        <!-- Hauptbereich ohne Sidebar -->
        <main class="contacts-main full-width">
          <div class="contacts-header">
            <div class="header-left">
              <h2>Kontakte</h2>
              <span class="contact-count">0 Kontakte</span>
            </div>
            
            <div class="header-center">
              <!-- Filter Buttons -->
              <div class="filter-buttons">
                <button class="filter-btn ${this.activeFilter === 'all' ? 'active' : ''}" data-filter="all">
                  Alle <span class="filter-badge" data-filter-count="all">0</span>
                </button>
                <button class="filter-btn ${this.activeFilter === 'person' ? 'active' : ''}" data-filter="person" title="Personen">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                  </svg>
                  <span class="filter-badge" data-filter-count="person">0</span>
                </button>
                <button class="filter-btn ${this.activeFilter === 'company' ? 'active' : ''}" data-filter="company" title="Institutionen">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 21h18"/>
                    <path d="M5 21V7l8-4v18"/>
                    <path d="M19 21V11l-6-4"/>
                    <path d="M9 9v.01"/>
                    <path d="M9 12v.01"/>
                    <path d="M9 15v.01"/>
                    <path d="M9 18v.01"/>
                  </svg>
                  <span class="filter-badge" data-filter-count="company">0</span>
                </button>
              </div>
            </div>

            <div class="header-actions">
              <button class="btn btn-primary" id="add-person-btn">
                <span style="font-weight: bold; margin-right: 4px;">+</span>
                Neuer Kontakt
              </button>
              <button class="btn btn-primary" id="add-company-btn">
                <span style="font-weight: bold; margin-right: 4px;">+</span>
                Neue Institution
              </button>
            </div>
          </div>
          
          <div class="contacts-content" id="contacts-content">
            <!-- Wird dynamisch gefüllt -->
          </div>
        </main>
      </div>
    `;

    // Bind events
    this.bindEvents();
  }

  bindEvents() {
    // Add person button
    const addPersonBtn = this.container.querySelector('#add-person-btn');
    if (addPersonBtn) {
      addPersonBtn.replaceWith(addPersonBtn.cloneNode(true));
      const newAddPersonBtn = this.container.querySelector('#add-person-btn');
      newAddPersonBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.showContactForm(null, 'person');
      });
    }

    // Add company/organization button
    const addCompanyBtn = this.container.querySelector('#add-company-btn');
    if (addCompanyBtn) {
      addCompanyBtn.replaceWith(addCompanyBtn.cloneNode(true));
      const newAddCompanyBtn = this.container.querySelector('#add-company-btn');
      newAddCompanyBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        this.showContactForm(null, 'company');
      });
    }

    // Filter button clicks
    const filterButtons = this.container.querySelectorAll('.filter-btn');
    filterButtons.forEach(btn => {
      btn.addEventListener('click', (e) => {
        const filter = e.currentTarget.dataset.filter;
        this.handleFilterChange({ target: { value: filter } });
      });
    });
  }

  async loadContacts() {
    try {
      const currentProject = store.getCurrentProject();
      if (!currentProject || !currentProject.id) {
        console.warn('[Contacts] No current project available');
        return;
      }

      const params = new URLSearchParams({
        project_id: currentProject.id
      });

      // Suche wird serverseitig gefiltert
      if (this.searchQuery) {
        params.append('search', this.searchQuery);
      }

      // NICHT mehr serverseitig filtern - alle Kontakte laden
      // Filter wird jetzt clientseitig in getFilteredContacts() angewendet

      const response = await api.request(`/contacts?${params}`);

      if (response.success) {
        this.allContacts = response.data;  // Alle Kontakte speichern
        this.updateCounts();
        this.renderContacts();
      }
    } catch (error) {
      console.error('[Contacts] Error loading contacts:', error);
      this.showError('Fehler beim Laden der Kontakte');
    }
  }

  getFilteredContacts() {
    if (!this.allContacts) return [];

    if (this.activeFilter === 'all') {
      return this.allContacts;
    }

    return this.allContacts.filter(c => c.type === this.activeFilter);
  }

  updateCounts() {
    const contacts = this.allContacts || [];

    // Gesamtzahl (zeigt gefilterte Anzahl)
    const filteredContacts = this.getFilteredContacts();
    const totalCount = this.container.querySelector('.contact-count');
    if (totalCount) {
      totalCount.textContent = `${filteredContacts.length} Kontakte`;
    }

    // Filter-Counts (zeigt immer alle Zahlen korrekt)
    const counts = {
      all: contacts.length,
      person: contacts.filter(c => c.type === 'person').length,
      company: contacts.filter(c => c.type === 'company').length
    };

    Object.entries(counts).forEach(([filter, count]) => {
      const element = this.container.querySelector(`[data-filter-count="${filter}"]`);
      if (element) {
        element.textContent = count;
      }
    });
  }

  renderContacts() {
    const content = this.container.querySelector('#contacts-content');
    if (!content) return;

    const contacts = this.getFilteredContacts();

    if (contacts.length === 0) {
      content.innerHTML = `
        <div class="empty-state">
          <svg class="empty-icon" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
            <circle cx="9" cy="7" r="4"/>
            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
          </svg>
          <h3>Keine Kontakte vorhanden</h3>
          <p>Erstellen Sie Ihren ersten Kontakt</p>
        </div>
      `;
      return;
    }

    // Gruppiere Kontakte alphabetisch
    const grouped = this.groupContactsByLetter(contacts);

    content.innerHTML = `
      <div class="contacts-list">
        ${Object.entries(grouped).map(([letter, contacts]) => `
          <div class="contact-group">
            <h3 class="group-letter">${letter}</h3>
            <div class="contact-cards">
              ${contacts.map(contact => this.renderContactCard(contact)).join('')}
            </div>
          </div>
        `).join('')}
      </div>
    `;

    // Bind click events
    content.querySelectorAll('.contact-card').forEach(card => {
      card.addEventListener('click', () => {
        const contactId = card.dataset.contactId;
        this.handleContactClick(contactId);
      });
    });
  }

  groupContactsByLetter(contacts) {
    const grouped = {};
    
    contacts.forEach(contact => {
      const firstLetter = (contact.display_name || '?')[0].toUpperCase();
      if (!grouped[firstLetter]) {
        grouped[firstLetter] = [];
      }
      grouped[firstLetter].push(contact);
    });

    // Sortiere die Gruppen
    return Object.keys(grouped)
      .sort()
      .reduce((result, key) => {
        result[key] = grouped[key];
        return result;
      }, {});
  }

  renderContactCard(contact) {
    const primaryEmail = contact.details?.find(d => d.type === 'email' && d.is_primary) ||
                        contact.details?.find(d => d.type === 'email');
    const primaryPhone = contact.details?.find(d => d.type === 'phone' && d.is_primary) ||
                        contact.details?.find(d => d.type === 'phone');

    // Icons für Avatar basierend auf Kontakttyp
    const avatarIcon = contact.type === 'person'
      ? `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
          <circle cx="12" cy="7" r="4"/>
        </svg>`
      : `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M3 21h18"/>
          <path d="M5 21V7l8-4v18"/>
          <path d="M19 21V11l-6-4"/>
          <path d="M9 9v.01"/>
          <path d="M9 12v.01"/>
          <path d="M9 15v.01"/>
          <path d="M9 18v.01"/>
        </svg>`;

    return `
      <div class="contact-card" data-contact-id="${contact.id}">
        <div class="contact-avatar" style="background-color: ${this.getAvatarColor(contact)}">
          ${contact.avatar_url
            ? `<img src="${contact.avatar_url}" alt="${contact.display_name}">`
            : avatarIcon
          }
        </div>

        <div class="contact-info">
          <h4 class="contact-name">${contact.display_name}</h4>

          ${contact.type === 'person' && contact.position ?
            `<p class="contact-position">${contact.position}
              ${contact.parent_company_name ? ` bei ${contact.parent_company_name}` : ''}
            </p>` : ''
          }

          ${contact.type === 'company' && contact.industry ?
            `<p class="contact-industry">${contact.industry}</p>` : ''
          }

          <div class="contact-details">
            ${primaryEmail ?
              `<span class="detail-item">
                <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                  <path d="M22 6l-10 7L2 6"/>
                </svg>
                ${primaryEmail.value}
              </span>` : ''
            }

            ${primaryPhone ?
              `<span class="detail-item">
                <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                ${primaryPhone.value}
              </span>` : ''
            }
          </div>
        </div>
      </div>
    `;
  }

  getInitials(contact) {
    if (contact.type === 'person') {
      const first = contact.first_name?.[0] || '';
      const last = contact.last_name?.[0] || '';
      return (first + last).toUpperCase() || '?';
    } else {
      return contact.company_name?.[0]?.toUpperCase() || '?';
    }
  }

  getAvatarColor(contact) {
    // Generiere eine konsistente Farbe basierend auf dem Namen
    const name = contact.display_name || '';
    let hash = 0;
    for (let i = 0; i < name.length; i++) {
      hash = name.charCodeAt(i) + ((hash << 5) - hash);
    }
    
    const colors = [
      '#3B82F6', '#EF4444', '#10B981', '#F59E0B', 
      '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16'
    ];
    
    return colors[Math.abs(hash) % colors.length];
  }

  async handleContactClick(contactId) {
    try {
      const response = await api.request(`/contacts/${contactId}`);
      if (response.success) {
        this.showContactDetail(response.data);
      }
    } catch (error) {
      console.error('[Contacts] Error loading contact:', error);
      this.showError('Fehler beim Laden des Kontakts');
    }
  }

  showContactDetail(contact) {
    console.log('[Contacts] showContactDetail called with:', contact);
    this.currentContact = contact;
    this.currentView = 'detail';
    
    const content = this.container.querySelector('#contacts-content');
    if (!content) return;

    const initials = this.getInitials(contact);
    
    content.innerHTML = `
      <div class="contact-detail">
        <div class="detail-header">
          <button class="btn-back" id="back-to-list">
            <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Zurück
          </button>
          
          <div class="detail-actions">
            <button class="btn btn-secondary" id="edit-contact">
              <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
              </svg>
              Bearbeiten
            </button>

            <button class="btn btn-danger" id="delete-contact">
              <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6"/>
              </svg>
              Löschen
            </button>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="detail-main">
            <div class="contact-header-detail">
              <div class="avatar-large" style="background-color: ${this.getAvatarColor(contact)}">
                ${contact.avatar_url 
                  ? `<img src="${contact.avatar_url}" alt="${contact.display_name}">` 
                  : `<span>${initials}</span>`
                }
              </div>
              
              <div class="contact-title">
                <h1>${contact.display_name}</h1>
                ${contact.type === 'person' && contact.position ? 
                  `<p class="subtitle">${contact.position}
                    ${contact.parent_company_name ? ` bei ${contact.parent_company_name}` : ''}
                  </p>` : ''
                }
                ${contact.type === 'company' && contact.industry ? 
                  `<p class="subtitle">${contact.industry}</p>` : ''
                }
              </div>
            </div>
            
            <!-- Kontaktdetails -->
            <section class="detail-section">
              <h3>Kontaktdaten</h3>
              <div class="details-grid">
                ${this.renderContactDetails(contact.details)}
              </div>
            </section>
            
            <!-- Weitere Informationen -->
            ${this.renderAdditionalInfo(contact)}
            
            <!-- Notizen -->
            ${contact.notes ? `
              <section class="detail-section">
                <h3>Notizen</h3>
                <div class="notes-content">${contact.notes}</div>
              </section>
            ` : ''}
            
            <!-- Interaktionen -->
            <section class="detail-section">
              <div class="section-header">
                <h3>Aktivitäten</h3>
                <button class="btn btn-sm" id="add-interaction">
                  <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                  Hinzufügen
                </button>
              </div>
              
              <div class="interactions-list">
                ${this.renderInteractions(contact.interactions)}
              </div>
            </section>
          </div>
          
          <aside class="detail-sidebar">
            <!-- Meta-Informationen -->
            <div class="sidebar-section">
              <h4>Informationen</h4>
              <dl class="meta-list">
                <dt>Erstellt am</dt>
                <dd>${formatDate(contact.created_at)}</dd>
                
                <dt>Erstellt von</dt>
                <dd>${contact.created_by_name || 'System'}</dd>
                
                ${contact.updated_at !== contact.created_at ? `
                  <dt>Aktualisiert</dt>
                  <dd>${formatDate(contact.updated_at)}</dd>
                ` : ''}
              </dl>
            </div>
          </aside>
        </div>
      </div>
    `;

    // Bind detail events
    this.bindDetailEvents();
  }

  renderContactDetails(details) {
    if (!details || details.length === 0) {
      return '<p class="text-muted">Keine Kontaktdaten vorhanden</p>';
    }

    const getIconSvg = (type) => {
      const icons = {
        email: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/>',
        phone: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>',
        mobile: '<rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><path d="M12 18h.01"/>',
        fax: '<path d="M6 9V2h12v7"/><rect x="6" y="9" width="12" height="12"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><circle cx="18" cy="12" r="1"/>',
        address: '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
        social: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'
      };
      return icons[type] || '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>';
    };

    return details.map(detail => `
      <div class="detail-item">
        <svg class="detail-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          ${getIconSvg(detail.type)}
        </svg>
        <div class="detail-content">
          <span class="detail-label">${detail.label}</span>
          <span class="detail-value">${detail.value}</span>
        </div>
      </div>
    `).join('');
  }

  renderAdditionalInfo(contact) {
    const sections = [];

    if (contact.type === 'person') {
      const fields = [];
      
      if (contact.salutation) fields.push(['Anrede', contact.salutation]);
      if (contact.department) fields.push(['Abteilung', contact.department]);
      
      if (fields.length > 0) {
        sections.push(`
          <section class="detail-section">
            <h3>Person</h3>
            <dl class="info-list">
              ${fields.map(([label, value]) => `
                <dt>${label}</dt>
                <dd>${value}</dd>
              `).join('')}
            </dl>
          </section>
        `);
      }
    }

    if (contact.type === 'company') {
      const fields = [];
      
      if (contact.company_type) fields.push(['Typ', contact.company_type]);
      if (contact.website) fields.push(['Website', `<a href="${contact.website}" target="_blank">${contact.website}</a>`]);

      if (fields.length > 0) {
        sections.push(`
          <section class="detail-section">
            <h3>Institution</h3>
            <dl class="info-list">
              ${fields.map(([label, value]) => `
                <dt>${label}</dt>
                <dd>${value}</dd>
              `).join('')}
            </dl>
          </section>
        `);
      }
    }

    return sections.join('');
  }

  renderInteractions(interactions) {
    if (!interactions || interactions.length === 0) {
      return '<p class="text-muted">Noch keine Aktivitäten vorhanden</p>';
    }

    const getIconSvg = (type) => {
      const icons = {
        call: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>',
        email: '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/>',
        meeting: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
        note: '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>',
        task: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>'
      };
      return icons[type] || '<circle cx="12" cy="12" r="10"/>';
    };

    const typeLabels = {
      call: 'Anruf',
      email: 'E-Mail',
      meeting: 'Treffen',
      note: 'Notiz',
      task: 'Aufgabe'
    };

    return interactions.map(interaction => `
      <div class="interaction-item">
        <div class="interaction-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            ${getIconSvg(interaction.type)}
          </svg>
        </div>

        <div class="interaction-content">
          <div class="interaction-header">
            <span class="interaction-type">${typeLabels[interaction.type]}</span>
            <span class="interaction-date">${formatDate(interaction.interaction_date)}</span>
          </div>

          ${interaction.subject ? `<h4>${interaction.subject}</h4>` : ''}
          ${interaction.content ? `<p>${interaction.content}</p>` : ''}
          
          <span class="interaction-author">von ${interaction.created_by_name}</span>
        </div>
      </div>
    `).join('');
  }

  bindDetailEvents() {
    // Back button
    const backBtn = this.container.querySelector('#back-to-list');
    if (backBtn) {
      backBtn.addEventListener('click', () => {
        this.currentView = 'list';
        this.renderContacts();
      });
    }

    // Edit button
    const editBtn = this.container.querySelector('#edit-contact');
    if (editBtn) {
      editBtn.addEventListener('click', () => {
        this.showContactForm(this.currentContact);
      });
    }

    // Delete button
    const deleteBtn = this.container.querySelector('#delete-contact');
    if (deleteBtn) {
      deleteBtn.addEventListener('click', () => {
        this.handleDeleteContact(this.currentContact);
      });
    }

    // Add interaction
    const addInteractionBtn = this.container.querySelector('#add-interaction');
    if (addInteractionBtn) {
      addInteractionBtn.addEventListener('click', () => {
        this.showInteractionModal();
      });
    }
  }

  showContactForm(contact = null, defaultType = 'person') {
    const isEdit = !!contact;
    const contactType = contact?.type || defaultType;
    this.currentView = 'form';

    try {
      // Erstelle Overlay
      const overlay = document.createElement('div');
      overlay.className = 'modal-overlay';
      overlay.setAttribute('data-close-modal', '');
      document.body.appendChild(overlay);

      // Erstelle Modal-Container
      const modal = document.createElement('div');
      modal.className = 'modal modal-large';

      // Titel basierend auf Typ und Edit-Modus
      const formTitle = isEdit
        ? 'Kontakt bearbeiten'
        : (contactType === 'company' ? 'Neue Institution' : 'Neuer Kontakt');

      // Build HTML string first
      const modalContent = `
        <div class="form-header">
          <h2>${formTitle}</h2>
          <button type="button" class="btn-close modal-close" data-close-modal>
            <svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </button>
        </div>
        
        <form id="contact-form" class="contact-form">
          <!-- Kontakttyp -->
          <div class="form-section">
            <label class="form-label">Kontakttyp</label>
            <div class="radio-group">
              <label class="radio-item">
                <input type="radio" name="type" value="person"
                  ${contactType === 'person' ? 'checked' : ''}>
                <span>Person</span>
              </label>

              <label class="radio-item">
                <input type="radio" name="type" value="company"
                  ${contactType === 'company' ? 'checked' : ''}>
                <span>Institution</span>
              </label>
            </div>
          </div>

          <!-- Dynamische Felder basierend auf Typ -->
          <div id="type-specific-fields">
            ${this.renderTypeSpecificFields(contactType, contact)}
          </div>
          
          <!-- Kontaktdetails -->
          <div class="form-section">
            <h3>Kontaktdaten</h3>
            <div id="contact-details-list" class="details-list">
              ${contact?.details ? 
                contact.details.map((d, i) => this.renderDetailField(d, i)).join('') :
                this.renderDetailField(null, 0)
              }
            </div>
            
            <button type="button" class="btn btn-secondary btn-sm" id="add-detail">
              <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 5v14M5 12h14"/>
              </svg>
              Kontaktdaten hinzufügen
            </button>
          </div>
          
          <!-- Notizen -->
          <div class="form-section">
            <label class="form-label">Notizen</label>
            <textarea name="notes" class="form-control" rows="4" 
              placeholder="Zusätzliche Informationen...">${contact?.notes || ''}</textarea>
          </div>
          
          <!-- Form Actions -->
          <div class="form-actions">
            <button type="button" class="btn btn-secondary" id="cancel-form">
              Abbrechen
            </button>
            <button type="button" class="btn btn-primary" id="submit-form">
              ${isEdit ? 'Speichern' : 'Erstellen'}
            </button>
          </div>
        </form>
    `;
    
    console.log('[Contacts] Setting modal innerHTML...');
    modal.innerHTML = modalContent;
    console.log('[Contacts] Modal innerHTML set');

    document.body.appendChild(modal);
    
    // Store overlay reference for cleanup
    modal._overlay = overlay;
    
    // Wait for DOM to be ready
    requestAnimationFrame(() => {
      console.log('[Contacts] Adding visible classes...');
      overlay.classList.add('visible');
      modal.classList.add('visible');
      
      // Double wait to ensure rendering is complete
      requestAnimationFrame(() => {
        console.log('[Contacts] Binding form events...');
        this.bindFormEvents(contact, modal);
      });
    });
    } catch (error) {
      console.error('[Contacts] Error showing contact form:', error);
      this.showError('Fehler beim Öffnen des Formulars');
    }
  }

  renderTypeSpecificFields(type, contact = null) {
    if (type === 'person') {
      return `
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Anrede</label>
            <select name="salutation" class="form-control">
              <option value="">-- Keine --</option>
              <option value="Herr" ${contact?.salutation === 'Herr' ? 'selected' : ''}>Herr</option>
              <option value="Frau" ${contact?.salutation === 'Frau' ? 'selected' : ''}>Frau</option>
              <option value="Dr." ${contact?.salutation === 'Dr.' ? 'selected' : ''}>Dr.</option>
              <option value="Prof." ${contact?.salutation === 'Prof.' ? 'selected' : ''}>Prof.</option>
            </select>
          </div>
          
          <div class="form-group">
            <label class="form-label">Vorname</label>
            <input type="text" name="first_name" class="form-control" 
              value="${contact?.first_name || ''}" placeholder="Max">
          </div>
          
          <div class="form-group">
            <label class="form-label">Nachname <span class="required">*</span></label>
            <input type="text" name="last_name" class="form-control" 
              value="${contact?.last_name || ''}" placeholder="Mustermann" required>
          </div>
        </div>
        
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Position</label>
            <input type="text" name="position" class="form-control" 
              value="${contact?.position || ''}" placeholder="Geschäftsführer">
          </div>
          
          <div class="form-group">
            <label class="form-label">Abteilung</label>
            <input type="text" name="department" class="form-control" 
              value="${contact?.department || ''}" placeholder="Vertrieb">
          </div>
          
          <div class="form-group">
            <label class="form-label">Institution</label>
            <select name="parent_company_id" class="form-control">
              <option value="">-- Keine Institution --</option>
              ${this.getCompanyOptions(contact?.parent_company_id)}
            </select>
          </div>
        </div>

      `;
    } else {
      return `
        <div class="form-row">
          <div class="form-group full-width">
            <label class="form-label">Name <span class="required">*</span></label>
            <input type="text" name="company_name" class="form-control"
              value="${contact?.company_name || ''}" placeholder="Musterinstitution GmbH" required>
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Institutionstyp</label>
            <input type="text" name="company_type" class="form-control"
              value="${contact?.company_type || ''}" placeholder="GmbH, e.V., etc.">
          </div>
          
          <div class="form-group">
            <label class="form-label">Branche</label>
            <input type="text" name="industry" class="form-control" 
              value="${contact?.industry || ''}" placeholder="IT">
          </div>
          
          <div class="form-group">
            <label class="form-label">Website</label>
            <input type="url" name="website" class="form-control"
              value="${contact?.website || ''}" placeholder="https://example.com">
          </div>
        </div>
      `;
    }
  }

  getCompanyOptions(selectedId = null) {
    // Filter nur Firmen aus den geladenen Kontakten
    const companies = this.allContacts?.filter(c => c.type === 'company') || [];
    
    return companies.map(company => `
      <option value="${company.id}" ${company.id === selectedId ? 'selected' : ''}>
        ${company.display_name}
      </option>
    `).join('');
  }

  renderDetailField(detail, index) {
    const types = {
      email: 'E-Mail',
      phone: 'Telefon',
      mobile: 'Mobil',
      fax: 'Fax',
      address: 'Adresse',
      social: 'Social Media'
    };

    const labels = {
      email: ['Geschäftlich', 'Privat', 'Andere'],
      phone: ['Arbeit', 'Privat', 'Andere'],
      mobile: ['Arbeit', 'Privat', 'Andere'],
      fax: ['Arbeit', 'Privat'],
      address: ['Geschäft', 'Privat', 'Andere'],
      social: ['LinkedIn', 'Twitter', 'Facebook', 'Instagram', 'XING', 'Andere']
    };

    return `
      <div class="detail-field" data-index="${index}">
        <div class="detail-controls">
          <select name="details[${index}][type]" class="form-control detail-type">
            ${Object.entries(types).map(([value, label]) => `
              <option value="${value}" ${detail?.type === value ? 'selected' : ''}>
                ${label}
              </option>
            `).join('')}
          </select>
          
          <select name="details[${index}][label]" class="form-control detail-label">
            ${(labels[detail?.type || 'email'] || labels.email).map(label => `
              <option value="${label}" ${detail?.label === label ? 'selected' : ''}>
                ${label}
              </option>
            `).join('')}
          </select>
          
          <input type="text" name="details[${index}][value]" class="form-control detail-value"
            value="${detail?.value || ''}" placeholder="Wert eingeben..." required>
          
          <label class="checkbox-primary">
            <input type="checkbox" name="details[${index}][is_primary]" 
              ${detail?.is_primary ? 'checked' : ''}>
            <span>Primär</span>
          </label>
          
          <button type="button" class="btn-icon btn-remove-detail" data-index="${index}">
            <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6"/>
            </svg>
          </button>
        </div>
      </div>
    `;
  }

  bindFormEvents(existingContact = null, modal = null) {
    console.log('[Contacts] bindFormEvents called');
    
    // Try with modal context first
    const form = modal ? modal.querySelector('#contact-form') : document.querySelector('#contact-form');
    if (!form) {
      console.error('[Contacts] Form not found!');
      return;
    }
    
    console.log('[Contacts] Form found, binding events...');
    
    // Double-check DOM is ready
    const buttons = form.querySelectorAll('button');
    console.log('[Contacts] Buttons found:', buttons.length);
    
    // List all buttons for debugging
    buttons.forEach((btn, idx) => {
      console.log(`[Contacts] Button ${idx}:`, btn.id, btn.className, btn.textContent.trim());
    });
    // Type change
    const typeInputs = form.querySelectorAll('input[name="type"]');
    typeInputs.forEach(input => {
      input.addEventListener('change', (e) => {
        const fieldsContainer = form.querySelector('#type-specific-fields');
        if (fieldsContainer) {
          fieldsContainer.innerHTML = this.renderTypeSpecificFields(e.target.value);
        }
      });
    });

    // Detail type change
    form.addEventListener('change', (e) => {
      if (e.target.classList.contains('detail-type')) {
        const index = e.target.closest('.detail-field').dataset.index;
        const labelSelect = form.querySelector(`select[name="details[${index}][label]"]`);
        
        // Update label options based on type
        const labels = {
          email: ['Geschäftlich', 'Privat', 'Andere'],
          phone: ['Arbeit', 'Privat', 'Andere'],
          mobile: ['Arbeit', 'Privat', 'Andere'],
          fax: ['Arbeit', 'Privat'],
          address: ['Geschäft', 'Privat', 'Andere'],
          social: ['LinkedIn', 'Twitter', 'Facebook', 'Instagram', 'XING', 'Andere']
        };

        const options = (labels[e.target.value] || labels.email).map(label => 
          `<option value="${label}">${label}</option>`
        ).join('');

        labelSelect.innerHTML = options;
      }
    });

    // Add detail
    const addDetailBtn = form.querySelector('#add-detail');
    if (addDetailBtn) {
      addDetailBtn.addEventListener('click', () => {
        const detailsList = form.querySelector('#contact-details-list');
        const currentCount = detailsList.querySelectorAll('.detail-field').length;
        
        const newField = document.createElement('div');
        newField.innerHTML = this.renderDetailField(null, currentCount);
        detailsList.appendChild(newField.firstElementChild);
      });
    }

    // Remove detail
    form.addEventListener('click', (e) => {
      if (e.target.closest('.btn-remove-detail')) {
        const field = e.target.closest('.detail-field');
        field.remove();
        
        // Reindex remaining fields
        form.querySelectorAll('.detail-field').forEach((field, index) => {
          field.dataset.index = index;
          field.querySelectorAll('[name^="details["]').forEach(input => {
            input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
          });
        });
      }
    });

    // Close form
    const closeModal = () => {
      if (modal && modal._overlay) {
        modal.classList.remove('visible');
        modal._overlay.classList.remove('visible');
        
        setTimeout(() => {
          modal.remove();
          modal._overlay.remove();
        }, 300);
      }
      
      if (existingContact) {
        this.showContactDetail(existingContact);
      } else {
        this.currentView = 'list';
        this.renderContacts();
      }
    };

    // Modal close handlers
    if (modal) {
      modal.querySelectorAll('[data-close-modal]').forEach(btn => {
        btn.addEventListener('click', closeModal);
      });
      
      // Overlay click to close
      if (modal._overlay) {
        modal._overlay.addEventListener('click', closeModal);
      }
    }

    // Use event delegation for buttons
    form.addEventListener('click', async (e) => {
      // Check if click was on submit button
      if (e.target.id === 'submit-form' || e.target.classList.contains('btn-primary')) {
        console.log('[Contacts] Submit button clicked via delegation');
        e.preventDefault();
        e.stopPropagation();
        
        try {
          await this.handleFormSubmit(form, existingContact, modal);
        } catch (error) {
          console.error('[Contacts] Form submit error:', error);
        }
      }
      
      // Check if click was on cancel button
      if (e.target.id === 'cancel-form') {
        console.log('[Contacts] Cancel button clicked');
        e.preventDefault();
        closeModal();
      }
    });
    
    // Prevent form submit just in case
    form.addEventListener('submit', (e) => {
      console.log('[Contacts] Form submit prevented');
      e.preventDefault();
      return false;
    });
  }

  async handleFormSubmit(form, existingContact = null, modal = null) {
    console.log('[Contacts] handleFormSubmit called');
    const formData = new FormData(form);
    const currentProject = store.getCurrentProject();
    
    if (!currentProject || !currentProject.id) {
      this.showError('Kein Projekt ausgewählt');
      return;
    }
    
    const data = {
      type: formData.get('type'),
      project_id: currentProject.id,
      details: []
    };

    // Type-specific fields
    if (data.type === 'person') {
      data.salutation = formData.get('salutation') || null;
      data.first_name = formData.get('first_name') || null;
      data.last_name = formData.get('last_name') || null;
      data.position = formData.get('position') || null;
      data.department = formData.get('department') || null;
      data.birth_date = formData.get('birth_date') || null;
      data.parent_company_id = formData.get('parent_company_id') || null;
      
      // Validierung für Person
      if (!data.last_name) {
        this.showError('Nachname ist erforderlich');
        return;
      }
      
      // Generate display_name
      data.display_name = `${data.first_name || ''} ${data.last_name || ''}`.trim();
    } else {
      data.company_name = formData.get('company_name') || null;
      data.company_type = formData.get('company_type') || null;
      data.industry = formData.get('industry') || null;
      data.website = formData.get('website') || null;
      
      // Validierung für Firma
      if (!data.company_name) {
        this.showError('Firmenname ist erforderlich');
        return;
      }
      
      // Set display_name for company
      data.display_name = data.company_name;
    }

    // Common fields
    data.notes = formData.get('notes') || null;

    // Details
    const detailFields = form.querySelectorAll('.detail-field');
    detailFields.forEach((field, index) => {
      const type = form.querySelector(`select[name="details[${index}][type]"]`)?.value;
      const label = form.querySelector(`select[name="details[${index}][label]"]`)?.value;
      const value = form.querySelector(`input[name="details[${index}][value]"]`)?.value;
      const isPrimary = form.querySelector(`input[name="details[${index}][is_primary]"]`)?.checked;

      if (value) {
        data.details.push({
          type,
          label,
          value,
          is_primary: isPrimary
        });
      }
    });


    try {
      const isEdit = !!existingContact;
      const url = isEdit 
        ? `/contacts/${existingContact.id}`
        : '/contacts';
      
      const method = isEdit ? 'PUT' : 'POST';
      
      console.log('[Contacts] Sending request:', method, url, data);
      const response = await api.request(url, {
        method: method,
        body: data
      });
      console.log('[Contacts] API Response:', response);

      if (response.success) {
        this.showSuccess(response.message || `Kontakt erfolgreich ${isEdit ? 'aktualisiert' : 'erstellt'}`);
        
        // Close modal with animation
        if (modal && modal._overlay) {
          modal.classList.remove('visible');
          modal._overlay.classList.remove('visible');
          
          setTimeout(() => {
            modal.remove();
            modal._overlay.remove();
          }, 300);
        }
        
        await this.loadContacts();
        
        // Zur Detailansicht wechseln
        if (response.data && response.data.id) {
          console.log('[Contacts] Loading full contact details for ID:', response.data.id);
          
          // Load full contact details
          try {
            const detailResponse = await api.request(`/contacts/${response.data.id}`);
            if (detailResponse.success && detailResponse.data) {
              this.showContactDetail(detailResponse.data);
            } else {
              console.error('[Contacts] Could not load contact details');
              await this.loadContacts();
            }
          } catch (error) {
            console.error('[Contacts] Error loading contact details:', error);
            await this.loadContacts();
          }
        } else {
          console.error('[Contacts] No data in response!');
          await this.loadContacts();
        }
      }
    } catch (error) {
      console.error('[Contacts] Error saving contact:', error);
      this.showError(error.message || 'Fehler beim Speichern des Kontakts');
    }
  }

  async handleDeleteContact(contact) {
    if (!confirm(`Möchten Sie den Kontakt "${contact.display_name}" wirklich löschen?`)) {
      return;
    }

    try {
      const response = await api.request(`/contacts/${contact.id}`, {
        method: 'DELETE'
      });
      
      if (response.success) {
        this.showSuccess('Kontakt erfolgreich gelöscht');
        await this.loadContacts();
        this.currentView = 'list';
        this.renderContacts();
      }
    } catch (error) {
      console.error('[Contacts] Error deleting contact:', error);
      this.showError('Fehler beim Löschen des Kontakts');
    }
  }

  showInteractionModal() {
    const modal = document.createElement('div');
    modal.className = 'modal modal-medium';
    modal.innerHTML = `
      <div class="modal-header">
        <h2>Neue Aktivität hinzufügen</h2>
        <button class="modal-close" data-close-modal>&times;</button>
      </div>
      
      <form id="interaction-form" class="modal-body">
        <div class="form-group">
          <label class="form-label">Typ</label>
          <select name="type" class="form-control" required>
            <option value="call">Anruf</option>
            <option value="email">E-Mail</option>
            <option value="meeting">Treffen</option>
            <option value="note">Notiz</option>
            <option value="task">Aufgabe</option>
          </select>
        </div>
        
        <div class="form-group">
          <label class="form-label">Betreff</label>
          <input type="text" name="subject" class="form-control" placeholder="Kurze Zusammenfassung">
        </div>
        
        <div class="form-group">
          <label class="form-label">Beschreibung</label>
          <textarea name="content" class="form-control" rows="4" placeholder="Details..."></textarea>
        </div>
      </form>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" form="interaction-form" class="btn btn-primary">Hinzufügen</button>
      </div>
    `;

    document.body.appendChild(modal);
    modal.classList.add('show');

    // Handle form submit
    const form = modal.querySelector('#interaction-form');
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      
      const formData = new FormData(form);
      const data = {
        type: formData.get('type'),
        subject: formData.get('subject'),
        content: formData.get('content')
      };

      try {
        const response = await api.request(
          `/contacts/${this.currentContact.id}/interactions`, 
          {
            method: 'POST',
            body: data
          }
        );

        if (response.success) {
          this.showSuccess('Aktivität hinzugefügt');
          
          // Refresh contact detail
          const contactResponse = await api.request(`/contacts/${this.currentContact.id}`);
          if (contactResponse.success) {
            this.showContactDetail(contactResponse.data);
          }

          // Close modal
          modal.remove();
        }
      } catch (error) {
        console.error('[Contacts] Error adding interaction:', error);
        this.showError('Fehler beim Hinzufügen der Aktivität');
      }
    });

    // Close modal events
    modal.querySelectorAll('[data-close-modal]').forEach(btn => {
      btn.addEventListener('click', () => modal.remove());
    });
  }

  handleAddContact() {
    this.showContactForm();
  }

  handleFilterChange(e) {
    this.activeFilter = e.target.value;

    // Update active state for buttons
    this.container.querySelectorAll('.filter-btn').forEach(btn => {
      btn.classList.toggle('active',
        btn.dataset.filter === this.activeFilter
      );
    });

    // Nur Anzeige aktualisieren, nicht neu laden
    this.updateCounts();
    this.renderContacts();
  }

  handleSearch(value) {
    this.searchQuery = value;
    this.loadContacts();
  }

  filterData() {
    // Called by global search
    this.handleSearch(this.searchQuery);
  }

  subscribeToUpdates() {
    // Subscribe to relevant store updates
    window.addEventListener('contact:created', () => this.loadContacts());
    window.addEventListener('contact:updated', () => this.loadContacts());
    window.addEventListener('contact:deleted', () => this.loadContacts());
    
    // Subscribe to project changes to reload contacts
    store.subscribe('projects', () => {
      if (this.isInitialized) {
        this.loadContacts();
      }
    });
  }

  showError(message) {
    window.dispatchEvent(new CustomEvent('toast:show', {
      detail: { message, type: 'error' }
    }));
  }

  showSuccess(message) {
    window.dispatchEvent(new CustomEvent('toast:show', {
      detail: { message, type: 'success' }
    }));
  }
}

// Export singleton
export const contactsManager = new ContactsManager();

export function initContacts() {
  return contactsManager.init();
}