opencrm/frontend/src/components/email/ComposeEmailModal.tsx

import { useState, useRef, useEffect } from 'react';
import { Send, Paperclip, X, FileText } from 'lucide-react';
import Modal from '../ui/Modal';
import Button from '../ui/Button';
import { stressfreiEmailApi, CachedEmail, MailboxAccount, EmailAttachment } from '../../services/api';
import { useMutation } from '@tanstack/react-query';

interface ComposeEmailModalProps {
  isOpen: boolean;
  onClose: () => void;
  account: MailboxAccount;
  replyTo?: CachedEmail;
  onSuccess?: () => void;
  contractId?: number; // Optional: Vertrag dem die gesendete E-Mail zugeordnet wird
}

export default function ComposeEmailModal({
  isOpen,
  onClose,
  account,
  replyTo,
  onSuccess,
  contractId,
}: ComposeEmailModalProps) {
  const [to, setTo] = useState('');
  const [cc, setCc] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [attachments, setAttachments] = useState<EmailAttachment[]>([]);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Formular bei Modal-Öffnung initialisieren
  useEffect(() => {
    if (isOpen) {
      if (replyTo) {
        // Antwort: Felder vorausfüllen
        setTo(replyTo.fromAddress || '');
        // Betreff: "Re:" nur hinzufügen wenn nicht schon vorhanden
        const existingSubject = replyTo.subject || '';
        const hasRePrefix = /^(Re|Aw|Fwd|Wg):\s*/i.test(existingSubject);
        setSubject(hasRePrefix ? existingSubject : `Re: ${existingSubject}`);
        // Ursprüngliche Nachricht zitieren
        const originalDate = new Date(replyTo.receivedAt).toLocaleString('de-DE');
        const quotedText = replyTo.textBody
          ? `\n\n--- Ursprüngliche Nachricht ---\nVon: ${replyTo.fromName || replyTo.fromAddress}\nAm: ${originalDate}\n\n${replyTo.textBody}`
          : '';
        setBody(quotedText);
      } else {
        // Neue E-Mail: Felder leer
        setTo('');
        setSubject('');
        setBody('');
      }
      setCc('');
      setAttachments([]);
      setError(null);
    }
  }, [isOpen, replyTo]);

  // Maximale Dateigröße: 10 MB
  const MAX_FILE_SIZE = 10 * 1024 * 1024;
  // Maximale Gesamtgröße aller Anhänge: 25 MB
  const MAX_TOTAL_SIZE = 25 * 1024 * 1024;

  // Datei zu Base64 konvertieren
  const fileToBase64 = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // data:application/pdf;base64,JVBERi0... -> JVBERi0...
        const result = reader.result as string;
        const base64 = result.split(',')[1];
        resolve(base64);
      };
      reader.onerror = reject;
    });
  };

  // Dateien hinzufügen
  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;

    const newAttachments: EmailAttachment[] = [];
    let currentTotalSize = attachments.reduce(
      (sum, att) => sum + (att.content.length * 0.75), // Base64 ist ~33% größer
      0
    );

    for (const file of Array.from(files)) {
      // Einzelne Dateigröße prüfen
      if (file.size > MAX_FILE_SIZE) {
        setError(`Datei "${file.name}" ist zu groß (max. 10 MB)`);
        continue;
      }

      // Gesamtgröße prüfen
      if (currentTotalSize + file.size > MAX_TOTAL_SIZE) {
        setError('Maximale Gesamtgröße der Anhänge erreicht (25 MB)');
        break;
      }

      try {
        const content = await fileToBase64(file);
        newAttachments.push({
          filename: file.name,
          content,
          contentType: file.type || 'application/octet-stream',
        });
        currentTotalSize += file.size;
      } catch {
        setError(`Fehler beim Lesen von "${file.name}"`);
      }
    }

    if (newAttachments.length > 0) {
      setAttachments((prev) => [...prev, ...newAttachments]);
    }

    // Input zurücksetzen damit gleiche Datei erneut gewählt werden kann
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  // Anhang entfernen
  const removeAttachment = (index: number) => {
    setAttachments((prev) => prev.filter((_, i) => i !== index));
  };

  // Dateigröße formatieren
  const formatFileSize = (base64Content: string): string => {
    const bytes = base64Content.length * 0.75; // Base64 Dekodierung
    if (bytes < 1024) return `${Math.round(bytes)} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  const sendMutation = useMutation({
    mutationFn: () =>
      stressfreiEmailApi.sendEmail(account.id, {
        to: to.split(',').map((e) => e.trim()).filter(Boolean),
        cc: cc ? cc.split(',').map((e) => e.trim()).filter(Boolean) : undefined,
        subject,
        text: body,
        inReplyTo: replyTo?.messageId,
        references: replyTo?.messageId ? [replyTo.messageId] : undefined,
        attachments: attachments.length > 0 ? attachments : undefined,
        contractId,
      }),
    onSuccess: () => {
      onSuccess?.();
      handleClose();
    },
    onError: (err) => {
      setError(err instanceof Error ? err.message : 'Fehler beim Senden');
    },
  });

  const handleClose = () => {
    // Formular wird beim nächsten Öffnen durch useEffect initialisiert
    onClose();
  };

  const handleSend = () => {
    if (!to.trim()) {
      setError('Bitte Empfänger angeben');
      return;
    }
    if (!subject.trim()) {
      setError('Bitte Betreff angeben');
      return;
    }
    setError(null);
    sendMutation.mutate();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      title={replyTo ? 'Antworten' : 'Neue E-Mail'}
      size="lg"
    >
      <div className="space-y-4">
        {/* From */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Von
          </label>
          <div className="px-3 py-2 bg-gray-100 rounded-lg text-sm text-gray-700">
            {account.email}
          </div>
        </div>

        {/* To */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            An <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={to}
            onChange={(e) => setTo(e.target.value)}
            placeholder="empfaenger@example.com"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          <p className="mt-1 text-xs text-gray-500">
            Mehrere Empfänger mit Komma trennen
          </p>
        </div>

        {/* CC */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            CC
          </label>
          <input
            type="text"
            value={cc}
            onChange={(e) => setCc(e.target.value)}
            placeholder="cc@example.com"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>

        {/* Subject */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Betreff <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            placeholder="Betreff eingeben"
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
        </div>

        {/* Body */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Nachricht
          </label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            rows={10}
            placeholder="Ihre Nachricht..."
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
          />
        </div>

        {/* Anhänge */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">
            Anhänge
          </label>

          {/* Versteckter File-Input */}
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileSelect}
            multiple
            className="hidden"
          />

          {/* Anhang hinzufügen Button */}
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            className="inline-flex items-center px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
          >
            <Paperclip className="w-4 h-4 mr-2" />
            Datei anhängen
          </button>

          {/* Anhang-Liste */}
          {attachments.length > 0 && (
            <div className="mt-2 space-y-2">
              {attachments.map((att, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg"
                >
                  <div className="flex items-center min-w-0">
                    <FileText className="w-4 h-4 text-gray-500 mr-2 flex-shrink-0" />
                    <span className="text-sm text-gray-700 truncate">
                      {att.filename}
                    </span>
                    <span className="ml-2 text-xs text-gray-500 flex-shrink-0">
                      ({formatFileSize(att.content)})
                    </span>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeAttachment(index)}
                    className="ml-2 p-1 text-gray-400 hover:text-red-500 transition-colors"
                    title="Anhang entfernen"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </div>
              ))}
            </div>
          )}

          <p className="mt-1 text-xs text-gray-500">
            Max. 10 MB pro Datei, 25 MB gesamt
          </p>
        </div>

        {/* Error */}
        {error && (
          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
            {error}
          </div>
        )}

        {/* Actions */}
        <div className="flex justify-end gap-3 pt-4">
          <Button variant="secondary" onClick={handleClose}>
            Abbrechen
          </Button>
          <Button
            onClick={handleSend}
            disabled={sendMutation.isPending}
          >
            <Send className="w-4 h-4 mr-2" />
            {sendMutation.isPending ? 'Wird gesendet...' : 'Senden'}
          </Button>
        </div>
      </div>
    </Modal>
  );
}