"use client"

import { useState } from "react"
import { X, Copy, Check, MessageCircle, Send, Twitter, Facebook, Link2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import Image from "next/image"

interface ShareModalProps {
  isOpen?: boolean
  onClose?: () => void
  open?: boolean
  onOpenChange?: (open: boolean) => void
  // Support both item object and direct props
  item?: {
    type: "track" | "album" | "playlist" | "artist"
    title: string
    subtitle?: string
    image: string
  }
  title?: string
  artist?: string
  type?: "track" | "album" | "playlist" | "artist"
}

export function ShareModal({ isOpen, onClose, open, onOpenChange, item, title, artist, type }: ShareModalProps) {
  const [copied, setCopied] = useState(false)

  const isVisible = open ?? isOpen ?? false
  const handleClose = () => {
    onClose?.()
    onOpenChange?.(false)
  }

  // Support both item object and direct props
  const itemData = item || {
    type: type || "track",
    title: title || "",
    subtitle: artist,
    image: "/placeholder.svg",
  }

  if (!isVisible) return null

  const shareUrl = `https://music.app/${itemData.type}/${encodeURIComponent(itemData.title)}`

  const handleCopyLink = () => {
    navigator.clipboard.writeText(shareUrl)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  const shareOptions = [
    { icon: MessageCircle, label: "Messages", color: "bg-green-500" },
    { icon: Send, label: "WhatsApp", color: "bg-green-600" },
    { icon: Twitter, label: "Twitter", color: "bg-sky-500" },
    { icon: Facebook, label: "Facebook", color: "bg-blue-600" },
  ]

  return (
    <div
      className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm"
      onClick={handleClose}
    >
      <div className="w-full max-w-md rounded-t-3xl bg-background p-6 pb-8" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-foreground">Partager</h2>
          <button onClick={handleClose} className="text-muted-foreground hover:text-foreground">
            <X className="h-6 w-6" />
          </button>
        </div>

        {/* Item info */}
        <div className="mb-6 flex items-center gap-4">
          <div className="relative h-16 w-16 overflow-hidden rounded-lg bg-secondary">
            <Image src={itemData.image || "/placeholder.svg"} alt={itemData.title} fill className="object-cover" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="truncate font-semibold text-foreground">{itemData.title}</p>
            {itemData.subtitle && <p className="truncate text-sm text-muted-foreground">{itemData.subtitle}</p>}
            <p className="text-xs capitalize text-primary">{itemData.type}</p>
          </div>
        </div>

        {/* Share options */}
        <div className="mb-6 grid grid-cols-4 gap-4">
          {shareOptions.map((option) => (
            <button key={option.label} className="flex flex-col items-center gap-2">
              <div className={`flex h-12 w-12 items-center justify-center rounded-full ${option.color}`}>
                <option.icon className="h-6 w-6 text-white" />
              </div>
              <span className="text-xs text-muted-foreground">{option.label}</span>
            </button>
          ))}
        </div>

        {/* Copy link */}
        <div className="flex items-center gap-2 rounded-lg bg-secondary/50 p-3">
          <Link2 className="h-5 w-5 text-muted-foreground" />
          <span className="flex-1 truncate text-sm text-muted-foreground">{shareUrl}</span>
          <Button size="sm" variant="ghost" onClick={handleCopyLink}>
            {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
          </Button>
        </div>
      </div>
    </div>
  )
}
