App.tsx

import React, { useState, useRef, useEffect } from 'react';
import { mentorService } from './services/gemini';
import { Message } from './types';
import { ICONS } from './constants';

const App: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  
  const chatEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const handleSend = async () => {
    if (!inputValue.trim() || isLoading) return;
    
    const userMsg: Message = {
      id: Date.now().toString(),
      role: 'user',
      text: inputValue,
      timestamp: Date.now(),
    };

    setMessages(prev => [...prev, userMsg]);
    setInputValue('');
    setIsLoading(true);

    try {
      const response = await mentorService.sendMessage([], userMsg.text);
      
      const modelMsg: Message = {
        id: (Date.now() + 1).toString(),
        role: 'model',
        text: response || 'Sorry brácho, vynechal mi grip.',
        timestamp: Date.now(),
      };
      setMessages(prev => [...prev, modelMsg]);
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="app-frame relative">
      {/* Tapeta uvnitř okna */}
      <div className="chat-bg-layer"></div>

      {/* Shane_Bot Logo */}
      <div className="flex justify-center mb-6 z-10">
        <h1 className="urban-logo-font text-5xl text-white tracking-tight glow-text">Shane_Bot</h1>
      </div>

      {/* Chat Area s průhlednými bublinami */}
      <div className="flex-1 overflow-hidden relative mb-4 z-10">
        <div className="w-full h-full flex flex-col chat-scroll overflow-y-auto px-1 space-y-4 pb-4">
          {messages.length === 0 && (
            <div className="flex flex-col items-center justify-center h-full opacity-40 px-6 text-center">
              <div className="w-20 h-20 border-4 border-white rounded-[32px] flex items-center justify-center mb-4">
                 <span className="urban-logo-font text-4xl text-white">S</span>
              </div>
              <p className="urban-logo-font text-xl text-white graffiti-text">Yo! Odpal to trikem!</p>
            </div>
          )}
          {messages.map((msg) => (
            <div 
              key={msg.id} 
              className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} bubble-anim`}
            >
              <div className={`p-4 rounded-[28px] max-w-[85%] text-lg shadow-2xl backdrop-blur-md ${
                msg.role === 'user' 
                ? 'bg-blue-600/90 text-white rounded-br-none border border-blue-400/30' 
                : 'bg-black/50 text-white border border-white/20 rounded-bl-none'
              }`}>
                {msg.text}
              </div>
            </div>
          ))}
          {isLoading && (
            <div className="flex justify-start bubble-anim">
              <div className="bg-black/50 backdrop-blur-sm p-3 rounded-2xl flex space-x-1 border border-white/10">
                <div className="w-2 h-2 bg-white/50 rounded-full animate-bounce"></div>
                <div className="w-2 h-2 bg-white/50 rounded-full animate-bounce [animation-delay:-0.15s]"></div>
                <div className="w-2 h-2 bg-white/50 rounded-full animate-bounce [animation-delay:-0.3s]"></div>
              </div>
            </div>
          )}
          <div ref={chatEndRef} />
        </div>
      </div>

      {/* Ovládací Panel */}
      <div className="space-y-4 z-10">
        
        {/* HORNÍ ŘADA: [Šedé ?] [Bílá lišta NAHRÁT] [Šedé ?] */}
        <div className="flex items-center gap-2">
          {/* Levé tlačítko - stejné jako pravé */}
          <button className="circle-btn w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 text-white/60">
            <ICONS.Question />
          </button>

          {/* Bílá lišta s Nahrát a Graffiti stylem */}
          <div className="flex-1 bg-white rounded-full flex items-center px-1 h-12 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] overflow-hidden">
            <button className="circle-btn w-10 h-10 bg-[#3ef03e] ml-1">
              <ICONS.Upload />
            </button>
            <input 
              type="text" 
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSend()}
              placeholder="NAHRÁT"
              className="flex-1 bg-transparent text-slate-900 graffiti-text text-xl px-3 focus:outline-none placeholder:text-slate-400 pt-1"
            />
          </div>

          {/* Pravé tlačítko */}
          <button className="circle-btn w-12 h-12 bg-white/10 backdrop-blur-md border border-white/20 text-white/60">
            <ICONS.Question />
          </button>
        </div>

        {/* DOLNÍ ŘADA (5 tlačítek) */}
        <div className="flex justify-between items-center px-1 pb-2">
          <button className="circle-btn w-14 h-14 bg-white shadow-xl">
             <ICONS.LetterT />
          </button>

          <button className="circle-btn w-14 h-14 bg-cyan-500 shadow-lg">
             <ICONS.File />
          </button>

          <button className="circle-btn w-14 h-14 bg-red-600 shadow-lg">
             <ICONS.Live />
          </button>

          <button className="circle-btn w-14 h-14 bg-purple-600 shadow-lg">
             <ICONS.Question />
          </button>

          <button className="circle-btn w-14 h-14 bg-orange-500 shadow-lg">
             <ICONS.Question />
          </button>
        </div>
      </div>
    </div>
  );
};

export default App;