'use client';

import * as React from 'react';
import { Sparkles } from 'lucide-react';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { cn } from '@/lib/utils/cn';
import { getPresetsByCategory, type FormatPreset } from '@/lib/utils/formatPresets';
import type { ConversionFormat } from '@/types/conversion';

interface FormatPresetsProps {
  inputFormat: ConversionFormat;
  onPresetSelect: (preset: FormatPreset) => void;
  disabled?: boolean;
}

export function FormatPresets({ inputFormat, onPresetSelect, disabled = false }: FormatPresetsProps) {
  const [selectedPresetId, setSelectedPresetId] = React.useState<string | null>(null);

  // Get presets for the input format's category
  const presets = getPresetsByCategory(inputFormat.category);

  if (presets.length === 0) {
    return null;
  }

  const handlePresetClick = (preset: FormatPreset) => {
    setSelectedPresetId(preset.id);
    onPresetSelect(preset);
  };

  return (
    <Card className="p-4">
      <div className="flex items-center gap-2 mb-4">
        <Sparkles className="h-5 w-5 text-primary" />
        <h3 className="text-sm font-semibold">Quick Presets</h3>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {presets.map((preset) => (
          <Button
            key={preset.id}
            onClick={() => handlePresetClick(preset)}
            variant={selectedPresetId === preset.id ? 'default' : 'outline'}
            className={cn(
              'h-auto py-4 px-4 flex flex-col items-start text-left gap-2',
              selectedPresetId === preset.id && 'ring-2 ring-primary ring-offset-2'
            )}
            disabled={disabled}
          >
            <div className="flex items-center gap-2 w-full">
              <span className="text-2xl">{preset.icon}</span>
              <div className="flex-1 min-w-0">
                <div className="font-semibold text-sm">{preset.name}</div>
              </div>
            </div>
            <p className="text-xs text-muted-foreground w-full">{preset.description}</p>
          </Button>
        ))}
      </div>

      <div className="mt-3 text-xs text-muted-foreground">
        Select a preset to automatically configure optimal settings for your use case
      </div>
    </Card>
  );
}