import React from 'react';
import { Maximize2, Heart, ListMusic, Mic2, Cast } from 'lucide-react';
import { useAudio } from '../../context/AudioContext';
import { useToast } from '../../context/ToastContext';
import { PlayerControls } from './PlayerControls';

interface MiniPlayerProps {
  onExpand: () => void;
  onToggleQueue: () => void;
  isQueueOpen: boolean;
}

export const MiniPlayer: React.FC<MiniPlayerProps> = ({
  onExpand,
  onToggleQueue,
  isQueueOpen,
}) => {
  const { currentTrack, progress, seek, duration, currentTime } = useAudio();
  const { addToast } = useToast();

  if (!currentTrack) return null;

  const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const p = Math.max(0, Math.min(100, (x / rect.width) * 100));
    seek(p);
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 h-24 bg-kodo-void/95 backdrop-blur-2xl border-t border-kodo-steel/40 z-50 px-4 md:px-6 flex items-center justify-between shadow-[0_-10px_40px_rgba(0,0,0,0.6)] animate-slideUp">
      {/* 1. Track Info */}
      <div className="flex items-center gap-4 w-[30%] min-w-[200px]">
        <div className="w-14 h-14 rounded-lg overflow-hidden relative group cursor-pointer shadow-lg border border-white/5">
          <img
            src={currentTrack.coverUrl}
            className="w-full h-full object-cover"
          />
          <div
            className="absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center"
            onClick={onExpand}
          >
            <Maximize2 className="w-6 h-6 text-white" />
          </div>
        </div>
        <div className="flex flex-col min-w-0">
          <div className="flex items-center gap-2">
            <h4
              className="text-white font-heading font-bold truncate text-sm hover:underline cursor-pointer"
              onClick={onExpand}
            >
              {currentTrack.title}
            </h4>
          </div>
          <p className="text-gray-400 text-xs truncate hover:text-white cursor-pointer">
            {currentTrack.artist}
          </p>
        </div>
        <button
          className="text-gray-500 hover:text-kodo-magenta transition-colors ml-2"
          onClick={() => addToast('Added to Liked Songs')}
        >
          <Heart className="w-5 h-5" />
        </button>
      </div>

      {/* 2. Center Controls */}
      <div className="flex flex-col items-center flex-1 max-w-2xl px-4">
        <PlayerControls layout="compact" />

        <div className="w-full flex items-center gap-3 group mt-1">
          <span className="text-[10px] font-mono text-gray-500 w-8 text-right">
            {formatTime(currentTime)}
          </span>

          {/* Progress Bar */}
          <div
            className="flex-1 h-1 bg-kodo-steel rounded-full cursor-pointer relative group/bar"
            onClick={handleSeek}
          >
            <div
              className="absolute top-0 left-0 h-full bg-white rounded-full"
              style={{ width: `${progress}%` }}
            ></div>
            <div
              className="absolute top-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full opacity-0 group-hover/bar:opacity-100 shadow-lg transition-opacity"
              style={{ left: `${progress}%` }}
            ></div>
          </div>

          <span className="text-[10px] font-mono text-gray-500 w-8">
            {formatTime(duration)}
          </span>
        </div>
      </div>

      {/* 3. Right Actions */}
      <div className="flex items-center justify-end gap-3 w-[30%] min-w-[200px]">
        <button
          className="text-gray-400 hover:text-kodo-magenta transition-colors hidden xl:block"
          title="Lyrics"
          onClick={onExpand}
        >
          <Mic2 className="w-4 h-4" />
        </button>
        <button
          className="text-gray-400 hover:text-kodo-lime transition-colors"
          title="Devices"
          onClick={() => addToast('Device Menu')}
        >
          <Cast className="w-4 h-4" />
        </button>
        <button
          className={`text-gray-400 hover:text-kodo-cyan transition-colors ${isQueueOpen ? 'text-kodo-cyan' : ''}`}
          onClick={onToggleQueue}
        >
          <ListMusic className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
};
