import React, { useState } from 'react';
import { motion } from 'framer-motion';

const defaultRatImage = "https://i.imgur.com/6RLwBXc.jpeg";

export default function RatGallery() {
  const [images, setImages] = useState([]);
  const [newImage, setNewImage] = useState("");

  const handleAddImage = () => {
    if (newImage.trim()) {
      setImages(prev => [{ id: Date.now(), url: newImage }, ...prev]);
      setNewImage("");
    }
  };

  const handleRemoveImage = (id) => {
    setImages(images.filter(image => image.id !== id));
  };

  return (
    <div style={{
      minHeight: '100vh',
      backgroundImage: 'url(https://i.imgur.com/jHxhXvl.jpeg)',
      backgroundSize: 'cover',
      padding: '2rem',
      fontFamily: 'Arial, sans-serif'
    }}>
      <div style={{ maxWidth: '900px', margin: '0 auto' }}>
        <motion.h1
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          style={{
            textAlign: 'center',
            fontSize: '3rem',
            color: '#7c2d12',
            marginBottom: '2rem',
            textShadow: '2px 2px #fff'
          }}
        >
          🐭 Ratagram – Red Social de Ratas
        </motion.h1>

        <div style={{
          display: 'flex',
          gap: '1rem',
          marginBottom: '2rem',
          background: '#fff',
          padding: '1rem',
          borderRadius: '1rem',
          boxShadow: '0 4px 10px rgba(0,0,0,0.1)'
        }}>
          <input
            type="text"
            placeholder="URL de la foto de tu rata..."
            value={newImage}
            onChange={(e) => setNewImage(e.target.value)}
            style={{ flexGrow: 1, padding: '0.5rem', borderRadius: '0.5rem', border: '1px solid #ccc' }}
          />
          <button
            onClick={handleAddImage}
            style={{ padding: '0.5rem 1rem', backgroundColor: '#be123c', color: '#fff', border: 'none', borderRadius: '0.5rem', cursor: 'pointer' }}
          >
            Añadir
          </button>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
          gap: '1rem'
        }}>
          {images.map(image => (
            <motion.div
              key={image.id}
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 0.3 }}
              style={{
                background: '#fff',
                borderRadius: '1rem',
                overflow: 'hidden',
                boxShadow: '0 4px 10px rgba(0,0,0,0.1)'
              }}
            >
              <img
                src={image.url}
                onError={(e) => { e.target.src = defaultRatImage; }}
                alt="rata"
                style={{ width: '100%', height: '200px', objectFit: 'cover' }}
              />
              <div style={{ padding: '0.5rem 1rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: '0.85rem', color: '#666' }}>Rata fan</span>
                <button
                  onClick={() => handleRemoveImage(image.id)}
                  style={{ background: 'transparent', border: 'none', color: '#dc2626', fontSize: '1.2rem', cursor: 'pointer' }}
                >
                  🗑️
                </button>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}