import { ChevronDown, Database, FileArchive, Package, Play } from 'lucide-react';
import { Button } from './ui/Button';
import { Menu } from './ui/Menu';
import { cn } from '@/lib/cn';
import type { BackupType } from '@/lib/api';

/**
 * Split-action "Backup now" button used on Dashboard + Backups pages.
 * Main button = quick full backup. Chevron opens a menu with explicit type choices.
 */
export function BackupNowButton({
  onRun,
  disabled,
  label,
}: {
  onRun: (t: BackupType) => void;
  disabled: boolean;
  label: string;
}) {
  return (
    <div className="inline-flex">
      <Button
        variant="primary"
        size="md"
        leftIcon={<Play className="h-4 w-4" />}
        disabled={disabled}
        onClick={() => onRun('full')}
        className="rounded-r-none"
      >
        {label}
      </Button>
      <Menu
        align="right"
        trigger={(open, toggle) => (
          <button
            type="button"
            disabled={disabled}
            onClick={toggle}
            aria-haspopup="menu"
            aria-expanded={open}
            className={cn(
              'h-9 px-2 rounded-r-lg border-l border-brand-700/30 transition-colors',
              'bg-brand-500 text-white hover:bg-brand-600 active:bg-brand-700',
              'disabled:opacity-50 disabled:cursor-not-allowed',
              open && 'bg-brand-700',
            )}
          >
            <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
          </button>
        )}
        items={[
          {
            label: 'Full backup',
            description: 'Files + database',
            icon: <Package className="h-3.5 w-3.5" />,
            onSelect: () => onRun('full'),
          },
          {
            label: 'Database only',
            description: 'All tables, fast (~30s)',
            icon: <Database className="h-3.5 w-3.5" />,
            onSelect: () => onRun('database'),
          },
          {
            label: 'Files only',
            description: 'Uploads, themes, plugins',
            icon: <FileArchive className="h-3.5 w-3.5" />,
            onSelect: () => onRun('files'),
          },
        ]}
      />
    </div>
  );
}
