leocrm/frontend/src/components/contacts/SaveViewDialog.tsx

/**
 * Dialog for saving a custom view with selectable components.
 */

import React, { useState } from 'react';
import { Bookmark, Check, Folder, Filter, Group as GroupIcon, ArrowDownAZ, LayoutGrid } from 'lucide-react';

export interface SaveViewSelection {
  folder: boolean;
  viewMode: boolean;
  filter: boolean;
  group: boolean;
  sort: boolean;
}

interface SaveViewDialogProps {
  open: boolean;
  onClose: () => void;
  onSave: (name: string, selection: SaveViewSelection) => void;
  hasFilter: boolean;
  hasGroup: boolean;
  hasSort: boolean;
  hasFolder: boolean;
}

const defaultSelection: SaveViewSelection = {
  folder: true,
  viewMode: true,
  filter: true,
  group: true,
  sort: true,
};

export function SaveViewDialog({ open, onClose, onSave, hasFilter, hasGroup, hasSort, hasFolder }: SaveViewDialogProps) {
  const [name, setName] = useState('');
  const [selection, setSelection] = useState<SaveViewSelection>(defaultSelection);

  if (!open) return null;

  const handleSave = () => {
    if (!name.trim()) return;
    onSave(name.trim(), selection);
    setName('');
    setSelection(defaultSelection);
    onClose();
  };

  const toggle = (key: keyof SaveViewSelection) => {
    setSelection((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const options: { key: keyof SaveViewSelection; label: string; icon: React.ReactNode; available: boolean; description: string }[] = [
    { key: 'folder', label: 'Ordner-Auswahl', icon: <Folder className="w-4 h-4" strokeWidth={2} />, available: hasFolder, description: 'Aktuell ausgewählte Ordner' },
    { key: 'viewMode', label: 'Ansichtsmodus', icon: <LayoutGrid className="w-4 h-4" strokeWidth={2} />, available: true, description: 'Liste, Tabelle oder Karten' },
    { key: 'filter', label: 'Filter', icon: <Filter className="w-4 h-4" strokeWidth={2} />, available: hasFilter, description: 'Aktive Filterbedingungen' },
    { key: 'group', label: 'Gruppierung', icon: <GroupIcon className="w-4 h-4" strokeWidth={2} />, available: hasGroup, description: 'Aktive Gruppierungen' },
    { key: 'sort', label: 'Sortierung', icon: <ArrowDownAZ className="w-4 h-4" strokeWidth={2} />, available: hasSort, description: 'Aktive Sortierungen' },
  ];

  return (
    <div className="fixed inset-0 z-[5000] flex items-center justify-center bg-secondary-900/50" onClick={onClose}>
      <div
        className="bg-white rounded-lg shadow-xl w-[420px] max-w-[90vw]"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center gap-2 px-5 py-4 border-b border-secondary-100">
          <Bookmark className="w-5 h-5 text-primary-600" strokeWidth={2} />
          <h2 className="text-base font-semibold text-secondary-800">Ansicht speichern</h2>
        </div>

        {/* Body */}
        <div className="px-5 py-4 space-y-4">
          {/* Name input */}
          <div>
            <label className="block text-xs font-medium text-secondary-600 mb-1">Name der Ansicht</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="z.B. Meine Firmen-Kontakte"
              autoFocus
              onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); }}
              className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md focus:outline-none focus:border-primary-400 focus:ring-1 focus:ring-primary-300"
            />
          </div>

          {/* Component selection */}
          <div>
            <label className="block text-xs font-medium text-secondary-600 mb-2">Was soll gespeichert werden?</label>
            <div className="space-y-1.5">
              {options.map((opt) => (
                <label
                  key={opt.key}
                  className={`
                    flex items-center gap-3 px-3 py-2 rounded-md cursor-pointer transition-colors
                    ${opt.available ? 'hover:bg-secondary-50' : 'opacity-40 cursor-not-allowed'}
                  `}
                >
                  <input
                    type="checkbox"
                    checked={selection[opt.key] && opt.available}
                    disabled={!opt.available}
                    onChange={() => opt.available && toggle(opt.key)}
                    className="w-4 h-4 rounded border-secondary-300 text-primary-600 focus:ring-primary-500"
                  />
                  <span className="flex items-center gap-2 flex-1">
                    <span className="text-secondary-500">{opt.icon}</span>
                    <div>
                      <div className="text-sm font-medium text-secondary-700">{opt.label}</div>
                      <div className="text-[11px] text-secondary-400">{opt.description}</div>
                    </div>
                  </span>
                  {!opt.available && (
                    <span className="text-[10px] text-secondary-400 italic">nicht aktiv</span>
                  )}
                </label>
              ))}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-secondary-100">
          <button
            onClick={onClose}
            className="px-3 py-1.5 text-sm font-medium text-secondary-600 hover:bg-secondary-100 rounded-md transition-colors"
          >
            Abbrechen
          </button>
          <button
            onClick={handleSave}
            disabled={!name.trim()}
            className={`
              inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors
              ${name.trim() ? 'bg-primary-600 text-white hover:bg-primary-700' : 'bg-secondary-200 text-secondary-400 cursor-not-allowed'}
            `}
          >
            <Check className="w-4 h-4" strokeWidth={2} />
            Speichern
          </button>
        </div>
      </div>
    </div>
  );
}