import React from 'react';
import { Edit, Trash2, Link as LinkIcon, FileText, Image as ImageIcon } from 'lucide-react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent, CardFooter } from './ui/card';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from './ui/alert-dialog';

export function ListItem({ item, onEdit, onDelete }) {
  return (
    <Card className="group hover:shadow-lg transition-all duration-300 bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm border-gray-200 dark:border-gray-700">
      <CardContent className="pt-6 space-y-4">
        {/* Images Section */}
        {item.images && item.images.length > 0 && (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-4">
            {item.images.map((image, index) => (
              <div
                key={index}
                className="relative rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 hover:border-cyan-400 dark:hover:border-cyan-600 transition-all group/img"
              >
                <img
                  src={image.url}
                  alt={image.alt || `Image ${index + 1}`}
                  className="w-full h-32 object-cover"
                  onError={(e) => {
                    e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100"%3E%3Crect fill="%23ddd" width="100" height="100"/%3E%3Ctext fill="%23999" x="50%25" y="50%25" text-anchor="middle" dy=".3em"%3ENo Image%3C/text%3E%3C/svg%3E';
                  }}
                />
                {image.alt && (
                  <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs p-1 opacity-0 group-hover/img:opacity-100 transition-opacity">
                    {image.alt}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Links and Notes */}
        <ul className="space-y-3" data-tags={item.tags?.join(',')}>
          {item.anchors?.map((anchor, index) => (
            <li
              key={index}
              className="flex items-start gap-3 p-3 rounded-lg bg-gradient-to-r from-purple-50/50 to-blue-50/50 dark:from-purple-900/10 dark:to-blue-900/10 hover:from-purple-100/50 hover:to-blue-100/50 dark:hover:from-purple-900/20 dark:hover:to-blue-900/20 transition-all"
            >
              {anchor.type === 'link' ? (
                <>
                  <LinkIcon className={`h-5 w-5 mt-0.5 flex-shrink-0 ${
                    anchor.url?.startsWith('localexplorer:') 
                      ? 'text-orange-600 dark:text-orange-400' 
                      : 'text-purple-600 dark:text-purple-400'
                  }`} />
                  <div className="flex-1 min-w-0">
                    <a
                      href={anchor.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`hover:underline font-medium break-words ${
                        anchor.url?.startsWith('localexplorer:') 
                          ? 'text-orange-600 dark:text-orange-400' 
                          : 'text-blue-600 dark:text-blue-400'
                      }`}
                    >
                      {anchor.label}
                      {anchor.url?.startsWith('localexplorer:') && (
                        <span className="ml-2 text-xs bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
                          Local
                        </span>
                      )}
                    </a>
                    <p className="text-sm text-muted-foreground break-all mt-1">{anchor.url}</p>
                  </div>
                </>
              ) : (
                <>
                  <FileText className="h-5 w-5 text-cyan-600 dark:text-cyan-400 mt-0.5 flex-shrink-0" />
                  <div className="flex-1 min-w-0">
                    <p className="text-foreground whitespace-pre-wrap break-words">{anchor.note}</p>
                  </div>
                </>
              )}
            </li>
          ))}
        </ul>
      </CardContent>
      
      <CardFooter className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-4">
        <div className="flex flex-wrap gap-2">
          {item.tags?.map((tag, index) => (
            <Badge
              key={index}
              variant="secondary"
              className="bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-900/30 dark:to-blue-900/30 text-purple-900 dark:text-purple-200 border-0"
            >
              {tag}
            </Badge>
          ))}
        </div>
        
        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
          <Button
            variant="outline"
            size="icon"
            onClick={() => onEdit(item)}
            className="hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:border-blue-300 dark:hover:border-blue-700"
          >
            <Edit className="h-4 w-4" />
          </Button>
          
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                variant="outline"
                size="icon"
                className="hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-300 dark:hover:border-red-700"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                <AlertDialogDescription>
                  This action cannot be undone. This will permanently delete this item.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction onClick={() => onDelete(item.id)}>
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </CardFooter>
    </Card>
  );
}