'use client';

import { useState } from 'react';
import { SocialShareButtons } from './SocialShareButtons';
import type { ShareType } from '@/types/api-types';

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  shareUrl: string;
  title: string;
  type: ShareType;
}

export function ShareModal({ isOpen, onClose, shareUrl, title, type }: ShareModalProps) {
  const [copied, setCopied] = useState(false);

  if (!isOpen) return null;

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  const typeLabel = type === 'SONG' ? 'song' : type === 'PLAYLIST' ? 'playlist' : 'album';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* Modal */}
      <div className="relative bg-zinc-900 rounded-xl p-6 w-full max-w-md mx-4 shadow-2xl">
        <button
          onClick={onClose}
          className="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors"
          aria-label="Close"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        <h2 className="text-xl font-semibold text-white mb-2">Share {typeLabel}</h2>
        <p className="text-zinc-400 text-sm mb-6 truncate">{title}</p>

        {/* Copy Link */}
        <div className="mb-6">
          <label className="text-sm text-zinc-400 mb-2 block">Share link</label>
          <div className="flex gap-2">
            <input
              type="text"
              readOnly
              value={shareUrl}
              className="flex-1 bg-zinc-800 text-zinc-300 px-3 py-2 rounded-lg text-sm truncate border border-zinc-700 focus:outline-none focus:border-purple-500"
            />
            <button
              onClick={handleCopyLink}
              className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors whitespace-nowrap"
            >
              {copied ? 'Copied!' : 'Copy'}
            </button>
          </div>
        </div>

        {/* Social Share */}
        <div>
          <label className="text-sm text-zinc-400 mb-3 block">Share on social media</label>
          <SocialShareButtons url={shareUrl} title={title} />
        </div>
      </div>
    </div>
  );
}