import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { 
  Quote, 
  Link, 
  MessageSquare, 
  BookOpen, 
  ArrowRight, 
  Coffee,
  Home,
  Code,
  Bot,
  User,
  Computer
} from 'lucide-react';

const Sidebar = () => {
  const menuItems = [
    { icon: <Home size={20} />, text: 'Home', active: true },
    { icon: <BookOpen size={20} />, text: 'Blog' },
    { icon: <Computer size={20} />, text: 'App Projects' },
    { icon: <Bot size={20} />, text: 'AI Projects' },
    { icon: <User size={20} />, text: 'About me' }
  ];

  return (
    <div className="fixed top-0 left-0 h-full bg-slate-800 text-white w-48 md:w-64">
      <div className="p-6">
        <h1 className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 text-transparent bg-clip-text mb-8">
          Deep Tech Musings
        </h1>
        
        <nav>
          <ul className="space-y-4">
            {menuItems.map((item, index) => (
              <li key={index}>
                <a 
                  href="#" 
                  className={`
                    flex items-center gap-3 p-2 rounded-lg transition-colors
                    ${item.active 
                      ? 'bg-blue-500 text-white' 
                      : 'hover:bg-slate-700 text-slate-300 hover:text-white'
                    }
                  `}
                >
                  {item.icon}
                  <span className="text-sm md:text-base">{item.text}</span>
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>

      <div className="absolute bottom-0 left-0 right-0 p-6">
        <div className="flex items-center gap-3 text-slate-400 hover:text-slate-200 transition-colors cursor-pointer">
          <Coffee size={20} />
          <span className="text-sm">Buy me a coffee</span>
        </div>
      </div>
    </div>
  );
};

const BlogPost = () => {
  return (
    <div className="flex min-h-screen bg-slate-50">
      <Sidebar />
      
      <main className="ml-48 md:ml-64 flex-1 p-6 max-w-6xl">
        {/* Header */}
        <header className="mb-8">
          <div className="flex items-center justify-end gap-4 mb-4">
            <Link className="text-slate-600 hover:text-blue-600 transition-colors" />
            <MessageSquare className="text-slate-600 hover:text-blue-600 transition-colors" />
            <Coffee className="text-slate-600 hover:text-blue-600 transition-colors" />
          </div>
          <p className="text-slate-600 italic text-sm md:text-base">
            Where research papers meet reality, and sarcasm is always statistically significant
          </p>
        </header>

        {/* Featured Post Card */}
        <Card className="mb-8 border-l-4 border-l-blue-500 hover:shadow-lg transition-shadow bg-white">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-4">
              <h2 className="text-xl md:text-2xl font-bold text-slate-800">Walking through 11 papers - incl. NotebookLM podcast!</h2>
              <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Featured</span>
            </div>
            
            <div className="prose prose-slate max-w-none">
              <p className="text-slate-600 mb-4 text-sm md:text-base">
                Pre-text: This is going to be a looooong post reviewing around 11 research papers on the topic of "Understanding" in the context of LLMs. If you hate reading, check out this NotebookLM with all the sources to chat with and Podcast to listen to included!
              </p>

              {/* Paper Reference Card */}
              <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 mb-4 hover:border-blue-300 transition-colors">
                <div className="flex items-center gap-2 mb-2">
                  <Quote size={20} className="text-blue-500" />
                  <span className="font-semibold text-slate-800">Referenced Paper</span>
                </div>
                <p className="text-sm md:text-base text-slate-700">
                  Emergent Abilities of Large Language Models
                  <a href="#" className="text-blue-500 hover:text-blue-700 ml-2 inline-flex items-center">
                    Read More <ArrowRight size={16} className="ml-1" />
                  </a>
                </p>
              </div>

              {/* Most Interesting Takeaway Section */}
              <div className="bg-gradient-to-r from-blue-50 to-cyan-50 p-4 rounded-lg my-4 border border-blue-100">
                <h3 className="text-lg font-semibold text-slate-800 mb-2 flex items-center gap-2">
                  <BookOpen size={20} className="text-blue-500" />
                  Most Interesting Takeaway
                </h3>
                <p className="text-sm md:text-base text-slate-700">
                  The biggest bomb of all: We don't know why, when, or what. We have absolutely no idea why or when these emergent abilities kick in...
                </p>
              </div>
            </div>

            <div className="flex items-center gap-4 mt-6 pt-4 border-t border-slate-200">
              <span className="text-sm text-slate-500">Posted 3 days ago</span>
              <span className="text-sm text-slate-500">15 min read</span>
              <div className="flex items-center gap-1 text-slate-500 hover:text-blue-600 transition-colors cursor-pointer">
                <MessageSquare size={16} />
                <span className="text-sm">42 comments</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Tag Cloud */}
        <div className="flex flex-wrap gap-2 mb-8">
          <span className="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors">
            #AI
          </span>
          <span className="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors">
            #LLMs
          </span>
          <span className="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors">
            #Research
          </span>
          <span className="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-sm hover:bg-blue-100 hover:text-blue-700 cursor-pointer transition-colors">
            #DeepLearning
          </span>
        </div>
      </main>
    </div>
  );
};

export default BlogPost;