leocrm/frontend/src/pages/Mail.tsx

/**
 * Mail page — folder tree + mail list + reading pane + compose.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { useToast } from '@/components/ui/Toast';
import { EmptyState } from '@/components/ui/EmptyState';
import { MailFolderTree } from '@/components/mail/MailFolderTree';
import { MailList } from '@/components/mail/MailList';
import { MailDetail } from '@/components/mail/MailDetail';
import { ComposeModal, type ComposeMode } from '@/components/mail/ComposeModal';
import { SharedMailboxSelector } from '@/components/mail/SharedMailboxSelector';
import { MailSearchBar } from '@/components/mail/MailSearchBar';
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
import {
  fetchAccounts,
  fetchFolders,
  fetchMails,
  getMail,
  sendMail,
  replyMail,
  forwardMail,
  updateFlags,
  createEventFromMail,
  downloadAttachment,
  fetchSignatures,
  searchMails,
  type MailAccount,
  type MailFolder,
  type Mail,
  type MailSignature,
  type MailAttachment,
  type SendMailPayload,
  type ReplyPayload,
  type ForwardPayload,
  type CreateEventFromMailPayload,
} from '@/api/mail';

const PAGE_SIZE = 25;

export function MailPage() {
  const { t } = useTranslation();
  const toast = useToast();

  const [accounts, setAccounts] = useState<MailAccount[]>([]);
  const [selectedAccountId, setSelectedAccountId] = useState('');
  const [folders, setFolders] = useState<MailFolder[]>([]);
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);
  const [mails, setMails] = useState<Mail[]>([]);
  const [mailsTotal, setMailsTotal] = useState(0);
  const [mailsPage, setMailsPage] = useState(1);
  const [selectedMail, setSelectedMail] = useState<Mail | null>(null);
  const [loadingMail, setLoadingMail] = useState(false);
  const [loadingAccounts, setLoadingAccounts] = useState(true);
  const [loadingFolders, setLoadingFolders] = useState(false);
  const [loadingMails, setLoadingMails] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [signatures, setSignatures] = useState<MailSignature[]>([]);
  const [composeOpen, setComposeOpen] = useState(false);
  const [composeMode, setComposeMode] = useState<ComposeMode>('new');
  const [replyToMail, setReplyToMail] = useState<Mail | null>(null);
  const [forwardMailState, setForwardMailState] = useState<Mail | null>(null);
  const [downloadingAttachmentId, setDownloadingAttachmentId] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');

  // Load accounts
  const loadAccounts = useCallback(async () => {
    setLoadingAccounts(true);
    try {
      const accs = await fetchAccounts();
      setAccounts(accs);
      if (accs.length > 0 && !selectedAccountId) {
        setSelectedAccountId(accs[0].id);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
    }
    setLoadingAccounts(false);
  }, [selectedAccountId]);

  // Load signatures
  const loadSignatures = useCallback(async () => {
    try {
      const sigs = await fetchSignatures();
      setSignatures(sigs);
    } catch {
 // non-critical
    }
  }, []);

  useEffect(() => {
    loadAccounts();
    loadSignatures();
  }, [loadAccounts, loadSignatures]);

  // Load folders when account changes
  const loadFolders = useCallback(async () => {
    if (!selectedAccountId) return;
    setLoadingFolders(true);
    try {
      const folderList = await fetchFolders(selectedAccountId);
      setFolders(folderList);
      // Auto-select first folder
      if (folderList.length > 0 && !selectedFolderId) {
        setSelectedFolderId(folderList[0].id);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
    }
    setLoadingFolders(false);
  }, [selectedAccountId, selectedFolderId]);

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

  // Load mails when folder or page changes
  const loadMails = useCallback(async () => {
    if (!selectedFolderId) return;
    setLoadingMails(true);
    try {
      if (searchQuery.trim()) {
        const result = await searchMails(searchQuery);
        setMails(result.mails);
        setMailsTotal(result.total);
      } else {
        const result = await fetchMails(selectedFolderId, mailsPage);
        setMails(result.mails);
        setMailsTotal(result.total);
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      setError(msg);
      setMails([]);
    }
    setLoadingMails(false);
  }, [selectedFolderId, mailsPage, searchQuery]);

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

  // Handle folder selection
  const handleSelectFolder = useCallback((folderId: string) => {
    setSelectedFolderId(folderId);
    setMailsPage(1);
    setSearchQuery('');
    setSelectedMail(null);
  }, []);

  // Handle mail selection
  const handleSelectMail = useCallback(async (mail: Mail) => {
    setLoadingMail(true);
    try {
      const detail = await getMail(mail.id);
      setSelectedMail(detail);
      // Mark as seen if not seen
      if (!detail.is_seen) {
        await updateFlags(mail.id, { seen: true });
        setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_seen: true } : m)));
      }
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      toast.error(msg);
      setSelectedMail(mail);
    }
    setLoadingMail(false);
  }, [toast]);

  // Handle compose
  const handleCompose = useCallback(() => {
    setComposeMode('new');
    setReplyToMail(null);
    setForwardMailState(null);
    setComposeOpen(true);
  }, []);

  // Handle reply
  const handleReply = useCallback((mail: Mail) => {
    setComposeMode('reply');
    setReplyToMail(mail);
    setForwardMailState(null);
    setComposeOpen(true);
  }, []);

  // Handle forward
  const handleForward = useCallback((mail: Mail) => {
    setComposeMode('forward');
    setForwardMailState(mail);
    setReplyToMail(null);
    setComposeOpen(true);
  }, []);

  // Handle toggle flag
  const handleToggleFlag = useCallback(async (mail: Mail) => {
    try {
      await updateFlags(mail.id, { flagged: !mail.is_flagged });
      setSelectedMail((prev) => prev ? { ...prev, is_flagged: !mail.is_flagged } : prev);
      setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_flagged: !mail.is_flagged } : m)));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    }
  }, [toast]);

  // Handle create event from mail
  const handleCreateEvent = useCallback(async (mail: Mail) => {
    const title = mail.subject || t('mail.noSubject');
    const now = new Date();
    const start = now.toISOString();
    const end = new Date(now.getTime() + 60 * 60 * 1000).toISOString();
    const payload: CreateEventFromMailPayload = {
      title,
      start,
      end,
      description: mail.body_text.slice(0, 500),
    };
    try {
      await createEventFromMail(mail.id, payload);
      toast.success(t('mail.eventCreated'));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    }
  }, [toast, t]);

  // Handle attachment download
  const handleDownloadAttachment = useCallback(async (mailId: string, attachment: MailAttachment) => {
    setDownloadingAttachmentId(attachment.id);
    try {
      const blob = await downloadAttachment(mailId, attachment.id);
      const url = window.URL.createObjectURL(blob);
      const a = window.document.createElement('a');
      a.href = url;
      a.download = attachment.filename;
      window.document.body.appendChild(a);
      a.click();
      window.document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
    } finally {
      setDownloadingAttachmentId(null);
    }
  }, [toast]);

  // Handle send (compose)
  const handleSend = useCallback(async (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => {
    try {
      if (mode === 'reply' && replyToMail) {
        await replyMail(replyToMail.id, payload as ReplyPayload);
      } else if (mode === 'forward' && forwardMailState) {
        await forwardMail(forwardMailState.id, payload as ForwardPayload);
      } else {
        await sendMail(payload as SendMailPayload);
      }
      toast.success(t('mail.sent'));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
      throw err;
    }
  }, [replyToMail, forwardMailState, toast, t]);

  // Handle search
  const handleSearch = useCallback((query: string) => {
    setSearchQuery(query);
    setMailsPage(1);
  }, []);

  // Handle account switch
  const handleAccountSwitch = useCallback((accountId: string) => {
    setSelectedAccountId(accountId);
    setSelectedFolderId(null);
    setSelectedMail(null);
    setMails([]);
    setMailsPage(1);
    setSearchQuery('');
  }, []);

  // Register toolbar items
  const { registerItems, unregisterPlugin } = usePluginToolbarStore();
  useEffect(() => {
    const hasMail = !!selectedMail;
    registerItems('mail', [
      {
        id: 'account-select',
        plugin: 'mail',
        label: 'Account',
        type: 'select',
        group: 'account',
        selectValue: selectedAccountId,
        selectOptions: accounts.map((a) => ({ value: a.id, label: a.email })),
        onSelect: handleAccountSwitch,
      },
      {
        id: 'search',
        plugin: 'mail',
        label: 'Suchen',
        type: 'search',
        group: 'search',
        searchPlaceholder: 'E-Mails durchsuchen...',
        onSearch: handleSearch,
      },
      {
        id: 'compose',
        plugin: 'mail',
        label: 'Verfassen',
        group: 'compose',
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>,
        onClick: handleCompose,
      },
      {
        id: 'reply',
        plugin: 'mail',
        label: 'Antworten',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" /></svg>,
        onClick: () => selectedMail && handleReply(selectedMail),
      },
      {
        id: 'forward',
        plugin: 'mail',
        label: 'Weiterleiten',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" /></svg>,
        onClick: () => selectedMail && handleForward(selectedMail),
      },
      {
        id: 'flag',
        plugin: 'mail',
        label: 'Flagge',
        group: 'mail-actions',
        disabled: !hasMail,
        active: selectedMail?.is_flagged,
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" /></svg>,
        onClick: () => selectedMail && handleToggleFlag(selectedMail),
      },
      {
        id: 'create-event',
        plugin: 'mail',
        label: 'Termin',
        group: 'mail-actions',
        disabled: !hasMail,
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>,
        onClick: () => selectedMail && handleCreateEvent(selectedMail),
      },
      {
        id: 'sync',
        plugin: 'mail',
        label: 'Sync',
        group: 'tools',
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>,
        onClick: () => { /* sync trigger */ },
      },
      {
        id: 'settings',
        plugin: 'mail',
        label: 'Einstellungen',
        group: 'tools',
        icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>,
        onClick: () => window.location.href = '/mail/settings',
      },
    ]);
    return () => unregisterPlugin('mail');
  }, [registerItems, unregisterPlugin, accounts, selectedAccountId, selectedMail, handleAccountSwitch, handleSearch, handleCompose, handleReply, handleForward, handleToggleFlag, handleCreateEvent]);

  if (loadingAccounts) {
    return (
      <div className="flex items-center justify-center py-12" data-testid="mail-page-loading">
        <svg className="animate-spin h-6 w-6 text-secondary-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
        </svg>
        <span className="ml-2 text-secondary-500">{t('common.loading')}</span>
      </div>
    );
  }

  if (accounts.length === 0) {
    return (
      <div className="p-6 max-w-7xl mx-auto" data-testid="mail-page">
        <EmptyState
          title={t('mail.noAccounts')}
          description={t('mail.noAccountsDesc')}
          action={<Link to="/mail/settings" className="text-primary-600 hover:text-primary-700">{t('mail.configureAccount')}</Link>}
        />
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full" data-testid="mail-page">
      {error && (
        <div className="mb-2 p-3 bg-danger-50 border border-danger-200 rounded-md" role="alert" data-testid="mail-error">
          <p className="text-sm text-danger-700">{error}</p>
        </div>
      )}

      {/* Three-pane layout */}
      <div className="flex flex-1 overflow-hidden">
        {/* Folder tree */}
        <div className="w-56 border-r border-secondary-200 overflow-y-auto bg-white" data-testid="mail-folder-pane">
          <div className="p-3">
            <h3 className="text-xs font-semibold text-secondary-500 uppercase mb-2">{t('mail.folders')}</h3>
            <MailFolderTree
              folders={folders}
              selectedFolderId={selectedFolderId}
              onSelect={handleSelectFolder}
              loading={loadingFolders}
            />
          </div>
        </div>

        {/* Mail list */}
        <div className="w-80 border-r border-secondary-200 overflow-y-auto bg-white" data-testid="mail-list-pane">
          <MailList
            mails={mails}
            selectedMailId={selectedMail?.id || null}
            onSelectMail={handleSelectMail}
            loading={loadingMails}
            currentPage={mailsPage}
            total={mailsTotal}
            pageSize={PAGE_SIZE}
            onPageChange={setMailsPage}
          />
        </div>

        {/* Reading pane */}
        <div className="flex-1 overflow-y-auto bg-white" data-testid="mail-detail-pane">
          <MailDetail
            mail={selectedMail}
            loading={loadingMail}
            onReply={handleReply}
            onForward={handleForward}
            onCreateEvent={handleCreateEvent}
            onToggleFlag={handleToggleFlag}
            onDownloadAttachment={handleDownloadAttachment}
            downloadingAttachmentId={downloadingAttachmentId}
          />
        </div>
      </div>

      <ComposeModal
        open={composeOpen}
        mode={composeMode}
        accountId={selectedAccountId}
        replyToMail={replyToMail}
        forwardMail={forwardMailState}
        signatures={signatures}
        onSend={handleSend}
        onClose={() => setComposeOpen(false)}
      />
    </div>
  );
}