"use client";

import { MapPin, Clock, Navigation, GripVertical, Pencil } from "lucide-react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { CategoryBadge } from "@/components/BlindboxMyIdeas";
import { guessCategory, formatDuration } from "@/lib/planUtils";
import type { PlanItem } from "@/types";

interface SortablePlanItemProps {
  id: string;
  item: PlanItem;
  canEdit: boolean;
  onEdit: () => void;
}

export default function SortablePlanItem({ id, item, canEdit, onEdit }: SortablePlanItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
    useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div ref={setNodeRef} style={style} className="relative mb-5">
      <div className="absolute -left-6 top-4 flex h-[18px] w-[18px] items-center justify-center rounded-full bg-purple-600/20 ring-2 ring-background">
        <div className="h-2 w-2 rounded-full bg-purple-400" />
      </div>

      <div className="rounded-2xl bg-surface/80 p-4 ring-1 ring-border/80">
        <div className="flex items-start gap-2.5">
          {canEdit && (
            <button
              {...attributes}
              {...listeners}
              className="mt-1 shrink-0 touch-none cursor-grab text-muted/40 active:cursor-grabbing active:text-muted"
              aria-label="拖拽排序"
            >
              <GripVertical size={14} />
            </button>
          )}
          <span className="mt-0.5 min-w-[38px] text-sm font-black text-purple-400">{item.time}</span>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-1.5">
              <CategoryBadge category={guessCategory(item.activity)} />
              <p className="truncate text-sm font-bold text-heading">{item.activity}</p>
            </div>
            <div className="mt-2 flex items-center gap-1 text-[11px] text-muted">
              <MapPin size={10} className="shrink-0" />
              <span className="truncate">{item.poi}</span>
            </div>
            {item.address && (
              <p className="mt-1 truncate text-[10px] text-dim">{item.address}</p>
            )}
            <div className="mt-2.5 flex items-center gap-3">
              <span className="flex items-center gap-1 text-[10px] text-dim">
                <Clock size={9} />
                {formatDuration(item.duration)}
              </span>
              {item.lat !== 0 && item.lng !== 0 && (
                <a
                  href={`https://uri.amap.com/marker?position=${item.lng},${item.lat}&name=${encodeURIComponent(item.poi)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 text-[10px] font-medium text-purple-400/70 active:text-purple-400"
                >
                  <Navigation size={9} />
                  导航
                </a>
              )}
            </div>
            {item.reason && (
              <p className="mt-2.5 border-t border-border/30 pt-2 text-[10px] leading-relaxed text-dim italic">
                {item.reason}
              </p>
            )}
          </div>
          {canEdit && (
            <button
              onClick={onEdit}
              className="mt-0.5 shrink-0 text-muted/40 active:text-purple-400"
              aria-label="编辑"
            >
              <Pencil size={13} />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
