import React, { useState, useEffect, useRef, useCallback } from 'react';
import type { ChatSession, ChatMessage, UploadedFile } from '../types';
import { ChatMessageItem } from './ChatMessageItem';
import { SuggestionButton } from './SuggestionButton';
import { SendIcon, FilmIcon, PaperclipIcon, XCircleIcon as XCircleIconFile, DocumentTextIcon, StopIcon } from './icons';
import { SUGGESTION_PROMPTS, REELBOT_IMAGE_URL } from '../constants';

const MAX_FILE_SIZE_MB = 5;
const MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024;
const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
const ALLOWED_DOC_TYPES = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
const ALLOWED_FILE_TYPES = [...ALLOWED_IMAGE_TYPES, ...ALLOWED_DOC_TYPES];


interface ChatViewProps {
  activeChatSession: ChatSession | null;
  onSendMessage: (message: string, file?: UploadedFile, isSuggestion?: boolean) => Promise<void>;
  isLoading: boolean;
  error: string | null;
  onStopGeneration: () => void;
}

export const ChatView: React.FC<ChatViewProps> = ({ activeChatSession, onSendMessage, isLoading, error, onStopGeneration }) => {
  const [userInput, setUserInput] = useState('');
  const [selectedFile, setSelectedFile] = useState<UploadedFile | null>(null);
  const [fileError, setFileError] = useState<string | null>(null);
  
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(scrollToBottom, [activeChatSession?.messages]);

  useEffect(() => {
    if (!isLoading && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isLoading, activeChatSession]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    setFileError(null);
    setSelectedFile(null);

    if (file) {
      if (file.size > MAX_FILE_SIZE_BYTES) {
        setFileError(`El archivo es demasiado grande (máx. ${MAX_FILE_SIZE_MB}MB).`);
        return;
      }
      if (!ALLOWED_FILE_TYPES.includes(file.type)) {
        setFileError('Tipo de archivo no admitido.');
        return;
      }

      const fileInfo: UploadedFile = {
        name: file.name,
        type: file.type,
        size: file.size,
      };

      if (ALLOWED_IMAGE_TYPES.includes(file.type)) {
        const reader = new FileReader();
        reader.onloadend = () => {
          fileInfo.dataUrl = reader.result as string;
          setSelectedFile(fileInfo);
        };
        reader.onerror = () => {
          setFileError('Error al leer el archivo de imagen.');
        }
        reader.readAsDataURL(file);
      } else if (ALLOWED_DOC_TYPES.includes(file.type)) {
        setSelectedFile(fileInfo);
      }
    }
    if (fileInputRef.current) {
        fileInputRef.current.value = "";
    }
  };

  const clearSelectedFile = () => {
    setSelectedFile(null);
    setFileError(null);
    if (fileInputRef.current) {
        fileInputRef.current.value = ""; 
    }
  };

  const handleSubmit = (e?: React.FormEvent) => {
    e?.preventDefault();
    if ((userInput.trim() || selectedFile) && !isLoading) {
      onSendMessage(userInput.trim(), selectedFile || undefined);
      setUserInput('');
      clearSelectedFile();
    }
  };

  const handleSuggestionClick = (promptText: string) => {
    if (!isLoading) {
      onSendMessage(promptText, undefined, true);
      setUserInput(''); 
      clearSelectedFile();
    }
  };

  const lastMessage = activeChatSession?.messages?.[activeChatSession.messages.length - 1];
  const modelIsCurrentlyStreaming = isLoading && lastMessage?.sender === 'model' && lastMessage?.isStreaming;
  const modelIsThinking = isLoading && !modelIsCurrentlyStreaming;

  let placeholderText = "Describe tu audiencia y el objetivo de tu Reel...";
  if (modelIsThinking) {
    placeholderText = "ReelBot está pensando...";
  } else if (modelIsCurrentlyStreaming) {
    placeholderText = "ReelBot está escribiendo...";
  } else if (selectedFile) {
    placeholderText = "Añade un comentario sobre el archivo...";
  }


  return (
    <div className="flex-1 flex flex-col h-full bg-slate-900 overflow-hidden"> {/* Added overflow-hidden */}
      <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4"> {/* Adjusted padding for consistency */}
        {!activeChatSession || activeChatSession.messages.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-center p-4 md:-translate-y-[30px]">
            <img 
              src={REELBOT_IMAGE_URL}
              alt="ReelBot Logo" 
              className="w-full max-w-[200px] sm:max-w-[300px] md:max-w-[400px] lg:max-w-[500px] h-auto mb-4 md:mb-6 shadow-lg object-contain"
            />
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-cyan-400 mb-2 -mt-2.5">
              Reel Creator AI
            </h2>
            <p className="text-slate-400 mb-3 text-base sm:text-lg lg:text-xl">By Jesús Cabrera</p>
            <p className="text-slate-300 mb-6 md:mb-8 max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl text-lg sm:text-xl lg:text-2xl flex items-center justify-center">
              <FilmIcon className="w-5 h-5 mr-2 flex-shrink-0" />
              Experto en crear Reels virales que convierten visualizaciones en clientes
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl">
              {SUGGESTION_PROMPTS.map((prompt) => (
                <SuggestionButton
                  key={prompt.text}
                  text={prompt.text}
                  // emoji prop removed
                  onClick={() => handleSuggestionClick(prompt.text)}
                  disabled={isLoading}
                />
              ))}
            </div>
          </div>
        ) : (
          activeChatSession.messages.map((msg) => (
            <ChatMessageItem key={msg.id} message={msg} />
          ))
        )}
        <div ref={messagesEndRef} />
        {error && <div className="text-red-400 p-2 bg-red-900/50 rounded-md text-sm">{error}</div>}
      </div>

      <div className="p-4 border-t border-slate-700 bg-slate-900"> {/* Removed sticky and z-index, handled by App.tsx structure */}
        {selectedFile && (
          <div className="mb-2 p-2 bg-slate-800 rounded-md flex items-center justify-between">
            <div className="flex items-center space-x-2 overflow-hidden">
              {selectedFile.dataUrl && ALLOWED_IMAGE_TYPES.includes(selectedFile.type) ? (
                <img src={selectedFile.dataUrl} alt="Preview" className="w-10 h-10 rounded object-cover" />
              ) : (
                <DocumentTextIcon className="w-8 h-8 text-slate-400 flex-shrink-0" />
              )}
              <span className="text-xs text-slate-300 truncate" title={selectedFile.name}>
                {selectedFile.name}
              </span>
            </div>
            <button onClick={clearSelectedFile} className="text-slate-400 hover:text-slate-200" disabled={isLoading}>
              <XCircleIconFile className="w-5 h-5" />
            </button>
          </div>
        )}
        {fileError && <p className="text-red-400 text-xs mb-2">{fileError}</p>}

        <form onSubmit={handleSubmit} className="flex items-center space-x-3">
          <input
            type="file"
            ref={fileInputRef}
            onChange={handleFileChange}
            className="hidden"
            accept={ALLOWED_FILE_TYPES.join(',')}
            disabled={isLoading}
          />
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            disabled={isLoading}
            className="p-3 bg-slate-700 hover:bg-slate-600 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg text-slate-300 hover:text-slate-100 transition-colors duration-150 focus:ring-2 focus:ring-cyan-500 focus:outline-none"
            aria-label="Attach file"
          >
            <PaperclipIcon className="w-5 h-5" />
          </button>
          <input
            ref={inputRef}
            type="text"
            value={userInput}
            onChange={(e) => setUserInput(e.target.value)}
            placeholder={placeholderText}
            className="flex-1 p-3 bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder-slate-500 focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 outline-none transition-shadow duration-150 disabled:opacity-70"
            disabled={isLoading}
          />
          {isLoading ? (
            <button
              type="button"
              onClick={onStopGeneration}
              className="p-3 bg-red-600 hover:bg-red-500 rounded-lg text-white transition-colors duration-150 focus:ring-2 focus:ring-red-400 focus:outline-none"
              aria-label="Stop generation"
            >
              <StopIcon className="w-5 h-5" />
            </button>
          ) : (
            <button
              type="submit"
              disabled={(!userInput.trim() && !selectedFile) || isLoading}
              className="p-3 bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-600 disabled:cursor-not-allowed rounded-lg text-white transition-colors duration-150 focus:ring-2 focus:ring-cyan-400 focus:outline-none"
              aria-label="Send message"
            >
              <SendIcon className="w-5 h-5" />
            </button>
          )}
        </form>
      </div>
    </div>
  );
};