leocrm/frontend/src/pages/ContactsList.tsx

/**
 * Contacts page — unified 3-column layout (folder tree + list + detail).
 * Replaces old separate Contacts and Company pages.
 * Uses ResizablePanel for drag-to-resize columns, like Mail.tsx.
 */

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { ResizablePanel } from '@/components/ui/ResizablePanel';
import { Input } from '@/components/ui/Input';
import { Modal } from '@/components/ui/Modal';
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
import { ContactFolderTree, type ContactFilter } from '@/components/contacts/ContactFolderTree';
import { ContactList, type ContactViewMode } from '@/components/contacts/ContactList';
import { ContactDetail } from '@/components/contacts/ContactDetail';
import { ContactEditForm } from '@/components/contacts/ContactEditForm';
import { useWindowStore } from '@/store/windowStore';
import { SavedFilters } from '@/components/SavedFilters';
import { SavedFilterBar } from '@/components/common/SavedFilterBar';
import { TagSelector } from '@/components/tags/TagSelector';
import type { Tag } from '@/api/tags';
import { ArrowDownAZ, ArrowUpZA, Bookmark, ChevronLeft, ExternalLink, Filter, LayoutGrid, List, Plus, Printer, Table2 } from 'lucide-react';
import {
  useUnifiedContacts,
  useUnifiedContact,
  type UnifiedContact,
} from '@/api/hooks';

const PAGE_SIZE = 25;

export function ContactsListPage() {
  const { t } = useTranslation();

  const [selectedFilter, setSelectedFilter] = useState<ContactFilter>('all');
  const [search, setSearch] = useState('');
  const [debouncedSearch, setDebouncedSearch] = useState('');
  const [page, setPage] = useState(1);
  const [sortBy, setSortBy] = useState('displayname');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
  const [viewMode, setViewMode] = useState<ContactViewMode>('list');
  const [selectedContactId, setSelectedContactId] = useState<string | null>(null);
  const [activeView, setActiveView] = useState<'folders' | 'list' | 'detail'>('folders');
  const [savedFiltersOpen, setSavedFiltersOpen] = useState(false);
  const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
  const openWindow = useWindowStore((s) => s.openWindow);

  // Debounce search
  useEffect(() => {
    const timer = setTimeout(() => setDebouncedSearch(search), 300);
    return () => clearTimeout(timer);
  }, [search]);

  // Derive type filter from selectedFilter
  const contactType = useMemo(() => {
    if (selectedFilter === 'company') return 'company';
    if (selectedFilter === 'person') return 'person';
    return undefined;
  }, [selectedFilter]);

  // Derive folder filter
  const folderId = useMemo(() => {
    if (selectedFilter.startsWith('folder:')) return selectedFilter.slice(7);
    return undefined;
  }, [selectedFilter]);

  // Derive tag filter
  const tagFilter = useMemo(() => {
    if (selectedFilter.startsWith('tag:')) return selectedFilter.slice(4);
    return undefined;
  }, [selectedFilter]);

  // Fetch contacts list
  const { data, isLoading } = useUnifiedContacts(
    page,
    PAGE_SIZE,
    debouncedSearch || undefined,
    contactType,
    sortBy,
    sortOrder,
    folderId,
  );

  // Fetch selected contact detail (with contact_persons)
  const { data: selectedContact, isLoading: loadingDetail } = useUnifiedContact(selectedContactId || undefined);

  const contacts = data?.items ?? [];
  const total = data?.total ?? 0;

  // Derive tags from all loaded contacts (for folder tree)
  const allTags = useMemo(() => {
    const tagSet = new Set<string>();
    contacts.forEach((c) => {
      if (c.tags) {
        c.tags.split(',').forEach((tag) => {
          const trimmed = tag.trim();
          if (trimmed) tagSet.add(trimmed);
        });
      }
    });
    return Array.from(tagSet).sort();
  }, [contacts]);

  // Filter by tag client-side if tag filter is active
  const filteredContacts = useMemo(() => {
    if (!tagFilter) return contacts;
    return contacts.filter((c) => {
      if (!c.tags) return false;
      return c.tags.split(',').map((t) => t.trim()).includes(tagFilter);
    });
  }, [contacts, tagFilter]);

  // Handle folder selection
  const handleSelectFilter = useCallback((filter: ContactFilter) => {
    setSelectedFilter(filter);
    setPage(1);
    setSelectedContactId(null);
    setActiveView('list');
  }, []);

  // Handle contact selection
  const handleSelectContact = useCallback((contact: UnifiedContact) => {
    setSelectedContactId(contact.id);
    setActiveView('detail');
  }, []);

  // Handle sort change
  const handleSortChange = useCallback((newSortBy: string, newSortOrder: 'asc' | 'desc') => {
    setSortBy(newSortBy);
    setSortOrder(newSortOrder);
    setPage(1);
  }, []);

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

  // Handle edit modal saved
  const handleSaved = useCallback((id: string) => {
    setSelectedContactId(id);
    setActiveView('detail');
  }, []);

  // Handle create
  const handleCreate = useCallback(() => {
    openWindow({
      title: t('contacts.create'),
      type: 'contact-create',
      component: ContactEditForm,
      componentProps: {
        onClose: () => {},
        onSaved: handleSaved,
      },
    });
  }, [openWindow, t, handleSaved]);

  // Handle edit
  const handleEdit = useCallback(() => {
    if (selectedContact) {
      openWindow({
        title: t('contacts.edit'),
        type: 'contact-edit',
        component: ContactEditForm,
        componentProps: {
          contact: selectedContact,
          onClose: () => {},
          onSaved: handleSaved,
        },
      });
    }
  }, [selectedContact, openWindow, t, handleSaved]);

  // Handle delete (from detail)
  const handleDeleted = useCallback(() => {
    setSelectedContactId(null);
    setActiveView('list');
  }, []);

  // Sort options
  const sortOptions = useMemo(() => [
    { value: 'displayname', label: t('contacts.fullName') },
    { value: 'name', label: t('contacts.name') },
    { value: 'email_1', label: t('contacts.email') },
    { value: 'mailing_city', label: t('address.city') },
    { value: 'code', label: t('contacts.code') },
  ], [t]);

  const viewModeOptions = useMemo(() => [
    { value: 'list', label: t('contacts.viewList') },
    { value: 'table', label: t('contacts.viewTable') },
    { value: 'cards', label: t('contacts.viewCards') },
  ], [t]);

  // Register toolbar items — all controls moved to plugin toolbar
  const registerItems = usePluginToolbarStore((s) => s.registerItems);
  const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);

  useEffect(() => {
    const items = [
      // Search
      {
        id: 'search',
        plugin: 'contacts',
        label: t('common.search'),
        type: 'search' as const,
        group: 'search',
        searchPlaceholder: t('contacts.searchPlaceholder'),
        onSearch: handleSearch,
        onClick: () => {},
      },
      // Unified filter dropdown — filter + sort in one panel
      {
        id: 'filter-sort',
        plugin: 'contacts',
        label: t('common.filter', 'Filter'),
        type: 'dropdown' as const,
        group: 'filter',
        icon: <Filter className="w-3.5 h-3.5" strokeWidth={2} />,
        iconOnly: true,
        menuWidth: '240px',
        menuOptions: [
          // Section: Filter
          { value: 'all', label: t('common.all'), section: t('common.filter', 'Filter'), active: selectedFilter === 'all', onClick: () => handleSelectFilter('all') },
          { value: 'company', label: t('contacts.companies'), active: selectedFilter === 'company', onClick: () => handleSelectFilter('company') },
          { value: 'person', label: t('contacts.persons'), active: selectedFilter === 'person', onClick: () => handleSelectFilter('person') },
          // Separator
          { value: 'sep-sort', label: '', separator: true, onClick: () => {} },
          // Section: Sort by
          ...sortOptions.map((opt) => ({
            value: `sort-${opt.value}`, label: opt.label, section: t('common.sortBy', 'Sortieren nach'),
            active: sortBy === opt.value, onClick: () => { setSortBy(opt.value); setPage(1); },
          })),
          // Separator
          { value: 'sep-order', label: '', separator: true, onClick: () => {} },
          // Section: Sort order
          { value: 'sort-asc', label: t('common.sortAsc', 'Aufsteigend'), section: t('common.sortOrder', 'Sortierreihenfolge'),
            icon: <ArrowDownAZ className="w-3.5 h-3.5" strokeWidth={2} />, active: sortOrder === 'asc', onClick: () => handleSortChange(sortBy, 'asc') },
          { value: 'sort-desc', label: t('common.sortDesc', 'Absteigend'),
            icon: <ArrowUpZA className="w-3.5 h-3.5" strokeWidth={2} />, active: sortOrder === 'desc', onClick: () => handleSortChange(sortBy, 'desc') },
        ],
        onClick: () => {},
      },
      // View mode dropdown (list / table / cards)
      {
        id: 'view-mode',
        plugin: 'contacts',
        label: t('common.view', 'Ansicht'),
        type: 'dropdown' as const,
        group: 'view',
        icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />,
        menuWidth: '180px',
        menuOptions: [
          { value: 'list', label: t('contacts.viewList'), icon: <List className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'list', onClick: () => setViewMode('list') },
          { value: 'table', label: t('contacts.viewTable'), icon: <Table2 className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'table', onClick: () => setViewMode('table') },
          { value: 'cards', label: t('contacts.viewCards'), icon: <LayoutGrid className="w-3.5 h-3.5" strokeWidth={2} />, active: viewMode === 'cards', onClick: () => setViewMode('cards') },
        ],
        onClick: () => {},
      },
      // Saved filters
      {
        id: 'saved-filters',
        plugin: 'contacts',
        label: 'Gespeicherte Filter',
        type: 'button' as const,
        group: 'actions',
        icon: <Bookmark className="w-3.5 h-3.5" strokeWidth={2} />,
        onClick: () => setSavedFiltersOpen(true),
      },
      // New contact
      {
        id: 'new',
        plugin: 'contacts',
        label: t('contacts.create'),
        type: 'button' as const,
        group: 'actions',
        icon: <Plus className="w-3.5 h-3.5" strokeWidth={2} />,
        onClick: handleCreate,
      },
      // Print
      {
        id: 'print',
        plugin: 'contacts',
        label: t('common.print', 'Drucken'),
        type: 'button' as const,
        group: 'actions',
        icon: <Printer className="w-3.5 h-3.5" strokeWidth={2} />,
        onClick: () => window.print(),
      },
      // Open standalone
      {
        id: 'open-standalone',
        plugin: 'contacts',
        label: 'In neuem Fenster',
        type: 'button' as const,
        group: 'actions',
        icon: <ExternalLink className="w-3.5 h-3.5" strokeWidth={2} />,
        onClick: () => window.open('/contacts-standalone', '_blank', 'width=1200,height=800'),
      },
    ];
    registerItems('contacts', items);
    return () => unregisterPlugin('contacts');
  }, [handleSearch, handleCreate, handleSelectFilter, handleSortChange, t, registerItems, unregisterPlugin, sortBy, sortOrder, selectedFilter, viewMode, sortOptions, viewModeOptions]);

  return (
    <div className="flex flex-col h-full" data-testid="contacts-list-page">
      {/* Desktop: three-pane layout with resizable panels */}
      <div className="hidden md:flex flex-1 overflow-hidden">
        {/* Left: Folder tree — resizable */}
        <ResizablePanel
          initialWidth={240}
          minWidth={150}
          maxWidth={400}
          className="border-r border-secondary-200 bg-white"
          data-testid="contact-folder-pane"
        >
          <div className="p-3">
            <ContactFolderTree
              selectedFilter={selectedFilter}
              onSelect={handleSelectFilter}
              tags={allTags}
              contacts={contacts}
            />
          </div>
        </ResizablePanel>

        {/* Middle: Contact list — resizable */}
        <ResizablePanel
          initialWidth={400}
          minWidth={250}
          maxWidth={600}
          className="border-r border-secondary-200 bg-white"
          data-testid="contact-list-pane"
        >
          {/* Saved filter bar + tag selector */}
          <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 bg-secondary-50 flex-wrap" data-testid="contacts-filter-bar">
            <SavedFilterBar
              entityType="contacts"
              currentFilters={{ search: debouncedSearch, type: contactType, sortBy, sortOrder, folderId, tagFilter }}
              onApplyFilter={(criteria) => {
                if (criteria.search) setSearch(criteria.search); else setSearch('');
                if (criteria.sortBy) setSortBy(criteria.sortBy);
                if (criteria.sortOrder) setSortOrder(criteria.sortOrder);
                if (criteria.type) setSelectedFilter(criteria.type as ContactFilter);
                setPage(1);
              }}
            />
            <div className="flex-1 min-w-[180px]" data-testid="contacts-tag-selector">
              <TagSelector
                entityType="contact"
                entityId={selectedContactId ?? ''}
                selectedTags={selectedTags}
                onChange={setSelectedTags}
                placeholder={t('tags.selectPlaceholder', 'Tags filtern...')}
              />
            </div>
          </div>
          {/* List — no inline toolbar, all controls are in the plugin toolbar */}
          <div className="flex-1 min-h-0" id="contacts-table">
            <ContactList
              contacts={filteredContacts}
              selectedContactId={selectedContactId}
              onSelectContact={handleSelectContact}
              loading={isLoading}
              currentPage={page}
              total={total}
              pageSize={PAGE_SIZE}
              onPageChange={setPage}
              viewMode={viewMode}
              sortBy={sortBy}
              sortOrder={sortOrder}
              onSortChange={handleSortChange}
            />
          </div>
        </ResizablePanel>

        {/* Right: Detail panel — flex-1, not resizable */}
        <ResizablePanel
          resizable={false}
          className="bg-white"
          data-testid="contact-detail-pane"
        >
          <ContactDetail
            contact={selectedContact ?? null}
            loading={loadingDetail}
            onEdit={handleEdit}
            onDeleted={handleDeleted}
          />
        </ResizablePanel>
      </div>

      {/* Mobile: single-pane view switching */}
      <div className="flex md:hidden flex-1 overflow-hidden flex-col">
        {/* View 1: Folder tree */}
        {activeView === 'folders' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-folder-pane">
            <div className="p-3">
              <ContactFolderTree
                selectedFilter={selectedFilter}
                onSelect={handleSelectFilter}
                tags={allTags}
                contacts={contacts}
              />
            </div>
          </div>
        )}

        {/* View 2: Contact list */}
        {activeView === 'list' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-list-pane">
            <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 sticky top-0 bg-white z-10">
              <button
                onClick={() => setActiveView('folders')}
                className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
                aria-label={t('common.back')}
                data-testid="mobile-back-to-folders"
              >
                <ChevronLeft className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
                <span className="text-sm font-medium">{t('contacts.allContacts')}</span>
              </button>
            </div>
            <div className="px-3 py-2 border-b border-secondary-200">
              <Input
                type="search"
                value={search}
                onChange={(e) => handleSearch(e.target.value)}
                placeholder={t('contacts.searchPlaceholder')}
                aria-label={t('common.search')}
              />
            </div>
            <ContactList
              contacts={filteredContacts}
              selectedContactId={selectedContactId}
              onSelectContact={handleSelectContact}
              loading={isLoading}
              currentPage={page}
              total={total}
              pageSize={PAGE_SIZE}
              onPageChange={setPage}
              viewMode={viewMode}
              sortBy={sortBy}
              sortOrder={sortOrder}
              onSortChange={handleSortChange}
            />
          </div>
        )}

        {/* View 3: Contact detail */}
        {activeView === 'detail' && (
          <div className="flex-1 overflow-y-auto bg-white" data-testid="mobile-detail-pane">
            <div className="flex items-center gap-2 px-3 py-2 border-b border-secondary-200 sticky top-0 bg-white z-10">
              <button
                onClick={() => setActiveView('list')}
                className="inline-flex items-center gap-1 px-2 py-1 rounded text-sm text-secondary-700 hover:bg-secondary-100 min-h-touch"
                aria-label={t('common.back')}
                data-testid="mobile-back-to-list"
              >
                <ChevronLeft className="w-4 h-4" aria-hidden="true" strokeWidth={2} />
                <span className="text-sm font-medium">{t('common.back')}</span>
              </button>
            </div>
            <ContactDetail
              contact={selectedContact ?? null}
              loading={loadingDetail}
              onEdit={handleEdit}
              onDeleted={handleDeleted}
            />
          </div>
        )}
      </div>

      {/* Saved Filters Modal */}
      {savedFiltersOpen && (
        <Modal open={savedFiltersOpen} onClose={() => setSavedFiltersOpen(false)} title="Gespeicherte Filter">
          <SavedFilters
            entityType="contacts"
            currentCriteria={{ search: debouncedSearch, type: contactType, sortBy, sortOrder, folderId }}
            onLoadFilter={(criteria) => {
              if (criteria.search) setSearch(criteria.search); else setSearch('');
              if (criteria.sortBy) setSortBy(criteria.sortBy);
              if (criteria.sortOrder) setSortOrder(criteria.sortOrder);
              if (criteria.type) setSelectedFilter(criteria.type as ContactFilter);
              setPage(1);
              setSavedFiltersOpen(false);
            }}
          />
        </Modal>
      )}
    </div>
  );
}