from flask import Flask, render_template_string, jsonify
import requests
from bs4 import BeautifulSoup

app = Flask(__name__)

# Function to scrape YouTube trending page
def scrape_youtube_trending():
    url = "https://www.youtube.com/feed/trending"
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')
    
    videos = []
    
    for video in soup.select('div.yt-lockup-content'):
        title = video.select_one('a.yt-uix-tile-link').text
        link = 'https://www.youtube.com' + video.select_one('a.yt-uix-tile-link')['href']
        channel = video.select_one('a.yt-uix-sessionlink').text
        views = video.select_one('ul.yt-lockup-meta-info').text.split('\n')[1]
        
        videos.append({
            'title': title,
            'link': link,
            'channel': channel,
            'views': views
        })
    
    return videos

@app.route('/')
def index():
    videos = scrape_youtube_trending()
    return render_template_string(template, videos=videos)

template = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Front-End</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #FF0000;
            color: white;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .search-bar {
            display: flex;
        }
        .search-bar input {
            padding: 5px;
            font-size: 16px;
        }
        .search-bar button {
            padding: 5px 10px;
            font-size: 16px;
            background-color: white;
            color: #FF0000;
            border: none;
            cursor: pointer;
        }
        .main-content {
            display: flex;
        }
        .sidebar {
            width: 200px;
            background-color: #f1f1f1;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }
        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }
        .sidebar li {
            padding: 10px;
            cursor: pointer;
        }
        .sidebar li:hover {
            background-color: #ddd;
        }
        .video-grid {
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            flex-grow: 1;
        }
        .video-card {
            width: 300px;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .thumbnail img {
            width: 100%;
        }
        .details {
            padding: 10px;
        }
        .details h3 {
            margin: 0;
            font-size: 18px;
        }
        .details p {
            margin: 5px 0;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">MyTube</div>
        <div class="search-bar">
            <input type="text" placeholder="Search">
            <button>Search</button>
        </div>
    </div>
    <div class="main-content">
        <div class="sidebar">
            <ul>
                <li>Home</li>
                <li>Trending</li>
                <li>Subscriptions</li>
                <li>Library</li>
                <li>History</li>
            </ul>
        </div>
        <div class="video-grid">
            {% for video in videos %}
            <div class="video-card">
                <div class="thumbnail">
                    <a href="{{ video.link }}" target="_blank">
                        <img src="https://img.youtube.com/vi/{{ video.link.split('v=')[1] }}/0.jpg" alt="Thumbnail">
                    </a>
                </div>
                <div class="details">
                    <h3>{{ video.title }}</h3>
                    <p>{{ video.channel }}</p>
                    <p>{{ video.views }} views</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    <script>
        document.querySelector('.search-bar button').addEventListener('click', function() {
            const query = document.querySelector('.search-bar input').value;
            alert('Search for: ' + query);
        });
    </script>
</body>
</html>
"""

if __name__ == '__main__':
    app.run(debug=True)