import React, { useState, useMemo, useRef, useEffect } from 'react';
import { Character, AspectRatio, CharacterPromptDetails, ScenePromptDetails, Scene, Style } from './types';
import Spinner from './components/Spinner';
import CharacterCard from './components/CharacterCard';
import SceneCard from './components/SceneCard';

const CHARACTER_STYLE_MAP: Record<Style, string> = {
    'Ultra Gerçekçi': "ultra-realistic full-body photograph, cinematic, dramatic lighting, hyper-detailed, sharp focus, 8K UHD",
    'Animasyon': "charming full-body 3D character render, Disney Pixar animation style, vibrant, high quality, detailed",
    'Fütüristik': "futuristic full-body character concept art, cyberpunk style, neon accents, science fiction, hyper-detailed, 8K",
    '': "full-body photograph"
};

const SCENE_STYLE_MAP: Record<Style, string> = {
    'Ultra Gerçekçi': "An ultra-realistic photograph of a movie scene. Style: cinematic, dramatic lighting, hyper-detailed, sharp focus, 8K UHD.",
    'Animasyon': "An animated movie scene. Style: vibrant animation, Disney Pixar style, 3D render, high quality, detailed.",
    'Fütüristik': "A futuristic movie scene. Style: cyberpunk, neon lights, science fiction, detailed concept art, 8K.",
    '': "A photograph of a scene."
};

interface ProjectViewProps {
  project: { id: string, name: string };
  onBack: () => void;
}

const ProjectView: React.FC<ProjectViewProps> = ({ project, onBack }) => {
  // --- REFS ---
  const characterSectionRef = useRef<HTMLDivElement>(null);
  const sceneSectionRef = useRef<HTMLDivElement>(null);
  const sceneImageInputRef = useRef<HTMLInputElement>(null);


  // --- STATE ---
  const [characterPromptDetails, setCharacterPromptDetails] = useState<CharacterPromptDetails>({ name: '', gender: '', species: '', age: '', base: '', style: 'Ultra Gerçekçi', clothing: '', hairstyle: '', accessories: '', background: '', relationships: '' });
  const [showAdvancedCharOptions, setShowAdvancedCharOptions] = useState(false);
  
  const [scenePromptDetails, setScenePromptDetails] = useState<ScenePromptDetails>({ base: '', style: 'Ultra Gerçekçi', lighting: '', atmosphere: '', cameraAngle: '' });
  const [episodeNumber, setEpisodeNumber] = useState('');
  const [sceneNumber, setSceneNumber] = useState('');
  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9');
  const [showAdvancedSceneOptions, setShowAdvancedSceneOptions] = useState(false);
  
  const [characters, setCharacters] = useState<Character[]>([]);
  const [scenes, setScenes] = useState<Scene[]>([]);

  const [selectedCharacterIds, setSelectedCharacterIds] = useState<string[]>([]);
  const [searchTerm, setSearchTerm] = useState('');

  const [isLoadingCharacter, setIsLoadingCharacter] = useState<boolean>(false);
  const [isLoadingScene, setIsLoadingScene] = useState<boolean>(false);
  
  const [pendingCharacter, setPendingCharacter] = useState<{ prompt: string; promptDetails: CharacterPromptDetails; image: string; } | null>(null);
  const [pendingScene, setPendingScene] = useState<{ prompt: string; promptDetails: ScenePromptDetails; image: string; episode: string; scene: string; aspectRatio: AspectRatio } | null>(null);
  const [viewingCharacter, setViewingCharacter] = useState<Character | null>(null);
  const [newTag, setNewTag] = useState('');
  
  const [error, setError] = useState<string | null>(null);
  
  const [sceneReferenceImage, setSceneReferenceImage] = useState<string | null>(null); // base64 data URL
  const [selectedBaseSceneId, setSelectedBaseSceneId] = useState<string | null>(null);

  // --- DATA FETCHING ---
  useEffect(() => {
    const fetchData = async () => {
      setError(null);
      try {
        const [charRes, sceneRes] = await Promise.all([
          fetch(`/api/projects/${project.id}/characters`),
          fetch(`/api/projects/${project.id}/scenes`)
        ]);
        if (!charRes.ok || !sceneRes.ok) {
          throw new Error('Proje verileri yüklenemedi.');
        }
        const charData = await charRes.json();
        const sceneData = await sceneRes.json();
        setCharacters(charData);
        setScenes(sceneData);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Veri yüklenirken bir hata oluştu.");
      }
    };
    fetchData();
  }, [project.id]);


  // --- PROMPT BUILDERS (Remains on Frontend for UI logic) ---
  const buildCharacterPrompt = (details: CharacterPromptDetails): string => {
    let prefix = '';
    if (details.name.trim()) prefix += `${details.name} isminde, `;
    if (details.age.trim()) prefix += `${details.age} yaşında, `;
    if (details.gender) prefix += `${details.gender}, `;
    if (details.species) prefix += `bir ${details.species}. `;
    
    let prompt = prefix + details.base;
    if (details.clothing?.trim()) prompt += `, clothing: ${details.clothing.trim()}`;
    if (details.hairstyle?.trim()) prompt += `, hairstyle: ${details.hairstyle.trim()}`;
    if (details.accessories?.trim()) prompt += `, accessories: ${details.accessories.trim()}`;
    if (details.background?.trim()) prompt += `, background: ${details.background.trim()}`;
    if (details.relationships?.trim()) prompt += `, relationships with other characters: ${details.relationships.trim()}`;
    
    const stylePrompt = CHARACTER_STYLE_MAP[details.style || 'Ultra Gerçekçi'];
    prompt += `. Style: ${stylePrompt}`;

    return prompt;
  };

  const buildScenePrompt = (details: ScenePromptDetails, selectedChars: Character[]): string => {
    let prompt: string;
    const stylePrefix = SCENE_STYLE_MAP[details.style || 'Ultra Gerçekçi'];

    if (selectedChars.length > 0) {
      const getCharacterContext = (char: Character): string => {
        const cleanDetails: { [key: string]: any } = {};
        Object.keys(char.promptDetails).forEach((key) => {
          const value = char.promptDetails[key as keyof CharacterPromptDetails];
          if (value && String(value).trim() !== '') {
            cleanDetails[key] = value;
          }
        });
        return JSON.stringify(cleanDetails);
      };

      const characterDescriptions = selectedChars.map(c => `A character with the following context: ${getCharacterContext(c)}`).join('. ');
      prompt = `${stylePrefix} The scene features these characters: ${characterDescriptions}. The scene's main description is: ${details.base}`;
    } else {
      prompt = `${stylePrefix} Scene description: ${details.base}`;
    }
    
    if (details.lighting?.trim()) prompt += `. Lighting: ${details.lighting.trim()}`;
    if (details.atmosphere?.trim()) prompt += `. Atmosphere: ${details.atmosphere.trim()}`;
    if (details.cameraAngle?.trim()) prompt += `. Camera angle: ${details.cameraAngle.trim()}`;
    
    return prompt;
  };

  // --- HANDLERS ---
  const handleCharacterDetailChange = (field: keyof CharacterPromptDetails, value: string) => {
    setCharacterPromptDetails(prev => ({ ...prev, [field]: value }));
  };

  const handleSceneDetailChange = (field: keyof ScenePromptDetails, value: string) => {
    setScenePromptDetails(prev => ({ ...prev, [field]: value }));
  };

  const handleCreateCharacter = async () => {
    if (!characterPromptDetails.name.trim() || !characterPromptDetails.base.trim()) {
      setError("Lütfen bir karakter ismi ve temel açıklama girin.");
      return;
    }
    setError(null);
    setIsLoadingCharacter(true);
    const fullPrompt = buildCharacterPrompt(characterPromptDetails);
    try {
      const response = await fetch('/api/generate-image', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: fullPrompt, aspectRatio: '1:1' })
      });
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || "Görsel oluşturulamadı.");
      }
      const { image } = await response.json();
      setPendingCharacter({ prompt: fullPrompt, promptDetails: characterPromptDetails, image });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Bilinmeyen bir hata oluştu.");
    } finally {
      setIsLoadingCharacter(false);
    }
  };

  const handleApproveCharacter = async () => {
    if (!pendingCharacter) return;
    const newCharacter: Character = {
      id: new Date().toISOString(),
      projectId: project.id,
      name: pendingCharacter.promptDetails.name,
      gender: pendingCharacter.promptDetails.gender,
      species: pendingCharacter.promptDetails.species,
      age: pendingCharacter.promptDetails.age,
      prompt: pendingCharacter.prompt,
      promptDetails: pendingCharacter.promptDetails,
      baseImage: pendingCharacter.image,
      tags: [],
    };

    try {
       const response = await fetch(`/api/projects/${project.id}/characters`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newCharacter)
        });
        if (!response.ok) {
            throw new Error('Karakter veritabanına kaydedilemedi.');
        }
        setCharacters(prev => [...prev, newCharacter]);
        setPendingCharacter(null);
        setCharacterPromptDetails({ name: '', gender: '', species: '', age: '', base: '', style: 'Ultra Gerçekçi', clothing: '', hairstyle: '', accessories: '', background: '', relationships: '' });
        setShowAdvancedCharOptions(false);
    } catch(err) {
        setError(err instanceof Error ? err.message : "Karakter kaydedilirken hata oluştu.");
    }
  };
  
  const handleGenerateScene = async () => {
    if (!scenePromptDetails.base.trim() || !episodeNumber.trim() || !sceneNumber.trim()) {
      setError("Lütfen bölüm, sahne numarası ve bir sahne açıklaması girin.");
      return;
    }
    setError(null);
    setIsLoadingScene(true);
    const selectedChars = characters.filter(c => selectedCharacterIds.includes(c.id));
    const fullPrompt = buildScenePrompt(scenePromptDetails, selectedChars);

    try {
      let image: string;
      if (sceneReferenceImage) {
        const [header, base64Data] = sceneReferenceImage.split(',');
        if (!base64Data) throw new Error("Geçersiz referans görsel formatı.");
        const mimeType = header.match(/:(.*?);/)?.[1] || 'image/png';
        const response = await fetch('/api/generate-image-multimodal', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt: fullPrompt, base64ImageData: base64Data, mimeType })
        });
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.message || "Görsel oluşturulamadı.");
        }
        const data = await response.json();
        image = data.image;

      } else {
        const response = await fetch('/api/generate-image', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ prompt: fullPrompt, aspectRatio: aspectRatio })
        });
        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.message || "Görsel oluşturulamadı.");
        }
        const data = await response.json();
        image = data.image;
      }
      setPendingScene({ prompt: fullPrompt, promptDetails: scenePromptDetails, image, episode: episodeNumber, scene: sceneNumber, aspectRatio });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Bilinmeyen bir hata oluştu.");
    } finally {
      setIsLoadingScene(false);
    }
  };

  const handleApproveScene = async () => {
    if (!pendingScene) return;
    const newScene: Scene = {
      id: `b${pendingScene.episode}s${pendingScene.scene}-${new Date().getTime()}`,
      projectId: project.id,
      episodeNumber: pendingScene.episode,
      sceneNumber: pendingScene.scene,
      prompt: pendingScene.prompt,
      promptDetails: pendingScene.promptDetails,
      baseImage: pendingScene.image,
      aspectRatio: pendingScene.aspectRatio,
    };
     try {
       const response = await fetch(`/api/projects/${project.id}/scenes`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newScene)
        });
        if (!response.ok) {
            throw new Error('Sahne veritabanına kaydedilemedi.');
        }
        setScenes(prev => [...prev, newScene]);
        setPendingScene(null);
        setScenePromptDetails({ base: '', style: 'Ultra Gerçekçi', lighting: '', atmosphere: '', cameraAngle: '' });
        setEpisodeNumber('');
        setSceneNumber('');
        setShowAdvancedSceneOptions(false);
        clearReferenceImage();
    } catch(err) {
        setError(err instanceof Error ? err.message : "Sahne kaydedilirken hata oluştu.");
    }
  };
  
  const handleToggleCharacterSelection = (id: string) => {
    setSelectedCharacterIds(prev =>
      prev.includes(id) ? prev.filter(charId => charId !== id) : [...prev, id]
    );
  };

  // TODO: Add Tag and Remove Tag functionality needs to be wired to the backend.
  const handleAddTag = () => { console.log("TODO: Add tag via API"); };
  const handleRemoveTag = (tagToRemove: string) => { console.log("TODO: Remove tag via API"); };

  const handleDeleteCharacter = async (idToDelete: string) => {
    if (window.confirm('Bu karakteri kalıcı olarak silmek istediğinizden emin misiniz?')) {
      try {
        const response = await fetch(`/api/characters/${idToDelete}`, { method: 'DELETE' });
        if (!response.ok) {
          throw new Error('Karakter silinemedi.');
        }
        setCharacters(prev => prev.filter(char => char.id !== idToDelete));
        setSelectedCharacterIds(prev => prev.filter(id => id !== idToDelete));
        if (viewingCharacter?.id === idToDelete) {
          setViewingCharacter(null);
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Karakter silinirken bir hata oluştu.");
      }
    }
  };

  const handleDeleteScene = async (idToDelete: string) => {
    if (window.confirm('Bu sahneyi kalıcı olarak silmek istediğinizden emin misiniz?')) {
        try {
            const response = await fetch(`/api/scenes/${idToDelete}`, { method: 'DELETE' });
            if (!response.ok) {
                throw new Error('Sahne silinemedi.');
            }
            setScenes(prev => prev.filter(scene => scene.id !== idToDelete));
            if (selectedBaseSceneId === idToDelete) {
                clearReferenceImage();
            }
        } catch (err) {
            setError(err instanceof Error ? err.message : "Sahne silinirken bir hata oluştu.");
        }
    }
  };

  const handleDownload = (base64Image: string, filename: string) => {
    const link = document.createElement('a');
    link.href = `data:image/png;base64,${base64Image}`;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleEditCharacter = (character: Character) => {
    setCharacterPromptDetails(character.promptDetails);
    characterSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const handleEditScene = (scene: Scene) => {
    setEpisodeNumber(scene.episodeNumber);
    setSceneNumber(scene.sceneNumber);
    setScenePromptDetails({...scene.promptDetails, style: scene.promptDetails.style || 'Ultra Gerçekçi' });
    setAspectRatio(scene.aspectRatio);
    setSelectedBaseSceneId(null);
    setSceneReferenceImage(null);
    sceneSectionRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  const handleSceneImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setSceneReferenceImage(reader.result as string);
        setSelectedBaseSceneId(null); // Deselect any library scene
      };
      reader.readAsDataURL(file);
    }
  };

  const handleSelectBaseScene = (scene: Scene) => {
    if (selectedBaseSceneId === scene.id) {
      // Deselect
      setSelectedBaseSceneId(null);
      setSceneReferenceImage(null);
      setScenePromptDetails({ base: '', style: 'Ultra Gerçekçi', lighting: '', atmosphere: '', cameraAngle: '' });
      if(sceneImageInputRef.current) sceneImageInputRef.current.value = "";
    } else {
      // Select
      setSelectedBaseSceneId(scene.id);
      setSceneReferenceImage(`data:image/png;base64,${scene.baseImage}`);
      setScenePromptDetails({...scene.promptDetails, style: scene.promptDetails.style || 'Ultra Gerçekçi'});
      setAspectRatio(scene.aspectRatio);
      if(sceneImageInputRef.current) sceneImageInputRef.current.value = ""; // Clear file input
    }
  };

  const clearReferenceImage = () => {
    setSceneReferenceImage(null);
    setSelectedBaseSceneId(null);
    if(sceneImageInputRef.current) sceneImageInputRef.current.value = "";
  }


  const closeModal = () => {
    setPendingCharacter(null);
    setPendingScene(null);
    setViewingCharacter(null);
    setNewTag('');
  };

  const filteredCharacters = useMemo(() => characters.filter(char => {
    if (searchTerm === '') return true;
    const lowerSearchTerm = searchTerm.toLowerCase();
    return char.name.toLowerCase().includes(lowerSearchTerm) || 
           (char.tags && char.tags.some(tag => tag.toLowerCase().includes(lowerSearchTerm)))
  }), [characters, searchTerm]);

  // --- RENDER ---
  return (
    <div className="min-h-screen bg-gray-900 text-gray-200 p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="text-center mb-10 relative">
            <button onClick={onBack} className="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                </svg>
                Projeler
            </button>
          <h1 className="text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-600">
            {project.name}
          </h1>
          <p className="mt-2 text-gray-400">Yapay zeka ile karakterler yaratın, onlara ince ayar yapın ve sahnelerde canlandırın.</p>
        </header>

        {error && (
          <div className="bg-red-900 border border-red-600 text-red-200 px-4 py-3 rounded-lg relative mb-6" role="alert">
            <strong className="font-bold">Hata: </strong>
            <span className="block sm:inline">{error}</span>
            <span className="absolute top-0 bottom-0 right-0 px-4 py-3" onClick={() => setError(null)}>
              <svg className="fill-current h-6 w-6 text-red-300" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Kapat</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
            </span>
          </div>
        )}

        <section ref={characterSectionRef} className="bg-gray-800 p-6 rounded-xl shadow-lg mb-8">
          <h2 className="text-2xl font-bold mb-4 border-b-2 border-gray-700 pb-2">1. Adım: Karakter Yarat</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-4">
            <input type="text" value={characterPromptDetails.name} onChange={(e) => handleCharacterDetailChange('name', e.target.value)} placeholder="Karakter İsmi" className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter} />
            <select value={characterPromptDetails.gender} onChange={(e) => handleCharacterDetailChange('gender', e.target.value as any)} className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter}>
              <option value="">Cinsiyet Seçin</option>
              <option value="Erkek">Erkek</option>
              <option value="Kadın">Kadın</option>
              <option value="Cinsiyetsiz">Cinsiyetsiz</option>
            </select>
            <select value={characterPromptDetails.species} onChange={(e) => handleCharacterDetailChange('species', e.target.value as any)} className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter}>
              <option value="">Tür Seçin</option>
              <option value="İnsan">İnsan</option>
              <option value="Yaratık">Yaratık</option>
              <option value="Hayvan">Hayvan</option>
            </select>
            <input type="number" value={characterPromptDetails.age} onChange={(e) => handleCharacterDetailChange('age', e.target.value)} placeholder="Yaş" className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter} />
            <select value={characterPromptDetails.style} onChange={(e) => handleCharacterDetailChange('style', e.target.value as Style)} className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter}>
                <option value="Ultra Gerçekçi">Ultra Gerçekçi</option>
                <option value="Animasyon">Animasyon</option>
                <option value="Fütüristik">Fütüristik</option>
            </select>
          </div>
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <input type="text" value={characterPromptDetails.base} onChange={(e) => handleCharacterDetailChange('base', e.target.value)} placeholder="Temel Açıklama: Mavi gözlü, kızıl saçlı, zırhlı..." className="flex-grow w-full bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingCharacter} />
            <button onClick={() => setShowAdvancedCharOptions(!showAdvancedCharOptions)} className="w-full sm:w-auto bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-md transition">Gelişmiş</button>
            <button onClick={handleCreateCharacter} disabled={isLoadingCharacter} className="w-full sm:w-auto bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-900 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-md transition duration-300 flex items-center justify-center gap-2">
              {isLoadingCharacter ? <><Spinner size="h-5 w-5" /> Yaratılıyor...</> : 'Karakter Yarat'}
            </button>
          </div>
          {showAdvancedCharOptions && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 animate-fade-in-up">
                <input type="text" value={characterPromptDetails.clothing} onChange={(e) => handleCharacterDetailChange('clothing', e.target.value)} placeholder="Kıyafet (örn: Süslü gümüş zırh)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                <input type="text" value={characterPromptDetails.hairstyle} onChange={(e) => handleCharacterDetailChange('hairstyle', e.target.value)} placeholder="Saç Stili (örn: Uzun örgülü kızıl saç)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                <input type="text" value={characterPromptDetails.accessories} onChange={(e) => handleCharacterDetailChange('accessories', e.target.value)} placeholder="Aksesuarlar (örn: Parlayan bir kılıç taşıyor)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                <input type="text" value={characterPromptDetails.background} onChange={(e) => handleCharacterDetailChange('background', e.target.value)} placeholder="Arka Plan (örn: Karanlık bir ormanda duruyor)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                <textarea
                    value={characterPromptDetails.relationships}
                    onChange={(e) => handleCharacterDetailChange('relationships', e.target.value)}
                    placeholder="Diğer Karakterlerle İlişkisi (örn: X karakterinin abisi, Y karakterinin düşmanı)"
                    className="sm:col-span-2 bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition"
                    rows={2}
                />
            </div>
          )}
        </section>

        <section className="mb-8">
            <div className="flex justify-between items-center mb-4">
                <div className="flex items-center gap-4">
                    <h2 className="text-2xl font-bold">Karakter Kütüphanesi</h2>
                    <button
                        onClick={() => setSelectedCharacterIds([])}
                        className={`text-sm px-3 py-1 rounded-full transition ${
                            selectedCharacterIds.length === 0 
                                ? 'bg-indigo-600 text-white font-semibold' 
                                : 'bg-gray-700 hover:bg-gray-600 text-gray-300'
                        }`}
                    >
                        Karaktersiz Sahne
                    </button>
                </div>
                <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} placeholder="İsim veya etikete göre ara..." className="w-1/3 bg-gray-800 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
            </div>
            
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
              {filteredCharacters.map(char => (
                  <CharacterCard key={char.id} character={char} isSelected={selectedCharacterIds.includes(char.id)} onSelect={handleToggleCharacterSelection} onViewDetails={setViewingCharacter} onEdit={handleEditCharacter} onDownload={handleDownload} onDelete={handleDeleteCharacter} />
              ))}
            </div>
             {characters.length === 0 && (
                <div className="text-center py-10 bg-gray-800 rounded-xl mt-4">
                  <p className="text-gray-400">Bu projede henüz hiç karakter yaratmadınız.</p>
                </div>
            )}
        </section>

        <section className="mb-8">
            <h2 className="text-2xl font-bold mb-4">Sahne Kütüphanesi</h2>
             {scenes.length > 0 ? (
                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
                  {scenes.map(scene => (
                      <SceneCard key={scene.id} scene={scene} isSelected={selectedBaseSceneId === scene.id} onSelect={handleSelectBaseScene} onEdit={handleEditScene} onDownload={handleDownload} onDelete={handleDeleteScene}/>
                  ))}
                </div>
            ) : (
                <div className="text-center py-10 bg-gray-800 rounded-xl">
                  <p className="text-gray-400">Bu projede henüz hiç sahne yaratmadınız.</p>
                </div>
            )}
        </section>

        <section ref={sceneSectionRef} className="bg-gray-800 p-6 rounded-xl shadow-lg sticky bottom-4">
          <h2 className="text-2xl font-bold mb-4 border-b-2 border-gray-700 pb-2">2. Adım: Sahne Oluştur</h2>
            {selectedCharacterIds.length > 0 && (
              <div className="mb-4 p-3 bg-gray-700/50 rounded-lg">
                <span className="font-bold text-gray-400">Seçili Karakterler: </span>
                <span className="text-indigo-300 font-medium">
                  {characters
                    .filter(c => selectedCharacterIds.includes(c.id))
                    .map(c => c.name)
                    .join(', ')}
                </span>
              </div>
            )}
            <div className="flex flex-col gap-4">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <input type="number" value={episodeNumber} onChange={(e) => setEpisodeNumber(e.target.value)} placeholder="Bölüm Numarası" className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingScene} />
                   <input type="number" value={sceneNumber} onChange={(e) => setSceneNumber(e.target.value)} placeholder="Sahne Numarası" className="bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingScene} />
                </div>
                <div className="flex gap-4">
                    {sceneReferenceImage && (
                        <div className="relative w-32 h-20 flex-shrink-0">
                            <img src={sceneReferenceImage} alt="Referans" className="w-full h-full object-cover rounded-md" />
                            <button onClick={clearReferenceImage} className="absolute -top-2 -right-2 bg-red-600 hover:bg-red-700 text-white rounded-full h-6 w-6 flex items-center justify-center text-xs font-bold">&times;</button>
                        </div>
                    )}
                    <textarea value={scenePromptDetails.base} onChange={(e) => handleSceneDetailChange('base', e.target.value)} placeholder="Bir sahne yazın (örn: kalede ejderhayla savaşıyorlar)" className="w-full bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" rows={2} disabled={isLoadingScene} />
                </div>
                {showAdvancedSceneOptions && (
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 animate-fade-in-up">
                        <input type="text" value={scenePromptDetails.lighting} onChange={(e) => handleSceneDetailChange('lighting', e.target.value)} placeholder="Işıklandırma (örn: Dramatik ay ışığı)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                        <input type="text" value={scenePromptDetails.atmosphere} onChange={(e) => handleSceneDetailChange('atmosphere', e.target.value)} placeholder="Atmosfer (örn: Ürkütücü ve sisli)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                        <input type="text" value={scenePromptDetails.cameraAngle} onChange={(e) => handleSceneDetailChange('cameraAngle', e.target.value)} placeholder="Kamera Açısı (örn: Alçak açı çekim)" className="bg-gray-700 text-white rounded-md px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                    </div>
                )}
                <div className="flex flex-col sm:flex-row gap-4 items-center">
                    <button onClick={() => setShowAdvancedSceneOptions(!showAdvancedSceneOptions)} className="w-full sm:w-auto bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-md transition">Gelişmiş</button>
                    <label className="w-full sm:w-auto flex-shrink-0 cursor-pointer bg-gray-600 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-md transition">
                        Referans Yükle
                        <input type="file" accept="image/*" onChange={handleSceneImageUpload} ref={sceneImageInputRef} className="hidden" />
                    </label>
                    <select value={scenePromptDetails.style} onChange={(e) => handleSceneDetailChange('style', e.target.value as Style)} className="w-full sm:w-auto bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" disabled={isLoadingScene}>
                        <option value="Ultra Gerçekçi">Ultra Gerçekçi</option>
                        <option value="Animasyon">Animasyon</option>
                        <option value="Fütüristik">Fütüristik</option>
                    </select>
                    <select value={aspectRatio} onChange={(e) => setAspectRatio(e.target.value as AspectRatio)} className="w-full sm:w-auto bg-gray-700 text-white rounded-md px-4 py-3 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition disabled:bg-gray-600 disabled:text-gray-400" disabled={isLoadingScene || !!sceneReferenceImage}>
                        <option value="16:9">Yatay (16:9)</option> <option value="9:16">Dikey (9:16)</option> <option value="1:1">Kare (1:1)</option> <option value="4:3">Manzara (4:3)</option> <option value="3:4">Portre (3:4)</option>
                    </select>
                    <button onClick={handleGenerateScene} disabled={isLoadingScene} className="flex-grow w-full bg-purple-600 hover:bg-purple-700 disabled:bg-purple-900 disabled:cursor-not-allowed text-white font-bold py-3 px-6 rounded-md transition duration-300 flex items-center justify-center gap-2">
                    {isLoadingScene ? <><Spinner size="h-5 w-5" /> Oluşturuluyor...</> : 'Sahne Oluştur'}
                    </button>
                </div>
                 <p className="text-xs text-gray-400 -mt-2">Referans görsel yüklendiğinde en-boy oranı referans görselden alınır. Referans için kütüphaneden sahne de seçebilirsiniz.</p>
            </div>
        </section>
      </div>

      {(pendingCharacter || pendingScene || viewingCharacter) && (
        <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
          <div className="bg-gray-800 rounded-xl shadow-2xl p-6 max-w-2xl w-full text-center relative animate-fade-in-up max-h-[90vh] overflow-y-auto">
            <button onClick={closeModal} className="absolute top-4 right-4 text-gray-400 hover:text-white transition">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
            
            {pendingCharacter && ( <>
                <h3 className="text-2xl font-bold mb-4">Oluşturulan Karakter</h3>
                <img src={`data:image/png;base64,${pendingCharacter.image}`} alt="Yeni Karakter" className="rounded-lg mx-auto mb-6 max-h-[60vh] object-contain" />
                <div className="flex justify-center gap-4">
                  <button onClick={handleApproveCharacter} className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-md transition">Onayla ve Ekle</button>
                  <button onClick={() => setPendingCharacter(null)} className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-md transition">Reddet</button>
                </div>
            </> )}

            {pendingScene && ( <>
                <h3 className="text-2xl font-bold mb-4">Oluşturulan Sahne</h3>
                <p className="text-gray-400 mb-4 -mt-2">Bölüm {pendingScene.episode}, Sahne {pendingScene.scene}</p>
                <img src={`data:image/png;base64,${pendingScene.image}`} alt="Yeni Sahne" className="rounded-lg mx-auto mb-6 max-h-[60vh] object-contain" />
                 <div className="flex justify-center gap-4">
                  <button onClick={handleApproveScene} className="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-md transition">Onayla ve Kütüphaneye Ekle</button>
                  <button onClick={() => setPendingScene(null)} className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-md transition">Reddet</button>
                </div>
            </> )}
            
            {viewingCharacter && ( <>
                <h3 className="text-2xl font-bold mb-4">{viewingCharacter.name}</h3>
                <img src={`data:image/png;base64,${viewingCharacter.baseImage}`} alt={viewingCharacter.name} className="rounded-lg mx-auto mb-6 max-h-[50vh] object-contain" />
                <div className="text-left space-y-3 bg-gray-900 p-4 rounded-md">
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-x-4 gap-y-2 mb-2">
                      <p><strong className="text-indigo-400">Cinsiyet:</strong> {viewingCharacter.gender || 'Belirtilmemiş'}</p>
                      <p><strong className="text-indigo-400">Tür:</strong> {viewingCharacter.species || 'Belirtilmemiş'}</p>
                      <p><strong className="text-indigo-400">Yaş:</strong> {viewingCharacter.age || 'Belirtilmemiş'}</p>
                    </div>
                    <p><strong className="text-indigo-400">Oluşturulma:</strong> {new Date(viewingCharacter.id).toLocaleString()}</p>
                    <p><strong className="text-indigo-400">Tam Prompt:</strong> <span className="text-gray-300">{viewingCharacter.prompt}</span></p>
                    {viewingCharacter.promptDetails.relationships && (
                        <p><strong className="text-indigo-400">İlişkiler:</strong> <span className="text-gray-300">{viewingCharacter.promptDetails.relationships}</span></p>
                    )}
                    <div>
                        <strong className="text-indigo-400">Etiketler:</strong>
                        <div className="flex flex-wrap gap-2 mt-2">
                            {viewingCharacter.tags.map(tag => (
                                <span key={tag} className="flex items-center bg-indigo-600 text-white text-xs font-medium px-2.5 py-1 rounded-full">
                                    {tag}
                                    <button onClick={() => handleRemoveTag(tag)} className="ml-2 text-indigo-200 hover:text-white"> &times; </button>
                                </span>
                            ))}
                            {viewingCharacter.tags.length === 0 && <span className="text-gray-400">Henüz etiket eklenmemiş.</span>}
                        </div>
                        <div className="flex gap-2 mt-3">
                            <input value={newTag} onChange={e => setNewTag(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAddTag()} placeholder="Yeni etiket ekle" className="flex-grow bg-gray-700 text-white rounded-md px-3 py-1.5 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition" />
                            <button onClick={handleAddTag} className="bg-green-600 hover:bg-green-700 text-white font-bold py-1.5 px-4 rounded-md transition">Ekle</button>
                        </div>
                    </div>
                </div>
                <button onClick={closeModal} className="mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-8 rounded-md transition">Kapat</button>
            </> )}
          </div>
        </div>
      )}
    </div>
  );
};

export default ProjectView;