@extends('template')

@section('head')
<title>New Tab Dashboard</title>
<style>
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }

    .dashboard-container {
        max-width: 1800px;
        margin: 0 auto;
        padding: 20px;
    }

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding: 15px;
        background: #2a2a2a;
        border-radius: 8px;
    }

    .dashboard-header h1 {
        font-size: 24px;
        font-weight: 500;
        margin: 0;
    }

    .settings-btn {
        padding: 8px 16px;
        background: #404040;
        border: none;
        border-radius: 5px;
        color: #e0e0e0;
        cursor: pointer;
        font-size: 14px;
    }

    .settings-btn:hover {
        background: #505050;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .widget {
        background: #2a2a2a;
        border-radius: 8px;
        padding: 20px;
        min-height: 400px;
        max-height: 600px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #404040;
    }

    .widget-header h2 {
        font-size: 18px;
        font-weight: 500;
        margin: 0;
    }

    .widget-content {
        flex: 1;
        overflow-y: auto;
    }

    .widget-content::-webkit-scrollbar {
        width: 8px;
    }

    .widget-content::-webkit-scrollbar-track {
        background: #1a1a1a;
        border-radius: 4px;
    }

    .widget-content::-webkit-scrollbar-thumb {
        background: #404040;
        border-radius: 4px;
    }

    .widget-content::-webkit-scrollbar-thumb:hover {
        background: #505050;
    }

    .feed-item {
        padding: 12px;
        margin-bottom: 10px;
        background: #333;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .feed-item:hover {
        background: #404040;
    }

    .feed-item-title {
        font-size: 14px;
        margin-bottom: 5px;
        color: #e0e0e0;
        line-height: 1.4;
    }

    .feed-item-meta {
        font-size: 12px;
        color: #999;
    }

    .loading {
        text-align: center;
        padding: 40px;
        color: #999;
    }

    .error {
        text-align: center;
        padding: 40px;
        color: #ff6b6b;
    }

    .refresh-btn {
        padding: 4px 12px;
        background: transparent;
        border: 1px solid #404040;
        border-radius: 4px;
        color: #999;
        cursor: pointer;
        font-size: 12px;
    }

    .refresh-btn:hover {
        background: #404040;
        color: #e0e0e0;
    }

    .search-container {
        display: flex;
        gap: 8px;
        margin-bottom: 15px;
    }

    .search-input {
        flex: 1;
        padding: 8px 12px;
        background: #1a1a1a;
        border: 1px solid #404040;
        border-radius: 4px;
        color: #e0e0e0;
        font-size: 14px;
    }

    .search-input:focus {
        outline: none;
        border-color: #4CAF50;
    }

    .search-btn {
        padding: 8px 16px;
        background: #4CAF50;
        border: none;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        font-size: 14px;
    }

    .search-btn:hover {
        background: #45a049;
    }

    .clear-search-btn {
        padding: 8px 12px;
        background: #404040;
        border: none;
        border-radius: 4px;
        color: #e0e0e0;
        cursor: pointer;
        font-size: 14px;
    }

    .clear-search-btn:hover {
        background: #505050;
    }

    .sort-container {
        display: flex;
        gap: 6px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .sort-btn {
        padding: 6px 12px;
        background: #333;
        border: 1px solid #404040;
        border-radius: 4px;
        color: #999;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
    }

    .sort-btn:hover {
        background: #404040;
        color: #e0e0e0;
    }

    .sort-btn.active {
        background: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: #2a2a2a;
        padding: 30px;
        border-radius: 8px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
    }

    .modal-header {
        margin-bottom: 20px;
    }

    .modal-header h2 {
        font-size: 20px;
        margin: 0;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #999;
        font-size: 14px;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        background: #1a1a1a;
        border: 1px solid #404040;
        border-radius: 4px;
        color: #e0e0e0;
        font-size: 14px;
    }

    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .form-group small {
        color: #666;
        display: block;
        margin-top: 5px;
        font-size: 12px;
    }

    .form-actions {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    .btn-primary {
        background: #4CAF50;
        color: white;
    }

    .btn-primary:hover {
        background: #45a049;
    }

    .btn-secondary {
        background: #404040;
        color: #e0e0e0;
    }

    .btn-secondary:hover {
        background: #505050;
    }

    @media (max-width: 768px) {
        .grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<div class="dashboard-container">
    <div class="dashboard-header">
        <h1>Dashboard</h1>
        <button class="settings-btn" onclick="openSettings()">Settings</button>
    </div>

    <div class="grid">
        <!-- YouTube Watch Later -->
        <div class="widget">
            <div class="widget-header">
                <h2>YouTube Watch Later</h2>
                <button class="refresh-btn" onclick="refreshYouTubeWatchLater()">↻</button>
            </div>
            <div class="widget-content" id="youtube-watch-later">
                <div class="loading">Configure your YouTube playlist ID in settings</div>
            </div>
        </div>

        <!-- YouTube Subscriptions -->
        <div class="widget">
            <div class="widget-header">
                <h2>YouTube Subscriptions</h2>
                <button class="refresh-btn" onclick="refreshYouTubeSubscriptions()">↻</button>
            </div>
            <div class="widget-content" id="youtube-subscriptions">
                <div class="loading">Loading subscriptions...</div>
            </div>
        </div>

        <!-- Hacker News -->
        <div class="widget">
            <div class="widget-header">
                <h2>Hacker News</h2>
                <button class="refresh-btn" onclick="refreshHackerNews()">↻</button>
            </div>
            <div class="search-container">
                <input
                    type="text"
                    class="search-input"
                    id="hn-search-input"
                    placeholder="Search Hacker News..."
                    onkeypress="if(event.key === 'Enter') searchHackerNews()"
                >
                <button class="search-btn" onclick="searchHackerNews()">Search</button>
                <button class="clear-search-btn" onclick="clearHNSearch()" id="hn-clear-btn" style="display: none;">Clear</button>
            </div>
            <div class="sort-container">
                <button class="sort-btn active" onclick="setHNSort('top')" data-sort="top">Top</button>
                <button class="sort-btn" onclick="setHNSort('new')" data-sort="new">New</button>
                <button class="sort-btn" onclick="setHNSort('best')" data-sort="best">Best</button>
                <button class="sort-btn" onclick="setHNSort('ask')" data-sort="ask">Ask HN</button>
                <button class="sort-btn" onclick="setHNSort('show')" data-sort="show">Show HN</button>
            </div>
            <div class="widget-content" id="hackernews-feed">
                <div class="loading">Loading Hacker News...</div>
            </div>
        </div>

        <!-- X (Twitter) Feed -->
        <div class="widget">
            <div class="widget-header">
                <h2>X Feed</h2>
                <button class="refresh-btn" onclick="refreshTwitter()">↻</button>
            </div>
            <div class="widget-content" id="twitter-feed">
                <div class="loading">Configure Twitter accounts in settings</div>
            </div>
        </div>
    </div>
</div>

<!-- Settings Modal -->
<div class="modal" id="settings-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Settings</h2>
        </div>
        <form id="settings-form">
            <div class="form-group">
                <label>YouTube Watch Later Playlist ID</label>
                <input type="text" id="youtube-playlist-id" placeholder="e.g., WL or PLxxxxxxxxx">
                <small>
                    Note: Watch Later (WL) requires OAuth. Use a public playlist ID instead.
                </small>
            </div>

            <div class="form-group">
                <label>YouTube API Key</label>
                <input type="text" id="youtube-api-key" placeholder="Your YouTube Data API v3 key">
            </div>

            <div class="form-group">
                <label>YouTube Channel IDs (comma-separated)</label>
                <textarea id="youtube-channels" placeholder="UCxxxxxx, UCyyyyyy, UCzzzzzz"></textarea>
            </div>

            <div class="form-group">
                <label>X (Twitter) Usernames (comma-separated)</label>
                <textarea id="twitter-accounts" placeholder="elonmusk, jack, naval"></textarea>
            </div>

            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeSettings()">Cancel</button>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
    </div>
</div>

<script>
    // Configuration management
    const CONFIG_KEY = 'newtab-config';

    function getConfig() {
        const config = localStorage.getItem(CONFIG_KEY);
        return config ? JSON.parse(config) : {
            youtubePlaylistId: '',
            youtubeApiKey: '',
            youtubeChannels: [],
            twitterAccounts: []
        };
    }

    function saveConfig(config) {
        localStorage.setItem(CONFIG_KEY, JSON.stringify(config));
    }

    // Settings modal
    function openSettings() {
        const config = getConfig();
        document.getElementById('youtube-playlist-id').value = config.youtubePlaylistId || '';
        document.getElementById('youtube-api-key').value = config.youtubeApiKey || '';
        document.getElementById('youtube-channels').value = config.youtubeChannels.join(', ');
        document.getElementById('twitter-accounts').value = config.twitterAccounts.join(', ');
        document.getElementById('settings-modal').classList.add('active');
    }

    function closeSettings() {
        document.getElementById('settings-modal').classList.remove('active');
    }

    document.getElementById('settings-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const config = {
            youtubePlaylistId: document.getElementById('youtube-playlist-id').value.trim(),
            youtubeApiKey: document.getElementById('youtube-api-key').value.trim(),
            youtubeChannels: document.getElementById('youtube-channels').value
                .split(',')
                .map(c => c.trim())
                .filter(c => c),
            twitterAccounts: document.getElementById('twitter-accounts').value
                .split(',')
                .map(a => a.trim())
                .filter(a => a)
        };

        saveConfig(config);
        closeSettings();
        initializeFeeds();
    });

    // Close modal when clicking outside
    document.getElementById('settings-modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeSettings();
        }
    });

    // YouTube Watch Later
    async function refreshYouTubeWatchLater() {
        const container = document.getElementById('youtube-watch-later');
        const config = getConfig();

        if (!config.youtubeApiKey || !config.youtubePlaylistId) {
            container.innerHTML = '<div class="error">Please configure YouTube API key and Playlist ID in settings</div>';
            return;
        }

        container.innerHTML = '<div class="loading">Loading...</div>';

        try {
            const response = await fetch(
                `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=20&playlistId=${config.youtubePlaylistId}&key=${config.youtubeApiKey}`
            );
            const data = await response.json();

            if (data.error) {
                throw new Error(data.error.message);
            }

            if (!data.items || data.items.length === 0) {
                container.innerHTML = '<div class="error">No videos found</div>';
                return;
            }

            container.innerHTML = data.items.map(item => `
                <div class="feed-item" onclick="window.open('https://youtube.com/watch?v=${item.snippet.resourceId.videoId}', '_blank')">
                    <div class="feed-item-title">${escapeHtml(item.snippet.title)}</div>
                    <div class="feed-item-meta">${escapeHtml(item.snippet.channelTitle)}</div>
                </div>
            `).join('');
        } catch (error) {
            container.innerHTML = `<div class="error">Error: ${escapeHtml(error.message)}</div>`;
        }
    }

    // YouTube Subscriptions
    async function refreshYouTubeSubscriptions() {
        const container = document.getElementById('youtube-subscriptions');
        const config = getConfig();

        if (!config.youtubeApiKey || config.youtubeChannels.length === 0) {
            container.innerHTML = '<div class="error">Please configure YouTube API key and channel IDs in settings</div>';
            return;
        }

        container.innerHTML = '<div class="loading">Loading...</div>';

        try {
            const videos = [];

            for (const channelId of config.youtubeChannels) {
                const response = await fetch(
                    `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${channelId}&maxResults=5&order=date&type=video&key=${config.youtubeApiKey}`
                );
                const data = await response.json();

                if (data.error) {
                    throw new Error(data.error.message);
                }

                if (data.items) {
                    videos.push(...data.items.map(item => ({
                        ...item,
                        publishedAt: new Date(item.snippet.publishedAt)
                    })));
                }
            }

            videos.sort((a, b) => b.publishedAt - a.publishedAt);

            container.innerHTML = videos.slice(0, 20).map(item => `
                <div class="feed-item" onclick="window.open('https://youtube.com/watch?v=${item.id.videoId}', '_blank')">
                    <div class="feed-item-title">${escapeHtml(item.snippet.title)}</div>
                    <div class="feed-item-meta">${escapeHtml(item.snippet.channelTitle)} • ${formatDate(item.publishedAt)}</div>
                </div>
            `).join('');
        } catch (error) {
            container.innerHTML = `<div class="error">Error: ${escapeHtml(error.message)}</div>`;
        }
    }

    // Hacker News state
    let hnCurrentSort = 'top';

    // Set HN sort mode
    function setHNSort(sortType) {
        hnCurrentSort = sortType;

        // Update button states
        document.querySelectorAll('.sort-btn').forEach(btn => {
            if (btn.dataset.sort === sortType) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });

        // Refresh feed with new sort
        const searchInput = document.getElementById('hn-search-input');
        if (searchInput.value.trim()) {
            searchHackerNews();
        } else {
            refreshHackerNews();
        }
    }

    // Hacker News
    async function refreshHackerNews() {
        const container = document.getElementById('hackernews-feed');
        container.innerHTML = '<div class="loading">Loading...</div>';

        try {
            let endpoint;
            switch(hnCurrentSort) {
                case 'new':
                    endpoint = 'https://hacker-news.firebaseio.com/v0/newstories.json';
                    break;
                case 'best':
                    endpoint = 'https://hacker-news.firebaseio.com/v0/beststories.json';
                    break;
                case 'ask':
                    endpoint = 'https://hacker-news.firebaseio.com/v0/askstories.json';
                    break;
                case 'show':
                    endpoint = 'https://hacker-news.firebaseio.com/v0/showstories.json';
                    break;
                case 'top':
                default:
                    endpoint = 'https://hacker-news.firebaseio.com/v0/topstories.json';
                    break;
            }

            const response = await fetch(endpoint);
            const storyIds = await response.json();

            const stories = await Promise.all(
                storyIds.slice(0, 30).map(async id => {
                    const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
                    return res.json();
                })
            );

            container.innerHTML = stories.map(story => `
                <div class="feed-item" onclick="window.open('${story.url || `https://news.ycombinator.com/item?id=${story.id}`}', '_blank')">
                    <div class="feed-item-title">${escapeHtml(story.title)}</div>
                    <div class="feed-item-meta">
                        ${story.score} points • ${story.descendants || 0} comments • ${escapeHtml(story.by)}
                    </div>
                </div>
            `).join('');
        } catch (error) {
            container.innerHTML = `<div class="error">Error loading Hacker News: ${escapeHtml(error.message)}</div>`;
        }
    }

    // Search Hacker News using Algolia API
    async function searchHackerNews() {
        const searchInput = document.getElementById('hn-search-input');
        const query = searchInput.value.trim();

        if (!query) {
            return;
        }

        const container = document.getElementById('hackernews-feed');
        const clearBtn = document.getElementById('hn-clear-btn');
        container.innerHTML = '<div class="loading">Searching...</div>';
        clearBtn.style.display = 'inline-block';

        try {
            // Build tags based on current sort mode
            let tags = 'story';
            if (hnCurrentSort === 'ask') {
                tags = 'ask_hn';
            } else if (hnCurrentSort === 'show') {
                tags = 'show_hn';
            }

            // Use search_by_date API for 'new' sort, otherwise use regular search
            const apiUrl = hnCurrentSort === 'new'
                ? 'https://hn.algolia.com/api/v1/search_by_date'
                : 'https://hn.algolia.com/api/v1/search';

            const response = await fetch(
                `${apiUrl}?query=${encodeURIComponent(query)}&tags=${tags}&hitsPerPage=30`
            );
            const data = await response.json();

            if (!data.hits || data.hits.length === 0) {
                container.innerHTML = '<div class="error">No results found</div>';
                return;
            }

            container.innerHTML = data.hits.map(story => {
                const url = story.url || `https://news.ycombinator.com/item?id=${story.objectID}`;
                const points = story.points || 0;
                const comments = story.num_comments || 0;
                const author = story.author || 'unknown';
                const time = story.created_at ? formatDate(new Date(story.created_at)) : '';

                return `
                    <div class="feed-item" onclick="window.open('${url}', '_blank')">
                        <div class="feed-item-title">${escapeHtml(story.title)}</div>
                        <div class="feed-item-meta">
                            ${points} points • ${comments} comments • ${escapeHtml(author)} • ${time}
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            container.innerHTML = `<div class="error">Error searching: ${escapeHtml(error.message)}</div>`;
        }
    }

    // Clear search and return to top stories
    function clearHNSearch() {
        document.getElementById('hn-search-input').value = '';
        document.getElementById('hn-clear-btn').style.display = 'none';
        refreshHackerNews();
    }

    // Twitter/X Feed
    function refreshTwitter() {
        const container = document.getElementById('twitter-feed');
        const config = getConfig();

        if (config.twitterAccounts.length === 0) {
            container.innerHTML = '<div class="error">Please configure Twitter accounts in settings</div>';
            return;
        }

        container.innerHTML = `
            <div style="padding: 10px; color: #999; font-size: 14px; margin-bottom: 10px;">
                Following: ${config.twitterAccounts.map(a => escapeHtml(a)).join(', ')}
            </div>
            <div style="color: #999; padding: 20px; text-align: center;">
                Twitter embed requires direct integration.<br><br>
                Alternative options:<br>
                1. Use <a href="https://nitter.net" target="_blank" style="color: #4CAF50;">Nitter</a> (privacy-friendly Twitter frontend)<br>
                2. Use Twitter's official embed widget (requires loading external script)<br>
                3. Build backend proxy to fetch tweets via Twitter API
            </div>
            <div style="margin-top: 15px;">
                ${config.twitterAccounts.map(account => `
                    <div class="feed-item" onclick="window.open('https://twitter.com/${escapeHtml(account)}', '_blank')">
                        <div class="feed-item-title">@${escapeHtml(account)}</div>
                        <div class="feed-item-meta">Click to view profile</div>
                    </div>
                `).join('')}
            </div>
        `;
    }

    // Utility functions
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function formatDate(date) {
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);

        if (diffMins < 60) return `${diffMins}m ago`;
        if (diffHours < 24) return `${diffHours}h ago`;
        if (diffDays < 7) return `${diffDays}d ago`;
        return date.toLocaleDateString();
    }

    // Initialize feeds on load
    function initializeFeeds() {
        refreshYouTubeWatchLater();
        refreshYouTubeSubscriptions();
        refreshHackerNews();
        refreshTwitter();
    }

    // Auto-refresh every 5 minutes
    setInterval(initializeFeeds, 300000);

    // Initialize on page load
    initializeFeeds();
</script>
@endsection