collabrix/frontend/src/components/Kanban/KanbanCardModal.tsx

import React, { useState, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { departmentsAPI, kanbanAPI } from '../../services/api';
import ConfirmDialog from '../Common/ConfirmDialog';
import type { KanbanCard, User, Department, KanbanChecklistWithItems } from '../../types';

const AddChecklistItemForm: React.FC<{ checklistId: number; onAdd: (checklistId: number, title: string) => void }> = ({ checklistId, onAdd }) => {
  const [title, setTitle] = useState('');
  const [isAdding, setIsAdding] = useState(false);

  const handleSubmit = () => {
    if (title.trim()) {
      onAdd(checklistId, title);
      setTitle('');
      setIsAdding(false);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSubmit();
    } else if (e.key === 'Escape') {
      setTitle('');
      setIsAdding(false);
    }
  };

  if (!isAdding) {
    return (
      <button
        onClick={() => setIsAdding(true)}
        className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
        </svg>
        Aufgabe hinzufügen
      </button>
    );
  }

  return (
    <div className="flex items-center gap-2">
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        onKeyPress={handleKeyPress}
        placeholder="Aufgaben-Titel eingeben..."
        className="flex-1 p-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
        autoFocus
      />
      <button
        onClick={handleSubmit}
        className="px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600"
      >
        Hinzufügen
      </button>
      <button
        onClick={() => {
          setTitle('');
          setIsAdding(false);
        }}
        className="px-2 py-1 text-xs bg-gray-500 text-white rounded hover:bg-gray-600"
      >
        Abbrechen
      </button>
    </div>
  );
};

interface KanbanCardModalProps {
  card: KanbanCard;
  onClose: () => void;
  onUpdate: (cardId: number, updates: Partial<KanbanCard>) => void;
}

const KanbanCardModal: React.FC<KanbanCardModalProps> = ({
  card,
  onClose,
  onUpdate
}) => {
  const { user } = useAuth();
  const [title, setTitle] = useState(card.title);
  const [description, setDescription] = useState(card.description || '');
  const [assigneeId, setAssigneeId] = useState<number | undefined>(card.assignee_id);
  const [dueDate, setDueDate] = useState(card.due_date ? card.due_date.split('T')[0] : '');
  const [priority, setPriority] = useState<'low' | 'medium' | 'high'>(card.priority || 'medium');
  const [labels, setLabels] = useState(card.labels || '');
  const [availableUsers, setAvailableUsers] = useState<User[]>([]);
  const [checklists, setChecklists] = useState<KanbanChecklistWithItems[]>([]);
  const [showChecklistForm, setShowChecklistForm] = useState(false);
  const [newChecklistTitle, setNewChecklistTitle] = useState('');
  const [activeTab, setActiveTab] = useState<'overview' | 'attachments' | 'comments' | 'activity'>('overview');
  const [comments, setComments] = useState<any[]>([]);
  const [newComment, setNewComment] = useState('');
  const [attachments, setAttachments] = useState<any[]>([]);
  const [uploading, setUploading] = useState(false);
  const [postingComment, setPostingComment] = useState(false);
  const [activity, setActivity] = useState<any[]>([]);
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  // Confirm Dialog States
  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
  const [deleteItemType, setDeleteItemType] = useState<'comment' | 'attachment' | null>(null);
  const [deleteItemId, setDeleteItemId] = useState<number | null>(null);

  useEffect(() => {
    loadAvailableUsers();
  }, []);

  const loadAvailableUsers = async () => {
    if (!user) return;

    try {
      // Get all departments the user has access to
      const departments: Department[] = await departmentsAPI.getMy();

      // Collect all users from these departments
      const userSet = new Map<number, User>();

      for (const dept of departments) {
        try {
          const deptUsers: User[] = await departmentsAPI.getUsers(dept.id);
          for (const deptUser of deptUsers) {
            userSet.set(deptUser.id, deptUser);
          }
        } catch (error) {
          console.error(`Failed to load users for department ${dept.id}:`, error);
        }
      }

      setAvailableUsers(Array.from(userSet.values()));
    } catch (error) {
      console.error('Failed to load available users:', error);
    }
  };

  useEffect(() => {
    if (activeTab === 'activity') {
      loadActivity();
    }
  }, [activeTab, card.id]);

  const loadActivity = async () => {
    try {
      const activityData = await kanbanAPI.getCardActivity(card.id);
      setActivity(activityData);
    } catch (error) {
      console.error('Failed to load activity:', error);
    }
  };

  // Auto-save functions for individual fields
  const autoSaveTitle = () => {
    if (title.trim() !== card.title) {
      onUpdate(card.id, { title: title.trim() });
    }
  };

  const autoSaveDescription = () => {
    const desc = description.trim() || undefined;
    if (desc !== (card.description || undefined)) {
      onUpdate(card.id, { description: desc });
    }
  };

  const autoSavePriority = () => {
    if (priority !== (card.priority || 'medium')) {
      onUpdate(card.id, { priority });
    }
  };

  const autoSaveDueDate = () => {
    const date = dueDate ? new Date(dueDate).toISOString() : undefined;
    if (date !== card.due_date) {
      onUpdate(card.id, { due_date: date });
    }
  };

  const autoSaveLabels = () => {
    const lbls = labels.trim() || undefined;
    if (lbls !== (card.labels || undefined)) {
      onUpdate(card.id, { labels: lbls });
    }
  };

  // Checklist functions
  const loadChecklists = async () => {
    try {
      const cardChecklists = await kanbanAPI.getCardChecklists(card.id);
      setChecklists(cardChecklists);
    } catch (error) {
      console.error('Failed to load checklists:', error);
    }
  };

  const handleCreateChecklist = async () => {
    if (!newChecklistTitle.trim()) return;

    try {
      const newChecklist = await kanbanAPI.createChecklist({
        card_id: card.id,
        title: newChecklistTitle.trim(),
        position: checklists.length
      });

      setChecklists(prev => [...prev, { ...newChecklist, items: [] }]);
      setNewChecklistTitle('');
      setShowChecklistForm(false);
    } catch (error) {
      console.error('Failed to create checklist:', error);
    }
  };

  const handleDeleteChecklist = async (checklistId: number) => {
    if (!confirm('Checkliste wirklich löschen?')) return;

    try {
      await kanbanAPI.deleteChecklist(checklistId);
      setChecklists(prev => prev.filter(c => c.id !== checklistId));
    } catch (error) {
      console.error('Failed to delete checklist:', error);
    }
  };

  const handleCreateChecklistItem = async (checklistId: number, title: string) => {
    try {
      const checklist = checklists.find(c => c.id === checklistId);
      if (!checklist) return;

      const newItem = await kanbanAPI.createChecklistItem({
        checklist_id: checklistId,
        title: title.trim(),
        position: checklist.items.length
      });

      setChecklists(prev => prev.map(c =>
        c.id === checklistId
          ? { ...c, items: [...c.items, newItem] }
          : c
      ));
    } catch (error) {
      console.error('Failed to create checklist item:', error);
    }
  };

  const handleToggleChecklistItem = async (itemId: number, completed: boolean) => {
    try {
      await kanbanAPI.updateChecklistItem(itemId, { is_completed: completed });

      setChecklists(prev => prev.map(checklist => ({
        ...checklist,
        items: checklist.items.map(item =>
          item.id === itemId ? { ...item, is_completed: completed } : item
        )
      })));
    } catch (error) {
      console.error('Failed to update checklist item:', error);
    }
  };

  const handleDeleteChecklistItem = async (itemId: number) => {
    try {
      await kanbanAPI.deleteChecklistItem(itemId);

      setChecklists(prev => prev.map(checklist => ({
        ...checklist,
        items: checklist.items.filter(item => item.id !== itemId)
      })));
    } catch (error) {
      console.error('Failed to delete checklist item:', error);
    }
  };

  useEffect(() => {
    loadAvailableUsers();
    loadChecklists();
    loadAttachments();
    loadComments();
  }, []);

  const loadComments = async () => {
    try {
      const data = await kanbanAPI.getCardComments(card.id);
      setComments(Array.isArray(data) ? data : []);
    } catch (error) {
      console.error('Failed to load comments:', error);
      setComments([]);
    }
  };

  const handlePostComment = async () => {
    if (!newComment.trim()) return;

    setPostingComment(true);
    try {
      const comment = await kanbanAPI.createComment({
        card_id: card.id,
        content: newComment.trim()
      });
      setComments(prev => [...prev, comment]);
      setNewComment('');
    } catch (error) {
      console.error('Failed to post comment:', error);
      alert('Fehler beim Posten des Kommentars');
    } finally {
      setPostingComment(false);
    }
  };

  const handleDeleteComment = (commentId: number) => {
    setDeleteItemType('comment');
    setDeleteItemId(commentId);
    setShowConfirmDialog(true);
  };

  const loadAttachments = async () => {
    try {
      const data = await kanbanAPI.getCardAttachments(card.id);
      setAttachments(Array.isArray(data) ? data : []);
    } catch (error) {
      console.error('Failed to load attachments:', error);
      setAttachments([]);
    }
  };

  const handleUploadAttachment = async (file: File) => {
    if (!file) return;

    setUploading(true);
    try {
      const newAttachment = await kanbanAPI.uploadAttachment(card.id, file);
      setAttachments(prev => [...prev, newAttachment]);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    } catch (error) {
      console.error('Failed to upload attachment:', error);
      alert('Fehler beim Hochladen der Datei');
    } finally {
      setUploading(false);
    }
  };

  const handleDeleteAttachment = (attachmentId: number) => {
    setDeleteItemType('attachment');
    setDeleteItemId(attachmentId);
    setShowConfirmDialog(true);
  };

  const handleConfirmDelete = async () => {
    if (!deleteItemId || !deleteItemType) return;

    try {
      if (deleteItemType === 'attachment') {
        await kanbanAPI.deleteAttachment(deleteItemId);
        setAttachments(prev => prev.filter(a => a.id !== deleteItemId));
      } else if (deleteItemType === 'comment') {
        await kanbanAPI.deleteComment(deleteItemId);
        setComments(prev => prev.filter(c => c.id !== deleteItemId));
      }
    } catch (error) {
      console.error('Failed to delete item:', error);
    } finally {
      setShowConfirmDialog(false);
      setDeleteItemType(null);
      setDeleteItemId(null);
    }
  };

  const handleDownloadAttachment = async (attachment: any) => {
    try {
      const blob = await kanbanAPI.downloadAttachment(attachment.id);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = attachment.original_filename || attachment.filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error('Failed to download attachment:', error);
    }
  };

  return (
    <div 
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
      onClick={(e) => {
        if (e.target === e.currentTarget) {
          onClose();
        }
      }}
    >
      <div className="bg-gray-50 dark:bg-gray-800 rounded-lg shadow-xl w-[900px] mx-4 h-[85vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-3 border-b border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 gap-2">
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            onBlur={autoSaveTitle}
            className="flex-1 text-xl font-bold text-gray-900 dark:text-white bg-transparent border-b border-transparent hover:border-gray-300 dark:hover:border-gray-600 focus:border-blue-500 focus:outline-none resize-none overflow-y-auto max-h-20"
            placeholder="Kartentitel eingeben..."
            style={{ minHeight: '2rem' }}
          />

          <div className="flex items-center gap-2">
            {card.is_archived && (
              <button
                onClick={() => onUpdate(card.id, { is_archived: false })}
                className="px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900 rounded-lg transition-colors"
                title="Karte wiederherstellen"
              >
                <svg className="w-5 h-5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Wiederherstellen
              </button>
            )}
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 p-1"
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        {/* Tabs Navigation */}
        <div className="flex border-b border-gray-300 dark:border-gray-700 overflow-x-auto bg-white dark:bg-gray-800">
          <button
            onClick={() => setActiveTab('overview')}
            className={`px-4 py-3 font-medium whitespace-nowrap transition-colors ${
              activeTab === 'overview'
                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            }`}
          >
            Details & Einstellungen
          </button>
          <button
            onClick={() => setActiveTab('attachments')}
            className={`px-4 py-3 font-medium whitespace-nowrap transition-colors flex items-center gap-1 ${
              activeTab === 'attachments'
                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            }`}
          >
            Anhänge
            {attachments.length > 0 && (
              <span className="text-xs bg-gray-300 dark:bg-gray-600 px-1.5 py-0.5 rounded-full">
                {attachments.length}
              </span>
            )}
          </button>
          <button
            onClick={() => setActiveTab('comments')}
            className={`px-4 py-3 font-medium whitespace-nowrap transition-colors flex items-center gap-1 ${
              activeTab === 'comments'
                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            }`}
          >
            Kommentare
            {comments.length > 0 && (
              <span className="text-xs bg-gray-300 dark:bg-gray-600 px-1.5 py-0.5 rounded-full">
                {comments.length}
              </span>
            )}
          </button>
          <button
            onClick={() => setActiveTab('activity')}
            className={`px-4 py-3 font-medium whitespace-nowrap transition-colors ${
              activeTab === 'activity'
                ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
            }`}
          >
            Aktivität
          </button>
        </div>

        {/* Content */}
        <div className="p-4 bg-gray-50 dark:bg-gray-800">
          {/* Overview Tab - Details & Einstellungen */}
          {activeTab === 'overview' && (
            <div className="space-y-3">
              {/* Description */}
              <div className="bg-white dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  Beschreibung
                </label>
                <textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  onBlur={autoSaveDescription}
                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                  rows={4}
                  placeholder="Beschreibung hinzufügen..."
                />
              </div>

              {/* Priority & Due Date */}
              <div className="grid grid-cols-2 gap-4 bg-white dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Priorität
                  </label>
                  <select
                    value={priority}
                    onChange={(e) => {
                      setPriority(e.target.value as 'low' | 'medium' | 'high');
                      autoSavePriority();
                    }}
                    className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                  >
                    <option value="low">Niedrig</option>
                    <option value="medium">Mittel</option>
                    <option value="high">Hoch</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Fälligkeitsdatum
                  </label>
                  <input
                    type="date"
                    value={dueDate}
                    onChange={(e) => setDueDate(e.target.value)}
                    onBlur={autoSaveDueDate}
                    className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                  />
                </div>
              </div>

              {/* Assignee & Labels */}
              <div className="grid grid-cols-2 gap-4 bg-white dark:bg-gray-700 p-3 rounded-lg border border-gray-200 dark:border-gray-600">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Zugewiesen an
                  </label>
                  <select
                    value={assigneeId || ''}
                    onChange={(e) => {
                      const newAssigneeId = e.target.value ? parseInt(e.target.value) : undefined;
                      setAssigneeId(newAssigneeId);
                      // Check and save immediately with new value
                      if (newAssigneeId !== card.assignee_id) {
                        onUpdate(card.id, { assignee_id: newAssigneeId });
                      }
                    }}
                    className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                  >
                    <option value="">Nicht zugewiesen</option>
                    {availableUsers.map((user) => (
                      <option key={user.id} value={user.id}>
                        {user.username} {user.full_name && `(${user.full_name})`}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Labels (kommagetrennt)
                  </label>
                  <input
                    type="text"
                    value={labels}
                    onChange={(e) => setLabels(e.target.value)}
                    onBlur={autoSaveLabels}
                    className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                    placeholder="z.B. bug, feature, urgent"
                  />
                </div>
              </div>

              {/* Checklists */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
                    Checklisten
                  </label>
                  <button
                    onClick={() => setShowChecklistForm(true)}
                    className="px-3 py-1 text-sm bg-green-500 text-white rounded hover:bg-green-600"
                  >
                    + Checkliste
                  </button>
                </div>

                {/* New Checklist Form */}
                {showChecklistForm && (
                  <div className="mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <div className="flex gap-2">
                      <input
                        type="text"
                        value={newChecklistTitle}
                        onChange={(e) => setNewChecklistTitle(e.target.value)}
                        placeholder="Checklisten-Titel eingeben..."
                        className="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                        onKeyPress={(e) => e.key === 'Enter' && handleCreateChecklist()}
                      />
                      <button
                        onClick={handleCreateChecklist}
                        className="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
                      >
                        Hinzufügen
                      </button>
                      <button
                        onClick={() => {
                          setShowChecklistForm(false);
                          setNewChecklistTitle('');
                        }}
                        className="px-3 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
                      >
                        Abbrechen
                      </button>
                    </div>
                  </div>
                )}

                {/* Checklists */}
                <div className="space-y-4">
                  {checklists.map((checklist) => (
                    <div key={checklist.id} className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-700">
                      <div className="flex items-center justify-between mb-3">
                        <h4 className="font-medium text-gray-900 dark:text-white">{checklist.title}</h4>
                        <button
                          onClick={() => handleDeleteChecklist(checklist.id)}
                          className="text-gray-400 hover:text-red-500 p-1"
                          title="Checkliste löschen"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                          </svg>
                        </button>
                      </div>

                      {/* Checklist Items */}
                      <div className="space-y-2">
                        {checklist.items.map((item) => (
                          <div key={item.id} className="flex items-center gap-2">
                            <input
                              type="checkbox"
                              checked={item.is_completed}
                              onChange={(e) => handleToggleChecklistItem(item.id, e.target.checked)}
                              className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                            />
                            <span className={`flex-1 text-sm ${item.is_completed ? 'line-through text-gray-500' : 'text-gray-900 dark:text-white'}`}>
                              {item.title}
                            </span>
                            <button
                              onClick={() => handleDeleteChecklistItem(item.id)}
                              className="text-gray-400 hover:text-red-500 p-1"
                              title="Aufgabe löschen"
                            >
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                              </svg>
                            </button>
                          </div>
                        ))}

                        {/* Add new item */}
                        <AddChecklistItemForm checklistId={checklist.id} onAdd={handleCreateChecklistItem} />
                      </div>

                      {/* Progress */}
                      <div className="mt-3 text-xs text-gray-500">
                        {checklist.items.filter(item => item.is_completed).length} von {checklist.items.length} Aufgaben erledigt
                      </div>
                    </div>
                  ))}

                  {checklists.length === 0 && !showChecklistForm && (
                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                      Keine Checklisten vorhanden. Klicke auf "+ Checkliste" um eine hinzuzufügen.
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

          {/* Attachments Tab */}
          {activeTab === 'attachments' && (
            <div className="space-y-2">
              {/* Upload Area */}
              <div
                className="border-2 border-dashed border-gray-400 dark:border-gray-600 rounded-lg p-4 text-center hover:border-blue-500 dark:hover:border-blue-400 transition-colors cursor-pointer bg-white dark:bg-gray-700"
                onClick={() => fileInputRef.current?.click()}
                onDrop={(e) => {
                  e.preventDefault();
                  const files = e.dataTransfer.files;
                  if (files.length > 0) {
                    handleUploadAttachment(files[0]);
                  }
                }}
                onDragOver={(e) => {
                  e.preventDefault();
                }}
              >
                <input
                  ref={fileInputRef}
                  type="file"
                  onChange={(e) => {
                    if (e.target.files && e.target.files.length > 0) {
                      handleUploadAttachment(e.target.files[0]);
                    }
                  }}
                  className="hidden"
                  disabled={uploading}
                />
                <svg className="w-8 h-8 mx-auto mb-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                <p className="text-sm text-gray-600 dark:text-gray-300 font-medium mb-1">
                  {uploading ? 'Wird hochgeladen...' : 'Datei hochladen'}
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  {uploading ? 'Bitte warten...' : 'Klicken oder ziehen'}
                </p>
              </div>

              {/* Files List */}
              <div className="space-y-2">
                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                  Hochgeladene Dateien ({attachments.length})
                </h3>
                {attachments.length === 0 ? (
                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                    Noch keine Anhänge vorhanden
                  </div>
                ) : (
                  <div className="space-y-2">
                    {attachments.map((attachment: any) => (
                      <div key={attachment.id} className="flex items-center justify-between p-3 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg">
                        <div className="flex items-center gap-2 flex-1 min-w-0">
                          <svg className="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                          </svg>
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
                              {attachment.filename || attachment.name}
                            </p>
                            <p className="text-xs text-gray-500 dark:text-gray-400">
                              {attachment.created_at ? new Date(attachment.created_at).toLocaleDateString('de-DE') : ''}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <button
                            onClick={() => handleDownloadAttachment(attachment)}
                            className="text-gray-400 hover:text-blue-500 p-2"
                            title="Anhang herunterladen"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                          </button>
                          <button
                            onClick={() => handleDeleteAttachment(attachment.id)}
                            className="text-gray-400 hover:text-red-500 p-2"
                            title="Anhang löschen"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Kommentare Tab */}
          {activeTab === 'comments' && (
            <div className="space-y-2">
              {/* Add Comment Form */}
              <div className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-white dark:bg-gray-700">
                <textarea
                  value={newComment}
                  onChange={(e) => setNewComment(e.target.value)}
                  placeholder="Schreiben Sie einen Kommentar..."
                  className="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm resize-none"
                  rows={3}
                  disabled={postingComment}
                />
                <div className="flex gap-2 mt-2">
                  <button
                    onClick={handlePostComment}
                    disabled={postingComment || !newComment.trim()}
                    className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {postingComment ? 'Wird gepostet...' : 'Kommentar hinzufügen'}
                  </button>
                </div>
              </div>

              {/* Comments List */}
              <div className="space-y-3">
                {comments.length === 0 ? (
                  <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                    Noch keine Kommentare vorhanden. Schreiben Sie den ersten Kommentar!
                  </div>
                ) : (
                  comments.map((comment: any) => (
                    <div key={comment.id} className="border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-700">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <div className="font-medium text-sm text-gray-900 dark:text-white">
                            {comment.user?.username || comment.user?.full_name || 'Unbekannter Nutzer'}
                          </div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">
                            {comment.created_at ? new Date(comment.created_at).toLocaleString('de-DE') : ''}
                          </div>
                        </div>
                        {user?.username === comment.user?.username && (
                          <button
                            onClick={() => handleDeleteComment(comment.id)}
                            className="text-gray-400 hover:text-red-500 p-1"
                            title="Kommentar löschen"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        )}
                      </div>
                      <p className="text-sm text-gray-700 dark:text-gray-300 break-words">
                        {comment.content}
                      </p>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* Aktivität Tab */}
          {activeTab === 'activity' && (
            <div className="space-y-3">
              {activity.length === 0 ? (
                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                  Keine Aktivität vorhanden
                </div>
              ) : (
                <div className="space-y-3">
                  {activity.map((log, index) => (
                    <div key={index} className="flex gap-3 pb-3 border-b border-gray-300 dark:border-gray-700 last:border-b-0 bg-white dark:bg-gray-700 p-3 rounded-lg">
                      <div className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
                        <svg className="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-900 dark:text-white capitalize">
                          {log.action === 'updated' && `${log.field_name} aktualisiert`}
                          {log.action === 'moved' && `Zu ${log.new_value} verschoben`}
                          {log.action === 'created' && 'Karte erstellt'}
                          {log.action === 'archived' && 'Karte archiviert'}
                          {!['updated', 'moved', 'created', 'archived'].includes(log.action) && log.action}
                        </p>
                        {log.action === 'updated' && log.old_value && log.new_value && (
                          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            Von <span className="font-semibold">{log.old_value}</span> zu <span className="font-semibold">{log.new_value}</span>
                          </p>
                        )}
                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                          {new Date(log.created_at).toLocaleString('de-DE')}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {/* Metadata */}
          <div className="text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4 mt-6">
            Erstellt: {new Date(card.created_at).toLocaleString('de-DE')}
            {card.updated_at !== card.created_at && (
              <span className="ml-4">
                Aktualisiert: {new Date(card.updated_at).toLocaleString('de-DE')}
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Confirm Dialog */}
      <ConfirmDialog
        isOpen={showConfirmDialog}
        title={deleteItemType === 'attachment' ? 'Anhang löschen' : 'Kommentar löschen'}
        message={deleteItemType === 'attachment' ? 'Möchten Sie diese Datei wirklich löschen?' : 'Möchten Sie diesen Kommentar wirklich löschen?'}
        confirmText="Löschen"
        cancelText="Abbrechen"
        onConfirm={handleConfirmDelete}
        onCancel={() => {
          setShowConfirmDialog(false);
          setDeleteItemType(null);
          setDeleteItemId(null);
        }}
      />
    </div>
  );
};

export default KanbanCardModal;