pn-new-crm/src/components/shared/save-view-dialog.tsx

'use client';

import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useSavedViews } from '@/hooks/use-saved-views';

interface SaveViewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  entityType: string;
  currentFilters: Record<string, unknown>;
  currentSort?: { field: string; direction: 'asc' | 'desc' };
}

/**
 * Standalone save-view dialog. Lifted out of SavedViewsDropdown so the
 * "Save current view" affordance can live inside the column picker
 * (where the rep is already configuring the table) instead of as a
 * top-level button. SavedViewsDropdown now only handles browsing and
 * applying existing views — the save and read concerns are split.
 */
export function SaveViewDialog({
  open,
  onOpenChange,
  entityType,
  currentFilters,
  currentSort,
}: SaveViewDialogProps) {
  const { saveCurrentView } = useSavedViews(entityType);
  const [viewName, setViewName] = useState('');
  const [isSaving, setIsSaving] = useState(false);

  async function handleSave() {
    if (!viewName.trim()) return;
    setIsSaving(true);
    try {
      await saveCurrentView(viewName.trim(), currentFilters, currentSort);
      onOpenChange(false);
      setViewName('');
    } finally {
      setIsSaving(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Save view</DialogTitle>
        </DialogHeader>
        <div className="space-y-2">
          <Label>View name</Label>
          <Input
            value={viewName}
            onChange={(e) => setViewName(e.target.value)}
            placeholder="My custom view"
            onKeyDown={(e) => e.key === 'Enter' && handleSave()}
            autoFocus
          />
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleSave} disabled={!viewName.trim() || isSaving}>
            Save
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}