/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useState, useEffect, useRef } from 'react';
import { 
  X, 
  Plus, 
  Trash2, 
  HelpCircle, 
  Film, 
  Layers, 
  Link, 
  HardDrive, 
  Upload, 
  Loader2, 
  Check, 
  FileVideo, 
  Folder, 
  Cloud 
} from 'lucide-react';
import { ContentItem, Season, Episode } from '../types';

interface CreatorModalProps {
  editItem?: ContentItem | null; // If passed, we are in edit mode
  onClose: () => void;
  onSave: (item: ContentItem) => void;
}

export default function CreatorModal({ editItem, onClose, onSave }: CreatorModalProps) {
  const [type, setType] = useState<'movie' | 'series'>('movie');
  const [title, setTitle] = useState('');
  const [poster, setPoster] = useState('');
  const [synopsis, setSynopsis] = useState('');
  const [category, setCategory] = useState('');
  const [year, setYear] = useState('2026');
  const [duration, setDuration] = useState('');
  const [message, setMessage] = useState('');
  const [file, setFile] = useState('');
  const [seasons, setSeasons] = useState<Season[]>([]);

  // Video source controls for Movies
  const [movieSourceType, setMovieSourceType] = useState<'url' | 'drive' | 'pc'>('url');
  const [movieUploadProgress, setMovieUploadProgress] = useState<number | null>(null);
  const [movieFileName, setMovieFileName] = useState('');
  const movieFileInputRef = useRef<HTMLInputElement>(null);

  // Simulated Google Drive states
  const [showDrivePicker, setShowDrivePicker] = useState(false);
  const [activeDrivePickerTarget, setActiveDrivePickerTarget] = useState<{
    type: 'movie' | 'episode';
    seasonId?: string;
    episodeId?: string;
  } | null>(null);
  const [driveConnecting, setDriveConnecting] = useState(false);

  // Prefill values if in edit mode
  useEffect(() => {
    if (editItem) {
      setType(editItem.type);
      setTitle(editItem.title || '');
      setPoster(editItem.poster || '');
      setSynopsis(editItem.synopsis || '');
      setCategory(editItem.category || '');
      setYear(editItem.year || '2026');
      setDuration(editItem.duration || '');
      setMessage(editItem.message || '');
      setFile(editItem.file || '');
      setSeasons(editItem.seasons ? JSON.parse(JSON.stringify(editItem.seasons)) : []);
      
      if (editItem.file) {
        if (editItem.file.startsWith('blob:')) {
          setMovieSourceType('pc');
          setMovieFileName('Video local cargado de la PC');
        } else if (editItem.file.includes('drive.google.com') || editItem.file.includes('googleusercontent')) {
          setMovieSourceType('drive');
          setMovieFileName('Archivo de Google Drive seleccionado');
        } else {
          setMovieSourceType('url');
        }
      }
    } else {
      // Defaults for new item
      setType('movie');
      setTitle('');
      setPoster('');
      setSynopsis('');
      setCategory('Acción / Sci-Fi');
      setYear('2026');
      setDuration('');
      setMessage('');
      setFile('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4');
      setSeasons([
        {
          id: `season-${Date.now()}`,
          name: 'Temporada 1',
          episodes: [
            {
              id: `ep-${Date.now()}-1`,
              name: 'Episodio 1: Piloto',
              file: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
              duration: '10 min',
              synopsis: 'Introducción a la historia y personajes principales.'
            }
          ]
        }
      ]);
    }
  }, [editItem]);

  // Handle local video upload from PC (Movies)
  const handleMovieLocalFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const localFile = e.target.files?.[0];
    if (!localFile) return;

    setMovieFileName(localFile.name);
    setMovieUploadProgress(0);

    // Simulate high quality upload transition progress
    let progress = 0;
    const interval = setInterval(() => {
      progress += 12;
      if (progress >= 100) {
        progress = 100;
        clearInterval(interval);
        setTimeout(() => {
          setMovieUploadProgress(null);
          // Create real reproducible blob URL in client browser!
          const blobUrl = URL.createObjectURL(localFile);
          setFile(blobUrl);
        }, 400);
      }
      setMovieUploadProgress(progress);
    }, 120);
  };

  // Simulated Google Drive sample video picker selection
  const handleSelectDriveFile = (driveFileUrl: string, driveFileName: string) => {
    if (!activeDrivePickerTarget) return;

    setDriveConnecting(true);
    setTimeout(() => {
      setDriveConnecting(false);
      setShowDrivePicker(false);

      if (activeDrivePickerTarget.type === 'movie') {
        setFile(driveFileUrl);
        setMovieFileName(driveFileName);
        setMovieSourceType('drive');
      } else if (activeDrivePickerTarget.type === 'episode' && activeDrivePickerTarget.seasonId && activeDrivePickerTarget.episodeId) {
        const sId = activeDrivePickerTarget.seasonId;
        const eId = activeDrivePickerTarget.episodeId;
        setSeasons(prev => 
          prev.map(s => {
            if (s.id === sId) {
              return {
                ...s,
                episodes: s.episodes.map(e => e.id === eId ? { ...e, file: driveFileUrl, driveFileName: driveFileName } : e)
              };
            }
            return s;
          })
        );
      }
      setActiveDrivePickerTarget(null);
    }, 800); // 800ms loading simulator
  };

  // Handle local episode upload from PC (Series)
  const handleEpisodeLocalFileChange = (seasonId: string, episodeId: string, e: React.ChangeEvent<HTMLInputElement>) => {
    const localFile = e.target.files?.[0];
    if (!localFile) return;

    // Trigger local simulation of progress directly
    const elementId = `ep-progress-${episodeId}`;
    const progressTextId = `ep-text-${episodeId}`;
    
    // Quick update via manual DOM state since state is inside a nested array
    const progressEl = document.getElementById(elementId);
    const progressTextEl = document.getElementById(progressTextId);
    if (progressEl) progressEl.style.width = '0%';
    if (progressTextEl) progressTextEl.innerText = 'Subiendo: 0%';

    let progress = 0;
    const interval = setInterval(() => {
      progress += 20;
      if (progressEl) progressEl.style.width = `${progress}%`;
      if (progressTextEl) progressTextEl.innerText = `Subiendo: ${progress}%`;

      if (progress >= 100) {
        clearInterval(interval);
        setTimeout(() => {
          if (progressTextEl) progressTextEl.innerText = `Listo: ${localFile.name}`;
          const blobUrl = URL.createObjectURL(localFile);
          
          setSeasons(prev => 
            prev.map(s => {
              if (s.id === seasonId) {
                return {
                  ...s,
                  episodes: s.episodes.map(e => e.id === episodeId ? { ...e, file: blobUrl, pcFileName: localFile.name } : e)
                };
              }
              return s;
            })
          );
        }, 300);
      }
    }, 100);
  };

  const handleAddSeason = () => {
    const seasonId = `season-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`;
    const newSeason: Season = {
      id: seasonId,
      name: `Temporada ${seasons.length + 1}`,
      episodes: [
        {
          id: `ep-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`,
          name: 'Episodio 1: Inicio',
          file: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
          duration: '10 min',
          synopsis: 'Sinopsis del nuevo episodio.'
        }
      ]
    };
    setSeasons([...seasons, newSeason]);
  };

  const handleRemoveSeason = (seasonId: string) => {
    setSeasons(seasons.filter((s) => s.id !== seasonId));
  };

  const handleSeasonNameChange = (seasonId: string, value: string) => {
    setSeasons(
      seasons.map((s) => (s.id === seasonId ? { ...s, name: value } : s))
    );
  };

  const handleAddEpisode = (seasonId: string) => {
    setSeasons(
      seasons.map((s) => {
        if (s.id === seasonId) {
          const epId = `ep-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`;
          const newEp: Episode = {
            id: epId,
            name: `Episodio ${s.episodes.length + 1}`,
            file: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
            duration: '12 min',
            synopsis: ''
          };
          return { ...s, episodes: [...s.episodes, newEp] };
        }
        return s;
      })
    );
  };

  const handleRemoveEpisode = (seasonId: string, episodeId: string) => {
    setSeasons(
      seasons.map((s) => {
        if (s.id === seasonId) {
          return { ...s, episodes: s.episodes.filter((e) => e.id !== episodeId) };
        }
        return s;
      })
    );
  };

  const handleEpisodeChange = (
    seasonId: string,
    episodeId: string,
    field: keyof Episode,
    value: string
  ) => {
    setSeasons(
      seasons.map((s) => {
        if (s.id === seasonId) {
          const updatedEpisodes = s.episodes.map((e) => {
            if (e.id === episodeId) {
              return { ...e, [field]: value };
            }
            return e;
          });
          return { ...s, episodes: updatedEpisodes };
        }
        return s;
      })
    );
  };

  const handleSave = (e: React.FormEvent) => {
    e.preventDefault();

    if (!title.trim()) {
      alert('Por favor introduce un título válido.');
      return;
    }

    // Default poster if empty
    const posterUrl = poster.trim() || 'https://images.unsplash.com/photo-1594909122845-11baa439b7bf?q=80&w=800&auto=format&fit=crop';

    const savedItem: ContentItem = {
      id: editItem ? editItem.id : `custom-${Date.now()}`,
      type,
      title,
      poster: posterUrl,
      synopsis,
      category,
      year,
      duration: type === 'movie' ? duration || '1h 30m' : `${seasons.length} ${seasons.length === 1 ? 'Temporada' : 'Temporadas'}`,
      likes: editItem ? editItem.likes : 0,
      dislikes: editItem ? editItem.dislikes : 0,
      message: message.trim() || undefined,
      file: type === 'movie' ? file : undefined,
      seasons: type === 'series' ? seasons : undefined
    };

    onSave(savedItem);
  };

  // Helper to prefill beautiful Unsplash images on click
  const setPredefinedPoster = (url: string) => {
    setPoster(url);
  };

  return (
    <div
      id="creatorModalOverlay"
      className="fixed inset-0 z-40 bg-black/85 backdrop-blur-md flex items-center justify-center p-4 md:p-6 overflow-y-auto font-sans text-gray-200"
    >
      <div
        id="creatorModalContent"
        className="relative bg-[#12121a] border border-white/10 w-full max-w-3xl rounded-2xl overflow-hidden shadow-2xl shadow-red-500/5 my-auto"
      >
        {/* Modal Header */}
        <div className="px-6 py-4 bg-[#161622] border-b border-white/5 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse" />
            <h3 id="creatorModalHeading" className="text-xl font-bold text-white font-display">
              {editItem ? 'Editar Contenido' : 'Publicar Nuevo Contenido'}
            </h3>
          </div>
          <button
            id="creatorCloseBtn"
            onClick={onClose}
            className="p-1.5 hover:bg-white/10 rounded-full text-gray-400 hover:text-white transition-colors cursor-pointer"
          >
            <X size={18} />
          </button>
        </div>

        {/* Modal Form */}
        <form onSubmit={handleSave} className="p-6 overflow-y-auto max-h-[78vh] space-y-6 custom-scrollbar">
          
          {/* Format Type Selector */}
          <div className="grid grid-cols-2 gap-3">
            <button
              type="button"
              onClick={() => setType('movie')}
              className={`py-3 rounded-xl border font-bold text-sm flex items-center justify-center gap-2 transition-all cursor-pointer ${
                type === 'movie'
                  ? 'bg-red-600/15 border-red-500 text-white'
                  : 'bg-white/5 border-transparent hover:bg-white/10 text-gray-400'
              }`}
            >
              <Film size={16} />
              Película de Cine
            </button>
            <button
              type="button"
              onClick={() => setType('series')}
              className={`py-3 rounded-xl border font-bold text-sm flex items-center justify-center gap-2 transition-all cursor-pointer ${
                type === 'series'
                  ? 'bg-red-600/15 border-red-500 text-white'
                  : 'bg-white/5 border-transparent hover:bg-white/10 text-gray-400'
              }`}
            >
              <Layers size={16} />
              Serie de Temporadas
            </button>
          </div>

          {/* Title & Metadata */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="md:col-span-2 space-y-1.5">
              <label className="text-xs font-bold uppercase text-gray-400 font-display">
                Título de la obra
              </label>
              <input
                type="text"
                required
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Ej: Sombras de Neon"
                className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors"
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-xs font-bold uppercase text-gray-400 font-display">
                Año de lanzamiento
              </label>
              <input
                type="number"
                min="1900"
                max="2100"
                required
                value={year}
                onChange={(e) => setYear(e.target.value)}
                placeholder="2026"
                className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <label className="text-xs font-bold uppercase text-gray-400 font-display">
                Categoría / Género
              </label>
              <input
                type="text"
                required
                value={category}
                onChange={(e) => setCategory(e.target.value)}
                placeholder="Ej: Cyberpunk / Thriller"
                className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors"
              />
            </div>
            <div className="space-y-1.5">
              <label className="text-xs font-bold uppercase text-gray-400 font-display">
                {type === 'movie' ? 'Duración de la Película' : 'Descripción de Temporadas (Automático)'}
              </label>
              <input
                type="text"
                disabled={type === 'series'}
                required={type === 'movie'}
                value={type === 'movie' ? duration : `${seasons.length} ${seasons.length === 1 ? 'Temporada' : 'Temporadas'}`}
                onChange={(e) => setDuration(e.target.value)}
                placeholder={type === 'movie' ? "Ej: 1h 45m" : "Ej: 1 Temporada"}
                className="w-full bg-white/[0.04] disabled:opacity-50 border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors"
              />
            </div>
          </div>

          {/* Synopsis */}
          <div className="space-y-1.5">
            <label className="text-xs font-bold uppercase text-gray-400 font-display">
              Sinopsis / Resumen descriptivo
            </label>
            <textarea
              rows={3}
              value={synopsis}
              onChange={(e) => setSynopsis(e.target.value)}
              placeholder="En una ciudad que nunca duerme..."
              className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl p-4 text-white outline-none transition-colors resize-none"
            />
          </div>

          {/* Poster Image URL */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <label className="text-xs font-bold uppercase text-gray-400 font-display">
                URL de imagen del cartel (Poster)
              </label>
              <span className="text-[10px] text-gray-500">Puedes ingresar cualquier link de internet o elegir un estilo de abajo</span>
            </div>
            <input
              type="url"
              value={poster}
              onChange={(e) => setPoster(e.target.value)}
              placeholder="https://images.unsplash.com/photo-..."
              className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors font-mono text-xs"
            />
            {/* Rapid Preset Suggestions to make it look spectacular */}
            <div className="flex flex-wrap gap-2 pt-1">
              <button
                type="button"
                onClick={() => setPredefinedPoster('https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=800&auto=format&fit=crop')}
                className="px-2 py-1 bg-white/5 hover:bg-white/10 border border-white/10 text-[10px] font-semibold text-gray-300 rounded"
              >
                🎮 Neon Cyberpunk
              </button>
              <button
                type="button"
                onClick={() => setPredefinedPoster('https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?q=80&w=800&auto=format&fit=crop')}
                className="px-2 py-1 bg-white/5 hover:bg-white/10 border border-white/10 text-[10px] font-semibold text-gray-300 rounded"
              >
                🎬 Cine Clásico
              </button>
              <button
                type="button"
                onClick={() => setPredefinedPoster('https://images.unsplash.com/photo-1574375927938-d5a98e8ffe85?q=80&w=800&auto=format&fit=crop')}
                className="px-2 py-1 bg-white/5 hover:bg-white/10 border border-white/10 text-[10px] font-semibold text-gray-300 rounded"
              >
                🔴 Estilo Red Console
              </button>
              <button
                type="button"
                onClick={() => setPredefinedPoster('https://images.unsplash.com/photo-1506703719100-a0f3a48c0f86?q=80&w=800&auto=format&fit=crop')}
                className="px-2 py-1 bg-white/5 hover:bg-white/10 border border-white/10 text-[10px] font-semibold text-gray-300 rounded"
              >
                🌌 Espacial Kepler
              </button>
            </div>
          </div>

          {/* If format is MOVIE: High Quality Multi-Source video upload loader */}
          {type === 'movie' && (
            <div className="p-4 bg-white/[0.02] border border-white/5 rounded-2xl space-y-4">
              <div className="flex items-center justify-between border-b border-white/5 pb-2">
                <label className="text-xs font-bold uppercase text-red-400 font-display flex items-center gap-1.5">
                  <Film size={14} />
                  Formas de subir video de la Película
                </label>
              </div>

              {/* Source tabs selector */}
              <div className="grid grid-cols-3 gap-2 p-1 bg-white/[0.03] border border-white/5 rounded-xl">
                <button
                  type="button"
                  onClick={() => setMovieSourceType('url')}
                  className={`py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer ${
                    movieSourceType === 'url' ? 'bg-red-600 text-white shadow' : 'text-gray-400 hover:text-white'
                  }`}
                >
                  <Link size={12} />
                  Enlace / Link
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setMovieSourceType('drive');
                    setActiveDrivePickerTarget({ type: 'movie' });
                    setShowDrivePicker(true);
                  }}
                  className={`py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer ${
                    movieSourceType === 'drive' ? 'bg-red-600 text-white shadow' : 'text-gray-400 hover:text-white'
                  }`}
                >
                  <Cloud size={12} />
                  Google Drive
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setMovieSourceType('pc');
                    movieFileInputRef.current?.click();
                  }}
                  className={`py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-1.5 transition-all cursor-pointer ${
                    movieSourceType === 'pc' ? 'bg-red-600 text-white shadow' : 'text-gray-400 hover:text-white'
                  }`}
                >
                  <Upload size={12} />
                  Subir desde PC
                </button>
              </div>

              {/* Hidden file selector */}
              <input
                ref={movieFileInputRef}
                type="file"
                accept="video/*"
                className="hidden"
                onChange={handleMovieLocalFileChange}
              />

              {/* Tab views contents */}
              {movieSourceType === 'url' && (
                <div className="space-y-1.5 pt-1">
                  <input
                    type="text"
                    required={type === 'movie' && movieSourceType === 'url'}
                    value={file}
                    onChange={(e) => { setFile(e.target.value); setMovieFileName(''); }}
                    placeholder="Escribe la URL o link (.mp4, stream, etc.)"
                    className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none text-xs font-mono"
                  />
                  <span className="text-[10px] text-gray-500 block">
                    Ingresa un link directo de video público (p. ej. archivos .mp4 estables en la web) para cargarlo en la sala de reproducción de Ilusuax.
                  </span>
                </div>
              )}

              {movieSourceType === 'drive' && (
                <div className="bg-blue-950/10 border border-blue-900/20 rounded-xl p-3 flex items-center justify-between gap-3 pt-2">
                  <div className="flex items-center gap-2.5">
                    <Cloud size={20} className="text-blue-400" />
                    <div>
                      <span className="text-xs font-bold text-blue-400 block font-display">Integración con Google Drive</span>
                      <span className="text-[10px] text-gray-400">
                        {file && file.includes('google') ? (movieFileName || 'Archivo cargado con éxito') : 'Sin archivo seleccionado de Drive'}
                      </span>
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => {
                      setActiveDrivePickerTarget({ type: 'movie' });
                      setShowDrivePicker(true);
                    }}
                    className="px-3 py-1.5 bg-blue-600/25 hover:bg-blue-600 text-blue-200 hover:text-white text-[10px] font-bold rounded-lg transition-all cursor-pointer"
                  >
                    Examinar Drive
                  </button>
                </div>
              )}

              {movieSourceType === 'pc' && (
                <div className="space-y-2">
                  <div
                    onClick={() => movieFileInputRef.current?.click()}
                    className="border-2 border-dashed border-white/10 hover:border-red-500/50 rounded-xl p-4 flex flex-col items-center justify-center gap-2 cursor-pointer bg-white/[0.01] hover:bg-white/[0.03] transition-all"
                  >
                    <Upload size={24} className="text-gray-400 group-hover:text-red-500" />
                    <span className="text-xs font-semibold text-gray-300">Arrastra tu video aquí o haz clic para buscar</span>
                    <span className="text-[10px] text-gray-500">Admite MP4, WebM, MKV u otros formatos de video locales</span>
                  </div>

                  {movieUploadProgress !== null && (
                    <div className="space-y-1">
                      <div className="flex items-center justify-between text-[10px] text-gray-400 font-mono">
                        <span>Cargando archivo: {movieFileName}</span>
                        <span>{movieUploadProgress}%</span>
                      </div>
                      <div className="w-full h-1 bg-white/10 rounded-full overflow-hidden">
                        <div className="h-full bg-red-600 rounded-full transition-all" style={{ width: `${movieUploadProgress}%` }} />
                      </div>
                    </div>
                  )}

                  {file && file.startsWith('blob:') && !movieUploadProgress && (
                    <div className="flex items-center gap-2 text-xs text-emerald-400 bg-emerald-950/20 border border-emerald-900/30 px-3 py-2 rounded-xl">
                      <Check size={14} className="shrink-0" />
                      <span className="truncate">Listo para reproducción local: {movieFileName || 'Video de PC'}</span>
                    </div>
                  )}
                </div>
              )}

            </div>
          )}

          {/* If format is SERIES: Dynamic Seasons & Episodes Adder */}
          {type === 'series' && (
            <div className="space-y-4">
              <div className="flex items-center justify-between border-b border-white/5 pb-2">
                <label className="text-xs font-bold uppercase text-red-400 font-display flex items-center gap-1.5">
                  <Layers size={14} />
                  Gestor de Temporadas y Capítulos
                </label>
                <button
                  type="button"
                  onClick={handleAddSeason}
                  className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg text-xs flex items-center gap-1 transition-all cursor-pointer"
                >
                  <Plus size={12} />
                  Añadir Temporada
                </button>
              </div>

              {/* Seasons container list */}
              <div className="space-y-6">
                {seasons.map((season, seasonIdx) => (
                  <div
                    key={season.id}
                    className="p-4 bg-white/[0.02] border border-white/10 rounded-xl space-y-4"
                  >
                    {/* Season Name and Delete */}
                    <div className="flex items-center justify-between gap-3">
                      <div className="flex items-center gap-2 flex-1">
                        <span className="text-xs text-gray-500 font-mono">T{seasonIdx + 1}</span>
                        <input
                          type="text"
                          required
                          value={season.name}
                          onChange={(e) => handleSeasonNameChange(season.id, e.target.value)}
                          placeholder="Nombre de la temporada (ej. Temporada 1)"
                          className="bg-transparent text-white font-bold text-sm outline-none border-b border-white/10 focus:border-red-500 pb-0.5 flex-1 max-w-[200px]"
                        />
                      </div>
                      <button
                        type="button"
                        onClick={() => handleRemoveSeason(season.id)}
                        className="text-red-400 hover:text-red-500 p-1 rounded hover:bg-white/5 transition-colors cursor-pointer"
                        title="Eliminar Temporada Completa"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>

                    {/* Episodes of this season list */}
                    <div className="space-y-3">
                      <span className="text-[10px] font-bold text-gray-500 uppercase tracking-wider block">Episodios</span>
                      {season.episodes.map((episode, epIdx) => (
                        <div
                          key={episode.id}
                          className="bg-white/[0.03] p-3 rounded-lg border border-white/5 relative group/ep space-y-2.5"
                        >
                          <div className="flex items-center gap-3">
                            <span className="text-xs text-gray-500 font-semibold">{epIdx + 1}</span>
                            <input
                              type="text"
                              required
                              value={episode.name}
                              onChange={(e) => handleEpisodeChange(season.id, episode.id, 'name', e.target.value)}
                              placeholder="Nombre del episodio"
                              className="bg-transparent border-b border-white/5 focus:border-red-500 text-xs font-semibold text-white outline-none flex-1 py-0.5"
                            />
                            <input
                              type="text"
                              value={episode.duration || ''}
                              onChange={(e) => handleEpisodeChange(season.id, episode.id, 'duration', e.target.value)}
                              placeholder="12 min"
                              className="bg-transparent border-b border-white/5 focus:border-red-500 text-xs text-gray-300 outline-none w-16 text-center py-0.5"
                            />
                            <button
                              type="button"
                              onClick={() => handleRemoveEpisode(season.id, episode.id)}
                              className="text-gray-500 hover:text-red-400 p-0.5 cursor-pointer"
                              title="Quitar episodio"
                            >
                              <X size={14} />
                            </button>
                          </div>

                          {/* Episode Video Link and Synopsis */}
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 pl-5">
                            <div className="space-y-1">
                              <span className="text-[9px] uppercase tracking-wider text-gray-400 block font-display">Origen del video del capítulo:</span>
                              
                              {/* 3 Quick selector icon buttons for each episode source */}
                              <div className="flex items-center gap-1 bg-[#101015] border border-white/5 p-1 rounded-lg">
                                <input
                                  type="text"
                                  required
                                  value={episode.file}
                                  onChange={(e) => handleEpisodeChange(season.id, episode.id, 'file', e.target.value)}
                                  placeholder="Link .mp4"
                                  className="bg-transparent text-[11px] text-gray-300 px-2 py-0.5 outline-none flex-1 min-w-0"
                                  title="URL directa de video"
                                />
                                
                                {/* Simulated Drive Picker button */}
                                <button
                                  type="button"
                                  onClick={() => {
                                    setActiveDrivePickerTarget({ type: 'episode', seasonId: season.id, episodeId: episode.id });
                                    setShowDrivePicker(true);
                                  }}
                                  className="p-1 hover:bg-white/10 rounded text-blue-400 hover:text-blue-300 cursor-pointer"
                                  title="Elegir de Google Drive"
                                >
                                  <Cloud size={12} />
                                </button>

                                {/* File selector button */}
                                <button
                                  type="button"
                                  onClick={() => {
                                    document.getElementById(`file-ep-${episode.id}`)?.click();
                                  }}
                                  className="p-1 hover:bg-white/10 rounded text-amber-500 hover:text-amber-400 cursor-pointer"
                                  title="Cargar de PC local"
                                >
                                  <Upload size={12} />
                                </button>
                              </div>

                              {/* Invisible input file for this episode */}
                              <input
                                id={`file-ep-${episode.id}`}
                                type="file"
                                accept="video/*"
                                className="hidden"
                                onChange={(e) => handleEpisodeLocalFileChange(season.id, episode.id, e)}
                              />

                              {/* Individual loading bar for series episode */}
                              <div className="space-y-0.5 pt-0.5">
                                <span id={`ep-text-${episode.id}`} className="text-[10px] text-gray-500 block truncate font-mono">
                                  {episode.file && episode.file.startsWith('blob:') ? '✓ Carga local lista' : 'Video por defecto cargado'}
                                </span>
                                <div className="w-full h-1 bg-white/5 rounded-full overflow-hidden">
                                  <div id={`ep-progress-${episode.id}`} className="h-full bg-red-600 rounded-full transition-all w-0" />
                                </div>
                              </div>
                            </div>

                            <div className="space-y-1">
                              <span className="text-[9px] uppercase tracking-wider text-gray-400 block font-display">Resumen del capítulo:</span>
                              <input
                                type="text"
                                value={episode.synopsis || ''}
                                onChange={(e) => handleEpisodeChange(season.id, episode.id, 'synopsis', e.target.value)}
                                placeholder="Pequeño resumen del capítulo (opcional)"
                                className="w-full bg-white/5 text-[11px] text-gray-300 rounded px-2 py-1.5 outline-none border border-white/5 focus:border-red-500"
                              />
                            </div>
                          </div>
                        </div>
                      ))}

                      {/* Add episode button inside season */}
                      <button
                        type="button"
                        onClick={() => handleAddEpisode(season.id)}
                        className="text-[11px] font-bold text-gray-400 hover:text-red-400 flex items-center gap-1 cursor-pointer pl-5 pt-1"
                      >
                        <Plus size={12} />
                        Agregar Capítulo (.mp4)
                      </button>
                    </div>

                  </div>
                ))}

                {seasons.length === 0 && (
                  <div className="text-center py-6 border border-dashed border-white/10 rounded-xl text-gray-500 text-sm">
                    No has agregado ninguna temporada. Presiona el botón de arriba.
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Personalised custom creator note */}
          <div className="space-y-1.5">
            <div className="flex items-center gap-1 text-xs font-bold uppercase text-gray-400 font-display">
              Mensaje Personalizado (Nota del Creador)
            </div>
            <input
              type="text"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Ej: Próxima temporada pronto... o ¡Remasterizado en 4K!"
              className="w-full bg-white/[0.04] border border-white/10 focus:border-red-500 rounded-xl px-4 py-2.5 text-white outline-none transition-colors"
            />
            <span className="text-[10px] text-gray-500 block">
              Se mostrará como un banner de advertencia/nota especial dentro de la ficha técnica del contenido.
            </span>
          </div>

          {/* Form Actions */}
          <div className="flex gap-3 pt-4 border-t border-white/5">
            <button
              type="submit"
              id="saveContentBtn"
              className="flex-1 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl transition-all cursor-pointer shadow-lg shadow-red-600/20"
            >
              {editItem ? 'Guardar Cambios' : 'Publicar en la Plataforma'}
            </button>
            <button
              type="button"
              onClick={onClose}
              className="px-6 py-3 bg-white/5 hover:bg-white/10 text-gray-300 font-bold rounded-xl transition-colors cursor-pointer"
            >
              Cancelar
            </button>
          </div>
        </form>
      </div>

      {/* ========================================================= */}
      {/* SIMULATOR MODAL: Interactive Google Drive File Explorer */}
      {showDrivePicker && (
        <div className="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-4">
          <div className="bg-[#12121a] border border-white/10 w-full max-w-md rounded-2xl overflow-hidden shadow-2xl p-6 relative">
            <button
              type="button"
              onClick={() => { setShowDrivePicker(false); setActiveDrivePickerTarget(null); }}
              className="absolute top-4 right-4 text-gray-400 hover:text-white cursor-pointer"
            >
              <X size={16} />
            </button>

            <div className="space-y-4">
              <div className="flex items-center gap-2 text-blue-400">
                <Cloud size={22} />
                <h3 className="font-extrabold text-base uppercase tracking-wider font-display">
                  Google Drive Explorer
                </h3>
              </div>
              <p className="text-xs text-gray-400 leading-relaxed">
                Selecciona un archivo de video compatible de tu cuenta de Google Drive autorizada:
              </p>

              {driveConnecting ? (
                <div className="py-12 flex flex-col items-center justify-center gap-3">
                  <Loader2 className="animate-spin text-blue-500" size={32} />
                  <span className="text-xs text-gray-400 font-semibold">Descargando metadatos de Google Drive...</span>
                </div>
              ) : (
                <div className="space-y-2.5 max-h-[300px] overflow-y-auto custom-scrollbar pr-1 pt-1">
                  <div className="text-[10px] text-gray-500 uppercase tracking-widest font-bold">Mi Unidad (Videos de muestra en Drive)</div>
                  
                  {/* File 1 */}
                  <div
                    onClick={() => handleSelectDriveFile(
                      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4',
                      'Drive: Tears_Of_Steel_Kepler.mp4'
                    )}
                    className="flex items-center justify-between p-3 bg-white/[0.02] hover:bg-[#1c1c28] border border-white/5 rounded-xl cursor-pointer transition-colors"
                  >
                    <div className="flex items-center gap-2.5 truncate">
                      <FileVideo size={16} className="text-red-500 shrink-0" />
                      <div className="truncate">
                        <span className="text-xs font-semibold text-white block truncate">Tears_Of_Steel_Kepler.mp4</span>
                        <span className="text-[9px] text-gray-500">12.4 MB • Google Drive</span>
                      </div>
                    </div>
                    <span className="text-[10px] px-2 py-0.5 bg-blue-600/10 text-blue-400 font-semibold rounded">Elegir</span>
                  </div>

                  {/* File 2 */}
                  <div
                    onClick={() => handleSelectDriveFile(
                      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
                      'Drive: Sintel_Animation_Full.mp4'
                    )}
                    className="flex items-center justify-between p-3 bg-white/[0.02] hover:bg-[#1c1c28] border border-white/5 rounded-xl cursor-pointer transition-colors"
                  >
                    <div className="flex items-center gap-2.5 truncate">
                      <FileVideo size={16} className="text-amber-500 shrink-0" />
                      <div className="truncate">
                        <span className="text-xs font-semibold text-white block truncate">Sintel_Animation_Full.mp4</span>
                        <span className="text-[9px] text-gray-500">22.8 MB • Google Drive</span>
                      </div>
                    </div>
                    <span className="text-[10px] px-2 py-0.5 bg-blue-600/10 text-blue-400 font-semibold rounded">Elegir</span>
                  </div>

                  {/* File 3 */}
                  <div
                    onClick={() => handleSelectDriveFile(
                      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
                      'Drive: Elephants_Dream_HD_Render.mp4'
                    )}
                    className="flex items-center justify-between p-3 bg-white/[0.02] hover:bg-[#1c1c28] border border-white/5 rounded-xl cursor-pointer transition-colors"
                  >
                    <div className="flex items-center gap-2.5 truncate">
                      <FileVideo size={16} className="text-emerald-500 shrink-0" />
                      <div className="truncate">
                        <span className="text-xs font-semibold text-white block truncate">Elephants_Dream_HD_Render.mp4</span>
                        <span className="text-[9px] text-gray-500">18.1 MB • Google Drive</span>
                      </div>
                    </div>
                    <span className="text-[10px] px-2 py-0.5 bg-blue-600/10 text-blue-400 font-semibold rounded">Elegir</span>
                  </div>

                  {/* Folder container style */}
                  <div className="flex items-center gap-2.5 p-3 bg-white/[0.01] border border-white/5 rounded-xl text-gray-500 cursor-not-allowed">
                    <Folder size={16} />
                    <div>
                      <span className="text-xs font-semibold block">Carpeta de grabaciones de cámara</span>
                      <span className="text-[9px]">Vacío</span>
                    </div>
                  </div>

                </div>
              )}

              <div className="pt-2 border-t border-white/5 flex justify-end">
                <button
                  type="button"
                  onClick={() => { setShowDrivePicker(false); setActiveDrivePickerTarget(null); }}
                  className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-300 text-xs font-bold rounded-lg transition-colors cursor-pointer"
                >
                  Cerrar
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}