import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { FileCheck } from 'lucide-react';

interface AllowedFileTypesProps {
  allowedFileTypes: string;
  onAllowedFileTypesChange: (types: string) => void;
}

// Common file type mappings
const FILE_TYPE_GROUPS = [
  { label: 'PDF Documents', extensions: ['pdf'] },
  { label: 'Microsoft Word', extensions: ['doc', 'docx'] },
  { label: 'Microsoft Excel', extensions: ['xls', 'xlsx'] },
  { label: 'Microsoft PowerPoint', extensions: ['ppt', 'pptx'] },
  { label: 'Images', extensions: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'] },
  { label: 'CSV Files', extensions: ['csv'] },
  { label: 'Text Files', extensions: ['txt', 'rtf'] }
];

export function AllowedFileTypes({ allowedFileTypes, onAllowedFileTypesChange }: AllowedFileTypesProps) {
  const allowedExtensions = allowedFileTypes.split(',').map(ext => ext.trim().toLowerCase());
  
  const toggleFileType = (extensions: string[], enabled: boolean) => {
    const currentExts = new Set(allowedExtensions);
    
    if (enabled) {
      extensions.forEach(ext => currentExts.add(ext));
    } else {
      extensions.forEach(ext => currentExts.delete(ext));
    }
    
    onAllowedFileTypesChange(Array.from(currentExts).join(','));
  };

  const isGroupEnabled = (extensions: string[]) => {
    return extensions.some(ext => allowedExtensions.includes(ext));
  };

  const handleManualEdit = (value: string) => {
    onAllowedFileTypesChange(value);
  };

  return (
    <Card className="border-0 shadow-sm">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2">
          <FileCheck className="w-5 h-5 text-re-green" />
          <CardTitle className="text-base font-semibold">Allowed File Types</CardTitle>
        </div>
        <CardDescription className="text-sm">
          Select which file types are allowed for upload
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {FILE_TYPE_GROUPS.map((group) => {
            const isEnabled = isGroupEnabled(group.extensions);
            return (
              <div
                key={group.label}
                onClick={() => toggleFileType(group.extensions, !isEnabled)}
                className={`flex items-center justify-between p-3 rounded-md border-2 cursor-pointer transition-all ${
                  isEnabled
                    ? 'bg-re-green/5 border-re-green/30 hover:border-re-green/50'
                    : 'bg-gray-50 border-gray-200 hover:border-gray-300'
                }`}
              >
                <div className="flex items-center gap-2">
                  <div
                    className={`w-4 h-4 rounded border-2 flex items-center justify-center ${
                      isEnabled
                        ? 'bg-re-green border-re-green'
                        : 'bg-white border-gray-300'
                    }`}
                  >
                    {isEnabled && (
                      <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path
                          fillRule="evenodd"
                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                          clipRule="evenodd"
                        />
                      </svg>
                    )}
                  </div>
                  <span className={`text-sm font-medium ${isEnabled ? 'text-re-green' : 'text-gray-600'}`}>
                    {group.label}
                  </span>
                </div>
                <span className="text-xs text-muted-foreground">
                  {group.extensions.join(', ')}
                </span>
              </div>
            );
          })}
        </div>

        <div className="space-y-2 pt-2">
          <Label htmlFor="file-types-manual" className="text-sm font-medium">
            File Extensions (comma-separated)
          </Label>
          <Input
            id="file-types-manual"
            type="text"
            value={allowedFileTypes}
            onChange={(e) => handleManualEdit(e.target.value)}
            placeholder="pdf,doc,docx,xls,xlsx,ppt,pptx,jpg,jpeg,png,gif"
            className="border-gray-200 focus:border-re-green focus:ring-2 focus:ring-re-green/20 font-mono text-sm"
          />
          <p className="text-xs text-muted-foreground">
            Edit directly or use the checkboxes above. Separate extensions with commas.
          </p>
        </div>
      </CardContent>
    </Card>
  );
}
