import React from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { ChevronDown, ExternalLink, Edit } from 'lucide-react'
import { MarkCardI, MarkLinkI, getBasePath } from '@/lib/markcard/card'

interface CardProps {
  card: MarkCardI
  canEdit: boolean
  // userId?: string
  baseUrl: string
  onEdit?: (id: string, origin: MarkCardI) => void
}

export default function MarkCard({ card, canEdit, baseUrl, onEdit }: CardProps) {
  const { id, title, shortDescription, detailedDescription, links, publicUrl } = card
  // const baseUrl = await getBasePath(userId)

  const realLinks = links.map(link => {
    if (link.url.startsWith('$')) {
      return { ...link, url: `${baseUrl}/${link.url.substring(1)}` }
    }
    return link
  })

  const getALink = (link: MarkLinkI) => {
    return (
      <a href={link.url} target={link.blank ? '_blank' : ''} rel="noopener noreferrer" className="flex items-center">
        {link.title}
        <ExternalLink className="ml-2 h-4 w-4" />
      </a>
    )
  }

  return (
    <Card className="w-full max-w-md shadow-lg hover:shadow-xl transition-shadow duration-300">
      <CardHeader>
        <CardTitle className="text-2xl font-bold">{title}</CardTitle>
        <CardDescription>{shortDescription}</CardDescription>
      </CardHeader>
      <CardContent>
        {detailedDescription && <p className="text-sm text-gray-600 mb-4">{detailedDescription}</p>}
        {publicUrl && (
          <div className="mb-4">
            <span className="text-sm font-semibold">Public URL: </span>
            <a href={`${baseUrl}/${publicUrl}`} className="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">
              {`${baseUrl}/${publicUrl}`}
            </a>
          </div>
        )}
      </CardContent>
      <CardFooter className="flex justify-between items-center">
        <div className="flex space-x-2">
          { realLinks.length > 0 && (
            <Button asChild variant="outline">
              {getALink(realLinks[0])}
            </Button>)}
          {realLinks.length > 1 && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline">
                    Open Link <ChevronDown className="ml-2 h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                  {realLinks.slice(1).map((link, index) => (
                    <DropdownMenuItem key={index} asChild>
                      {getALink(link)}
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
          )}
        </div>
        {canEdit && onEdit && (
          <Button variant="ghost" onClick={() => onEdit(id, card)}>
            <Edit className="mr-2 h-4 w-4" />
            Edit
          </Button>
        )}
      </CardFooter>
    </Card>
  )
}