import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Users, Heart, Share2, DollarSign, MessageSquare, Send, Radio, Settings, Maximize2 } from 'lucide-react';
import { LiveStream } from '../../types';
import { useToast } from '../../context/ToastContext';

const featuredStream: LiveStream = {
   id: '1',
   title: 'Late Night DnB Production 🎧 | Feedback Session',
   streamer: 'Neuro_Glitch',
   viewers: 1240,
   thumbnailUrl: 'https://picsum.photos/id/140/800/450',
   tags: ['Production', 'Ableton', 'DnB'],
   isLive: true,
   category: 'Production'
};

const chatMessages = [
   { user: 'BassHead99', text: 'That Reese bass is filthy! 🤮🔥', color: 'text-kodo-cyan' },
   { user: 'Studio_Rat', text: 'What VST is that?', color: 'text-gray-400' },
   { user: 'Neuro_Glitch', text: 'It\'s Phase Plant, just initializing now.', color: 'text-kodo-gold font-bold' },
   { user: 'VocalChops', text: 'Sent a $5 dono! Check my track?', color: 'text-kodo-lime' },
];

export const LiveView: React.FC = () => {
   const { addToast } = useToast();
   const [msgInput, setMsgInput] = useState('');

   const handleSend = () => {
      if (!msgInput) return;
      addToast("Message sent to chat", "success");
      setMsgInput('');
   };

   return (
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-[calc(100vh-120px)] animate-fadeIn">

         {/* Main Stream Area */}
         <div className="lg:col-span-9 flex flex-col gap-4">
            <div className="relative aspect-video bg-black rounded-xl overflow-hidden shadow-2xl border border-kodo-steel group">
               {/* Mock Video Feed */}
               <img src={featuredStream.thumbnailUrl} className="w-full h-full object-cover opacity-80" />
               <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>

               {/* Live Indicator */}
               <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-kodo-red text-white px-2 py-1 text-xs font-bold rounded flex items-center gap-1 animate-pulse">
                     <Radio className="w-3 h-3" /> LIVE
                  </span>
                  <span className="bg-black/50 backdrop-blur text-white px-2 py-1 text-xs font-mono rounded flex items-center gap-1">
                     <Users className="w-3 h-3" /> {featuredStream.viewers}
                  </span>
               </div>

               {/* Stream Controls Overlay */}
               <div className="absolute bottom-0 left-0 right-0 p-4 flex justify-between items-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="flex gap-4">
                     <Button variant="ghost" size="sm" className="text-white hover:bg-white/10" onClick={() => addToast("Chat hidden")}><MessageSquare className="w-5 h-5" /></Button>
                     <Button variant="ghost" size="sm" className="text-white hover:bg-white/10" onClick={() => addToast("Stream Settings")}><Settings className="w-5 h-5" /></Button>
                  </div>
                  <div className="flex gap-4">
                     <Button variant="ghost" size="sm" className="text-white hover:bg-white/10" onClick={() => addToast("Entering Fullscreen")}><Maximize2 className="w-5 h-5" /></Button>
                  </div>
               </div>
            </div>

            {/* Stream Info */}
            <div className="flex justify-between items-start">
               <div className="flex gap-4">
                  <div className="w-12 h-12 rounded-full bg-gradient-neon p-0.5">
                     <img src="https://picsum.photos/100/100" className="w-full h-full rounded-full object-cover border-2 border-kodo-void" />
                  </div>
                  <div>
                     <h1 className="text-2xl font-bold text-white">{featuredStream.title}</h1>
                     <p className="text-kodo-cyan font-medium cursor-pointer hover:underline" onClick={() => addToast("Opening Streamer Profile")}>{featuredStream.streamer}</p>
                     <div className="flex gap-2 mt-2">
                        {featuredStream.tags.map(tag => (
                           <Badge key={tag} label={tag} variant="terminal" />
                        ))}
                     </div>
                  </div>
               </div>
               <div className="flex gap-3">
                  <Button variant="secondary" icon={<Heart className="w-4 h-4" />} onClick={() => addToast("Followed Streamer", "success")}>FOLLOW</Button>
                  <Button variant="primary" icon={<DollarSign className="w-4 h-4" />} onClick={() => addToast("Donation modal opening...", "info")}>DONATE</Button>
                  <Button variant="ghost" icon={<Share2 className="w-4 h-4" />} onClick={() => addToast("Stream link copied!")}>SHARE</Button>
               </div>
            </div>

            {/* Suggested Streams */}
            <div className="mt-4">
               <h3 className="font-bold text-gray-400 mb-4 uppercase text-sm tracking-wider">Recommended Channels</h3>
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  {[1, 2, 3].map(i => (
                     <Card key={i} variant="default" className="p-0 overflow-hidden group cursor-pointer" onClick={() => addToast("Switching stream...")}>
                        <div className="aspect-video relative">
                           <img src={`https://picsum.photos/300/200?random=${i}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                           <div className="absolute bottom-2 left-2 bg-kodo-void/80 px-2 py-0.5 rounded text-[10px] text-white">DJ Set</div>
                        </div>
                        <div className="p-3 flex gap-2">
                           <div className="w-8 h-8 rounded-full bg-gray-700"></div>
                           <div>
                              <div className="font-bold text-sm text-white truncate">Techno Bunker 24/7</div>
                              <div className="text-xs text-gray-500">Underground_Radio</div>
                           </div>
                        </div>
                     </Card>
                  ))}
               </div>
            </div>
         </div>

         {/* Live Chat */}
         <Card variant="gaming" className="lg:col-span-3 flex flex-col p-0 overflow-hidden h-full max-h-[calc(100vh-120px)]">
            <div className="p-3 border-b border-kodo-steel/50 flex justify-between items-center bg-kodo-ink">
               <span className="font-mono text-sm font-bold text-white">STREAM CHAT</span>
               <div className="w-2 h-2 bg-kodo-lime rounded-full animate-pulse"></div>
            </div>

            <div className="flex-1 overflow-y-auto p-4 space-y-3 font-mono text-sm">
               {chatMessages.map((msg, i) => (
                  <div key={i} className="break-words">
                     <span className={`font-bold ${msg.color} mr-2 cursor-pointer hover:underline`}>{msg.user}:</span>
                     <span className="text-gray-300">{msg.text}</span>
                  </div>
               ))}
               <div className="text-center py-2">
                  <span className="text-[10px] text-gray-500 bg-kodo-slate px-2 py-1 rounded-full">Welcome to the chat room!</span>
               </div>
            </div>

            <div className="p-3 bg-kodo-slate border-t border-kodo-steel">
               <div className="flex gap-2">
                  <div className="relative flex-1">
                     <input
                        value={msgInput}
                        onChange={(e) => setMsgInput(e.target.value)}
                        onKeyDown={(e) => e.key === 'Enter' && handleSend()}
                        className="w-full bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-white focus:border-kodo-cyan outline-none"
                        placeholder="Say something..."
                     />
                     <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-gold cursor-pointer hover:scale-110 transition-transform" />
                  </div>
                  <Button variant="primary" size="sm" className="px-3" onClick={handleSend}><Send className="w-4 h-4" /></Button>
               </div>
               <div className="flex justify-between mt-2 px-1">
                  <span className="text-[10px] text-gray-500">Balance: 420 $VEZA</span>
                  <span className="text-[10px] text-kodo-cyan cursor-pointer" onClick={() => addToast("Opening Wallet...")}>Get Coins</span>
               </div>
            </div>
         </Card>

      </div>
   );
};