import React from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ImagePlus, Star, Trash2, X } from 'lucide-react';

export default function PostGallery({ 
    existingImages, 
    newImages, 
    onAddImages, 
    onDeleteExisting, 
    onDeleteNew, 
    onSetPrimary, 
    onCaptionChange 
}) {
    const totalCount = existingImages.length + newImages.length;

    return (
        <div className="border rounded-lg p-4 bg-muted/10 space-y-4">
            <div className="flex justify-between items-center">
                <Label className="text-base font-semibold">Gallery & Covers ({totalCount}/5)</Label>
                <div className="relative">
                    <input 
                        type="file" 
                        id="admin-img-upload" 
                        className="hidden" 
                        multiple 
                        accept="image/*" 
                        onChange={onAddImages} 
                        disabled={totalCount >= 5}
                    />
                    <Button 
                        type="button" 
                        variant="outline" 
                        size="sm" 
                        onClick={() => document.getElementById('admin-img-upload').click()}
                        disabled={totalCount >= 5}
                    >
                        <ImagePlus className="w-4 h-4 mr-2" /> Add Images
                    </Button>
                </div>
            </div>

            <div className="space-y-3">
                {totalCount === 0 && (
                    <div className="text-center py-6 text-muted-foreground text-sm border-2 border-dashed rounded-md bg-background">
                        No images uploaded. Add images to set a cover.
                    </div>
                )}

                {/* Existing Images */}
                {existingImages.map(img => (
                    <GalleryItem 
                        key={`existing-${img.id}`}
                        src={img.image_path}
                        caption={img.caption || ''}
                        isPrimary={img.is_primary}
                        type="existing"
                        onCaptionChange={(val) => onCaptionChange('existing', img.id, val)}
                        onSetPrimary={() => onSetPrimary('existing', img.id)}
                        onDelete={() => onDeleteExisting(img.id)}
                    />
                ))}

                {/* New Images */}
                {newImages.map((img, i) => (
                    <GalleryItem 
                        key={`new-${i}`}
                        src={img.preview}
                        caption={img.caption}
                        isPrimary={img.isPrimary}
                        isNew={true}
                        type="new"
                        onCaptionChange={(val) => onCaptionChange('new', i, val)}
                        onSetPrimary={() => onSetPrimary('new', i)}
                        onDelete={() => onDeleteNew(i)}
                    />
                ))}
            </div>
        </div>
    );
}

// Sub-component for individual row
function GalleryItem({ src, caption, isPrimary, isNew, onCaptionChange, onSetPrimary, onDelete }) {
    return (
        <div className={`flex gap-3 p-2 border bg-card rounded-md items-center transition-all ${isPrimary ? 'border-primary ring-1 ring-primary/20 bg-primary/5' : ''}`}>
            <div className="relative w-16 h-16 shrink-0 rounded overflow-hidden bg-muted">
                <img src={src} className="w-full h-full object-cover" />
                {isNew && <span className="absolute top-0 right-0 bg-green-500 text-[8px] text-white px-1 font-bold">NEW</span>}
            </div>
            
            <div className="flex-1 min-w-0">
                <Input 
                    value={caption} 
                    onChange={e => onCaptionChange(e.target.value)} 
                    placeholder="Enter image caption..." 
                    className="h-8 text-xs bg-background" 
                />
            </div>

            <div className="flex gap-1">
                <Button 
                    type="button" 
                    size="icon" 
                    variant={isPrimary ? 'default' : 'ghost'} 
                    onClick={onSetPrimary}
                    title="Set as Primary Cover"
                    className="h-8 w-8"
                >
                    <Star className={`w-4 h-4 ${isPrimary ? 'fill-current' : ''}`} />
                </Button>
                <Button 
                    type="button" 
                    size="icon" 
                    variant="ghost" 
                    className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10" 
                    onClick={onDelete}
                    title="Remove Image"
                >
                    <Trash2 className="w-4 h-4" />
                </Button>
            </div>
        </div>
    );
}