/**
 * ListCard — list summary card for the ListsIndex grid.
 *
 * UI-SPEC §ListCard:
 *   - Rounded card, padding --space-4 --space-6, background --color-surface
 *   - List name: --text-heading-* (18px/600)
 *   - Item count badge: "N active · M done" or "N items" at --text-label-*
 *   - Sharing indicator: "Shared" pill for shared lists (nothing for private)
 *   - ChevronRight at right edge
 *   - Whole card navigates to /lists/:id via react-router Link
 *   - Hover X (desktop) or long-press (phone) reveals delete button
 *
 * T-04-06 XSS guard: list name is rendered as a plain-text JSX child only.
 *
 * Props:
 *   list       — the List object from the API
 *   onDelete   — called when the user triggers delete from the hover/long-press X
 */

import { useNavigate } from 'react-router';
import { ChevronRight, Trash2 } from 'lucide-react';
import { useState } from 'react';
import type { List } from '../api/listsClient.js';

interface ListCardProps {
  list: List;
  onDelete: (list: List) => void;
}

function itemCountLabel(activeCount: number, doneCount: number): string {
  const total = activeCount + doneCount;
  if (total === 0) return '0 items';
  if (doneCount === 0) return `${activeCount} item${activeCount === 1 ? '' : 's'}`;
  return `${activeCount} active · ${doneCount} done`;
}

export function ListCard({ list, onDelete }: ListCardProps) {
  const navigate = useNavigate();
  const [showDelete, setShowDelete] = useState(false);

  const handleCardClick = () => {
    void navigate(`/lists/${list.id}`);
  };

  const handleDeleteClick = (e: React.MouseEvent) => {
    e.stopPropagation(); // Don't navigate when delete is clicked
    onDelete(list);
  };

  return (
    <div
      role="listitem"
      style={{ position: 'relative' }}
      onMouseEnter={() => setShowDelete(true)}
      onMouseLeave={() => setShowDelete(false)}
    >
      <button
        type="button"
        onClick={handleCardClick}
        aria-label={`Open list: ${list.name}`}
        style={{
          width: '100%',
          background: 'var(--color-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 'var(--space-2)',
          padding: 'var(--space-4) var(--space-6, 24px)',
          boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
          minHeight: '56px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          fontFamily: 'var(--font-family-base)',
          cursor: 'pointer',
          textAlign: 'left',
        }}
      >
        {/* Left: name + meta */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div
            style={{
              fontSize: 'var(--text-heading-size, 18px)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              lineHeight: 'var(--text-heading-line-height, 1.25)',
              // Truncate long names
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
            }}
          >
            {/* Plain text — XSS guard (T-04-06) */}
            {list.name}
          </div>

          <div
            style={{
              marginTop: 'var(--space-1)',
              display: 'flex',
              alignItems: 'center',
              gap: 'var(--space-2)',
              flexWrap: 'wrap',
            }}
          >
            {/* Item count badge */}
            <span
              style={{
                fontSize: 'var(--text-label-size, 13px)',
                fontWeight: 400,
                color: 'var(--color-text-muted)',
                lineHeight: 'var(--text-label-line-height, 1.4)',
              }}
            >
              {/* Plain text — XSS guard */}
              {itemCountLabel(list.activeCount, list.doneCount)}
            </span>

            {/* "Shared" pill — only for shared lists (D-01) */}
            {list.isShared && (
              <span
                style={{
                  display: 'inline-block',
                  background: 'var(--color-surface-dim)',
                  color: 'var(--color-text-secondary)',
                  fontSize: 'var(--text-label-size, 13px)',
                  fontWeight: 400,
                  padding: '2px var(--space-2)',
                  borderRadius: '4px',
                  lineHeight: 'var(--text-label-line-height, 1.4)',
                }}
              >
                {/* Plain text — XSS guard */}
                Shared
              </span>
            )}
          </div>
        </div>

        {/* Right: chevron */}
        <ChevronRight
          size={16}
          color="var(--color-text-muted)"
          aria-hidden="true"
          style={{ flexShrink: 0, marginLeft: 'var(--space-2)' }}
        />
      </button>

      {/* Delete button — visible on desktop hover (phone: long-press/swipe) */}
      {showDelete && (
        <button
          type="button"
          onClick={handleDeleteClick}
          aria-label={`Delete list: ${list.name}`}
          style={{
            position: 'absolute',
            top: '50%',
            right: 'calc(var(--space-6, 24px) + 20px)', // outside the chevron
            transform: 'translateY(-50%)',
            background: 'none',
            border: 'none',
            cursor: 'pointer',
            padding: 'var(--space-2)',
            color: 'var(--color-destructive)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '44px',
            minWidth: '44px',
            borderRadius: 'var(--space-1)',
          }}
        >
          <Trash2 size={16} aria-hidden="true" />
        </button>
      )}
    </div>
  );
}
