'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

// Current app version from package.json
const APP_VERSION = '2026.01.24';

// Changelog data - add new versions at the top
const CHANGELOG = [
  {
    version: '2026.01.24',
    title: 'January 2026 Update',
    changes: [
      'Improved SortableQueueItem component with enhanced click handling and styling',
      'Added keyboard shortcuts and queue management features',
      'Added ListeningStreakCard component for tracking listening streaks',
      'Moved service worker registration to dedicated component for improved client-side handling',
      'Enhanced offline download manager with client-side checks',
      'Enhanced OfflineManagement component with improved card styling and layout',
      'Implemented Auto-Tagging Settings and MusicBrainz integration',
      'Enhanced audio settings with ReplayGain, crossfade, and equalizer presets',
      'Added AudioSettingsDialog component',
      'Updated cover art retrieval to use higher resolution images',
      'Enhanced UI with Framer Motion animations for album artwork and artist icons',
      'Added page transition animations and notification settings for audio playback',
      'Implemented offline library synchronization with IndexedDB',
      'Implemented offline library management with IndexedDB support',
      'Updated all npm subdependencies to latest minor versions',
    ],
    fixes: [
      'Updated README formatting and improved content clarity',
    ],
    breaking: [
      'Removed PostHog analytics tracking',
      'Removed caching system (replaced with offline library management)',
    ]
  },
  {
    version: '2025.07.31',
    title: 'July End of Month Update',
    changes: [
      'Native support for moblie devices (using pwa)', 
    ],
    fixes: [
      'Fixed issue with mobile navigation bar not displaying correctly',
      'Improved performance on mobile devices',
      'Resolved layout issues on smaller screens',
      'Fixed audio player controls not responding on mobile',
      'Improved touch interactions for better usability',
      'Fixed issue with album artwork not loading on mobile',
      'Resolved bug with search functionality on mobile devices',
      'Improved caching for faster load times on mobile',
    ],
    breaking: [
    ]
  },
  {
    version: '2025.07.10',
    title: 'July Major Update',
    changes: [
      // New Features
      'Support for Rich PWA Installs',
      'Added right-click shortcuts to the PWA icon',
      'Onboarding now suggests Navidrome\'s Demo Server',
      'User can export settings as a downloadable JSON',
      'New sidebar layout (compact design)',
      'New masonry-style grid in the settings page',
      'New options in settings to customize appearance',
      'Added 5 recently played albums and playlists created',
      'New loading screen',
      'New recommended songs section',
      'Enhanced playlist page',
      'Enhanced Home page layout and content',
      'Themes updated to use OKLCH (from HSL)',
      'All themes updated (light themes look similar)',
      'Skeleton loading added across all pages'
    ],
    fixes: [
      'Fixed skeleton loader on the Home screen',
      'Fixed album page not showing correct album art',
      'Fixed album page not showing correct artist',
      'Fixed album page not showing correct song count',
      'Fixed flash of onboarding when already onboarded',
      'Fixed issue with audio player not resuming playback after pause',
      'Resolved bug with search results not displaying correctly'
    ],
    breaking: [
      // Technically not breaking, but notable:
      'Removed extended sidebar layout for a cleaner look'
    ]
  },
  {
    version: '2025.07.02',
    title: 'July Mini Update',
    changes: [
      'New Favorites inside of the Home Page',
      'Server Status Indicator removed for better performance',
      'New Album Artwork component for consistency (along with the artists)'
    ],
    breaking: [],
    fixes: []
  },
  {
    version: '2025.07.01',
    title: 'July New Month Update',
    changes: [
      'Integrated standalone Last.fm scrobbling support',
      'Added collapsible sidebar with icon-only mode',
      'Improved search and browsing experience',
      'Added history tracking for played songs',
      'New Library Artist Page',
      'Enhanced audio player with better controls',
      'Added settings page for customization options',
      'Introduced Whats New popup for version updates',
      'Improved UI consistency with new Badge component',
      'New Favorites page with album, song, and artist sections',
      'New Favortites inside of the Home Page',
      'Server Status Indicator removed for better performance',
    ],
    breaking: [],
    fixes: [
      'Fixed issue with audio player not resuming playback after pause',
      'Resolved bug with search results not displaying correctly',
      'Improved performance for large libraries',
      'Fixed layout issues on smaller screens',
      'Resolved scrobbling issues with Last.fm integration'
    ]
  },
  // Example previous version
  {
    version: '2025.06.15',
    title: 'June Final Update',
    changes: [
      'Added dark mode toggle',
      'Improved playlist management',
    ],
    breaking: [],
    fixes: [
      'Fixed login bug',
    ]
  }
];

type TabType = 'latest' | 'archive';

export function WhatsNewPopup() {
  const [isOpen, setIsOpen] = useState(false);
  const [tab, setTab] = useState<TabType>('latest');
  const [selectedArchive, setSelectedArchive] = useState(CHANGELOG[1]?.version || '');

  useEffect(() => {
    const hasCompletedOnboarding = localStorage.getItem('onboarding-completed');
    if (!hasCompletedOnboarding) return;
    const lastShownVersion = localStorage.getItem('whats-new-last-shown');
    if (lastShownVersion !== APP_VERSION) {
      setIsOpen(true);
    }
  }, []);

  const handleClose = () => {
    localStorage.setItem('whats-new-last-shown', APP_VERSION);
    setIsOpen(false);
  };

  const currentVersionChangelog = CHANGELOG.find(entry => entry.version === APP_VERSION);
  const archiveChangelogs = CHANGELOG.filter(entry => entry.version !== APP_VERSION);

  // For archive, show selected version
  const archiveChangelog = archiveChangelogs.find(entry => entry.version === selectedArchive) || archiveChangelogs[0];

  if (!currentVersionChangelog) {
    return null;
  }

  const renderChangelog = (changelog: typeof CHANGELOG[0]) => (
    <div className="space-y-6">
      {changelog.title && (
        <div>
          <h3 className="text-lg font-semibold mb-2">{changelog.title}</h3>
        </div>
      )}

      {changelog.changes.length > 0 && (
        <div>
          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
            ✨ New Features & Improvements
          </h4>
          <ul className="space-y-2">
            {changelog.changes.map((change, index) => (
              <li key={index} className="flex items-start gap-2">
                <span className="text-green-500 mt-1">•</span>
                <span className="text-sm">{change}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {changelog.fixes.length > 0 && (
        <div>
          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
            🐛 Bug Fixes
          </h4>
          <ul className="space-y-2">
            {changelog.fixes.map((fix, index) => (
              <li key={index} className="flex items-start gap-2">
                <span className="text-blue-500 mt-1">•</span>
                <span className="text-sm">{fix}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {changelog.breaking.length > 0 && (
        <div>
          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
            ⚠️ Breaking Changes
          </h4>
          <ul className="space-y-2">
            {changelog.breaking.map((breaking, index) => (
              <li key={index} className="flex items-start gap-2">
                <span className="text-red-500 mt-1">•</span>
                <span className="text-sm">{breaking}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );

  return (
    <>
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          {/* Backdrop */}
          <div 
            className="fixed inset-0 bg-black/50" 
            onClick={handleClose}
          />
          
          {/* Dialog content */}
          <div className="relative bg-background rounded-lg shadow-lg max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
            {/* Header */}
            <div className="flex flex-row items-center justify-between space-y-0 p-6 pb-4 shrink-0">
              <div>
                <h2 className="text-2xl font-bold flex items-center gap-2">
                  What&apos;s New in Mice
                  <Badge variant="outline">
                    {tab === 'latest' ? currentVersionChangelog.version : archiveChangelog?.version}
                  </Badge>
                </h2>
              </div>
              <button
                onClick={handleClose}
                className="text-muted-foreground hover:text-foreground transition-colors"
              >
                ✕
              </button>
            </div>

            {/* Tabs */}
            <div className="flex gap-2 px-6 pt-4 shrink-0">
              <Button
                variant={tab === 'latest' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setTab('latest')}
              >
                Latest
              </Button>
              <Button
                variant={tab === 'archive' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setTab('archive')}
                disabled={archiveChangelogs.length === 0}
              >
                Archive
              </Button>
              {tab === 'archive' && archiveChangelogs.length > 0 && (
                <select
                  className="ml-2 border rounded px-2 py-1 text-sm bg-background"
                  value={selectedArchive}
                  onChange={e => setSelectedArchive(e.target.value)}
                >
                  {archiveChangelogs.map(entry => (
                    <option key={entry.version} value={entry.version}>
                      {entry.version}
                    </option>
                  ))}
                </select>
              )}
            </div>
            
            {/* Scrollable content */}
            <div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
              <div className="space-y-6">
                {tab === 'latest'
                  ? renderChangelog(currentVersionChangelog)
                  : archiveChangelog && renderChangelog(archiveChangelog)}
              </div>
            </div>

            {/* Footer button */}
            <div className="flex justify-center p-6 pt-4 shrink-0">
              <Button onClick={handleClose}>
                Got it!
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}