kit-ui/components/favicon/FaviconFileUpload.tsx

'use client';

import * as React from 'react';
import { Upload, X, FileImage, HardDrive, Film } from 'lucide-react';
import { cn } from '@/lib/utils/cn';

export interface FaviconFileUploadProps {
  onFileSelect: (file: File) => void;
  onFileRemove: () => void;
  selectedFile?: File | null;
  disabled?: boolean;
}

export function FaviconFileUpload({
  onFileSelect,
  onFileRemove,
  selectedFile,
  disabled = false,
}: FaviconFileUploadProps) {
  const [isDragging, setIsDragging] = React.useState(false);
  const [dimensions, setDimensions] = React.useState<string | null>(null);
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  React.useEffect(() => {
    if (selectedFile) {
      const img = new Image();
      img.onload = () => {
        setDimensions(`${img.width}×${img.height}`);
        URL.revokeObjectURL(img.src);
      };
      img.src = URL.createObjectURL(selectedFile);
    } else {
      setDimensions(null);
    }
  }, [selectedFile]);

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    if (disabled) return;
    const files = Array.from(e.dataTransfer.files);
    if (files.length > 0 && files[0].type.startsWith('image/')) onFileSelect(files[0]);
  };

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length > 0 && files[0].type.startsWith('image/')) onFileSelect(files[0]);
  };

  return (
    <div className="w-full">
      <input
        ref={fileInputRef}
        type="file"
        className="hidden"
        accept="image/*"
        onChange={handleFileInput}
        disabled={disabled}
      />

      {selectedFile ? (
        <div className="flex items-start gap-3 p-3 rounded-xl border border-border/25 bg-primary/3">
          <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
            <FileImage className="w-4 h-4 text-primary" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-start justify-between gap-2">
              <p className="text-xs font-mono text-foreground/80 truncate" title={selectedFile.name}>
                {selectedFile.name}
              </p>
              <button
                onClick={onFileRemove}
                disabled={disabled}
                className="shrink-0 w-5 h-5 flex items-center justify-center rounded text-muted-foreground/30 hover:text-rose-400 transition-colors"
              >
                <X className="w-3 h-3" />
              </button>
            </div>
            <div className="mt-1 flex flex-wrap gap-2.5 text-[10px] text-muted-foreground/40 font-mono">
              <span className="flex items-center gap-1">
                <HardDrive className="w-2.5 h-2.5" />
                {selectedFile.size < 1024 * 1024
                  ? `${(selectedFile.size / 1024).toFixed(1)} KB`
                  : `${(selectedFile.size / (1024 * 1024)).toFixed(1)} MB`}
              </span>
              {dimensions && (
                <span className="flex items-center gap-1">
                  <Film className="w-2.5 h-2.5" />{dimensions}
                </span>
              )}
            </div>
          </div>
        </div>
      ) : (
        <div
          onClick={() => !disabled && fileInputRef.current?.click()}
          onDragEnter={(e) => { e.preventDefault(); if (!disabled) setIsDragging(true); }}
          onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }}
          onDragOver={(e) => e.preventDefault()}
          onDrop={handleDrop}
          className={cn(
            'flex flex-col items-center justify-center rounded-xl border-2 border-dashed transition-all cursor-pointer text-center select-none py-8',
            isDragging
              ? 'border-primary bg-primary/10 scale-[0.99]'
              : 'border-border/35 hover:border-primary/40 hover:bg-primary/5',
            disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
          )}
        >
          <div className={cn(
            'w-14 h-14 rounded-full flex items-center justify-center mb-4 transition-colors',
            isDragging ? 'bg-primary/25' : 'bg-primary/10'
          )}>
            <Upload className={cn('w-6 h-6 transition-colors', isDragging ? 'text-primary' : 'text-primary/60')} />
          </div>
          <p className="text-sm font-medium text-foreground/70 mb-1">
            {isDragging ? 'Drop to upload' : 'Drop icon here or click to browse'}
          </p>
          <p className="text-[10px] text-muted-foreground/35 font-mono">
            PNG · SVG · 512×512 recommended
          </p>
        </div>
      )}
    </div>
  );
}