import { useState } from 'react';
import { TrackShare } from '../services/trackShareService';
import { Button } from '@/components/ui/button';
import { Copy, Check, ExternalLink } from 'lucide-react';
import { useToast } from '@/hooks/useToast';
import { cn } from '@/lib/utils';

/**
 * ShareLinkDisplay Component
 * T0310: Composant pour afficher le lien de partage avec bouton copier et statistiques
 */

interface ShareLinkDisplayProps {
  share: TrackShare;
  className?: string;
}

export function ShareLinkDisplay({ share, className }: ShareLinkDisplayProps) {
  const [copied, setCopied] = useState(false);
  const { toast } = useToast();

  const shareUrl = `${window.location.origin}/tracks/shared/${share.share_token}`;

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      toast.success('Lien copié dans le presse-papiers');
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      toast.error('Impossible de copier le lien');
    }
  };

  const handleOpenLink = () => {
    window.open(shareUrl, '_blank');
  };

  const formatDate = (dateString?: string) => {
    if (!dateString) return 'Jamais';
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  return (
    <div className={cn('space-y-4', className)}>
      {/* Share Link */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Lien de partage</label>
        <div className="flex gap-2">
          <div className="flex-1 p-2 border rounded-md bg-muted text-sm break-all">
            {shareUrl}
          </div>
          <Button
            variant="outline"
            size="icon"
            onClick={handleCopy}
            title="Copier le lien"
          >
            {copied ? (
              <Check className="h-4 w-4 text-green-600" />
            ) : (
              <Copy className="h-4 w-4" />
            )}
          </Button>
          <Button
            variant="outline"
            size="icon"
            onClick={handleOpenLink}
            title="Ouvrir le lien"
          >
            <ExternalLink className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Permissions */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Permissions</label>
        <div className="flex gap-4 text-sm">
          {share.permissions.includes('read') && (
            <span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 rounded">
              Lecture
            </span>
          )}
          {share.permissions.includes('download') && (
            <span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 rounded">
              Téléchargement
            </span>
          )}
        </div>
      </div>

      {/* Expiration */}
      {share.expires_at && (
        <div className="space-y-2">
          <label className="text-sm font-medium">Expire le</label>
          <p className="text-sm text-muted-foreground">
            {formatDate(share.expires_at)}
          </p>
        </div>
      )}

      {/* Statistics */}
      <div className="space-y-2">
        <label className="text-sm font-medium">Statistiques</label>
        <div className="text-sm text-muted-foreground">
          <p>Nombre d'accès: {share.access_count}</p>
          <p>Créé le: {formatDate(share.created_at)}</p>
        </div>
      </div>
    </div>
  );
}

