/**
 * SortableLinkItem Component
 *
 * A single draggable link item in the editor list.
 * Uses Lucide icons and style-guide compliant inline styles.
 */

'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { GripVertical, ChevronUp, ChevronDown, Pencil, Trash2, ExternalLink } from 'lucide-react';
import { LinkItem } from './LinkEditorContent';

interface SortableLinkItemProps {
  link: LinkItem;
  onEdit: () => void;
  onDelete: () => void;
  onMoveUp: () => void;
  onMoveDown: () => void;
  isFirst: boolean;
  isLast: boolean;
}

export function SortableLinkItem({
  link,
  onEdit,
  onDelete,
  onMoveUp,
  onMoveDown,
  isFirst,
  isLast,
}: SortableLinkItemProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: link.id,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <div
      ref={setNodeRef}
      style={{
        ...style,
        display: 'flex',
        alignItems: 'center',
        gap: '16px',
        padding: '16px',
        background: isDragging ? 'rgba(56, 189, 248, 0.1)' : 'rgba(15, 23, 42, 0.75)',
        border: isDragging
          ? '1px solid rgba(56, 189, 248, 0.5)'
          : '1px solid rgba(148, 163, 184, 0.15)',
        borderRadius: '12px',
        opacity: isDragging ? 0.8 : 1,
      }}
    >
      {/* Drag handle */}
      <button
        {...attributes}
        {...listeners}
        style={{
          padding: '8px',
          background: 'transparent',
          border: 'none',
          color: '#f8fafc',
          cursor: 'grab',
          borderRadius: '6px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
        aria-label="Drag to reorder"
      >
        <GripVertical size={18} />
      </button>

      {/* Up/Down buttons for keyboard accessibility */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
        <button
          onClick={onMoveUp}
          disabled={isFirst}
          style={{
            padding: '4px',
            background: 'transparent',
            border: 'none',
            color: isFirst ? 'rgba(148, 163, 184, 0.4)' : '#f8fafc',
            cursor: isFirst ? 'not-allowed' : 'pointer',
            borderRadius: '4px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          aria-label="Move up"
        >
          <ChevronUp size={14} />
        </button>
        <button
          onClick={onMoveDown}
          disabled={isLast}
          style={{
            padding: '4px',
            background: 'transparent',
            border: 'none',
            color: isLast ? 'rgba(148, 163, 184, 0.4)' : '#f8fafc',
            cursor: isLast ? 'not-allowed' : 'pointer',
            borderRadius: '4px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
          aria-label="Move down"
        >
          <ChevronDown size={14} />
        </button>
      </div>

      {/* Link info */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div
          style={{
            fontWeight: 600,
            fontSize: '15px',
            color: '#f8fafc',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          }}
        >
          {link.label}
        </div>
        <div
          style={{
            fontSize: '13px',
            color: 'rgba(148, 163, 184, 0.85)',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
            marginTop: '4px',
          }}
        >
          {link.linkType === 'page'
            ? `Page: ${link.pageTitle || link.pageSlug || 'Not set'}`
            : link.externalUrl || 'No URL set'}
        </div>
      </div>

      {/* Link type badge */}
      <span
        style={{
          padding: '4px 10px',
          fontSize: '11px',
          fontWeight: 600,
          borderRadius: '999px',
          background:
            link.linkType === 'page' ? 'rgba(168, 85, 247, 0.16)' : 'rgba(56, 189, 248, 0.16)',
          border:
            link.linkType === 'page'
              ? '1px solid rgba(168, 85, 247, 0.35)'
              : '1px solid rgba(56, 189, 248, 0.35)',
          color: link.linkType === 'page' ? '#c084fc' : '#38bdf8',
        }}
      >
        {link.linkType === 'page' ? 'Page' : 'External'}
      </span>

      {/* New tab indicator */}
      {link.openInNewTab && (
        <span
          style={{ color: 'rgba(148, 163, 184, 0.6)', display: 'flex' }}
          title="Opens in new tab"
        >
          <ExternalLink size={14} />
        </span>
      )}

      {/* Edit button */}
      <button
        onClick={onEdit}
        style={{
          padding: '10px',
          background: 'transparent',
          border: 'none',
          color: '#f8fafc',
          cursor: 'pointer',
          borderRadius: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'background 0.15s ease',
        }}
        onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(56, 189, 248, 0.15)')}
        onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
        aria-label="Edit link"
      >
        <Pencil size={16} />
      </button>

      {/* Delete button */}
      <button
        onClick={onDelete}
        style={{
          padding: '10px',
          background: 'transparent',
          border: 'none',
          color: '#f8fafc',
          cursor: 'pointer',
          borderRadius: '8px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'background 0.15s ease',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = 'rgba(248, 113, 113, 0.15)';
          e.currentTarget.style.color = '#f87171';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = 'transparent';
          e.currentTarget.style.color = '#f8fafc';
        }}
        aria-label="Delete link"
      >
        <Trash2 size={16} />
      </button>
    </div>
  );
}