import { useState } from 'react';
import { useSitesStore } from '@/store/sites.ts';
import { useToastStore } from '@/components/ui/Toast.tsx';
import Button from '@/components/ui/Button.tsx';

interface BatchEditProps {
  onBatchApplied?: (affectedIds: string[]) => void;
}

export default function BatchEdit({ onBatchApplied }: BatchEditProps) {
  const selectedSiteIds = useSitesStore((s) => s.selectedSiteIds);
  const batchUpdateHeight = useSitesStore((s) => s.batchUpdateHeight);
  const batchSetHeight = useSitesStore((s) => s.batchSetHeight);
  const clearSelection = useSitesStore((s) => s.clearSelection);
  const addToast = useToastStore((s) => s.addToast);

  const [customHeight, setCustomHeight] = useState('');

  if (selectedSiteIds.length === 0) return null;

  const handleAdjustHeight = async (delta: number) => {
    const ids = [...selectedSiteIds];
    await batchUpdateHeight(delta);
    onBatchApplied?.(ids);
    addToast(
      `Updated ${ids.length} site(s) by ${delta > 0 ? '+' : ''}${delta}m`,
      'success'
    );
  };

  const handleSetHeight = async () => {
    const height = parseInt(customHeight, 10);
    if (isNaN(height) || height < 1 || height > 100) {
      addToast('Height must be between 1-100m', 'error');
      return;
    }
    const ids = [...selectedSiteIds];
    await batchSetHeight(height);
    onBatchApplied?.(ids);
    addToast(`Set ${ids.length} site(s) to ${height}m`, 'success');
    setCustomHeight('');
  };

  return (
    <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 space-y-3">
      <div className="flex items-center justify-between">
        <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-200">
          Batch Edit ({selectedSiteIds.length} selected)
        </h3>
        <Button onClick={clearSelection} size="sm" variant="ghost">
          Clear
        </Button>
      </div>

      {/* Quick height adjustments */}
      <div>
        <label className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1.5 block">
          Adjust Height:
        </label>
        <div className="flex gap-1.5 flex-wrap">
          <Button size="sm" variant="secondary" onClick={() => handleAdjustHeight(10)}>
            +10m
          </Button>
          <Button size="sm" variant="secondary" onClick={() => handleAdjustHeight(5)}>
            +5m
          </Button>
          <Button size="sm" variant="secondary" onClick={() => handleAdjustHeight(-5)}>
            -5m
          </Button>
          <Button size="sm" variant="secondary" onClick={() => handleAdjustHeight(-10)}>
            -10m
          </Button>
        </div>
      </div>

      {/* Set exact height */}
      <div>
        <label className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1.5 block">
          Set Height:
        </label>
        <div className="flex gap-2">
          <input
            type="number"
            min={1}
            max={100}
            value={customHeight}
            onChange={(e) => setCustomHeight(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && handleSetHeight()}
            placeholder="meters"
            className="flex-1 px-3 py-1.5 border border-gray-300 dark:border-dark-border dark:bg-dark-bg dark:text-dark-text rounded-md text-sm
              focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <Button
            size="sm"
            onClick={handleSetHeight}
            disabled={!customHeight}
          >
            Apply
          </Button>
        </div>
      </div>
    </div>
  );
}
