/**
 * ColorLegend — always-visible member→color legend.
 *
 * UI-SPEC §ColorLegend:
 *   - One row per member: 12px color circle + display name
 *   - Shared-family row: rose swatch (#F25C7A) + "Family" label
 *   - Font: 13px label weight, --color-text-secondary
 *   - Always rendered; never interactive in Phase 2 (show/hide filter deferred, D-07)
 *   - Swatch aria-label="{name}: {hex}" (UI-SPEC §Interaction Contract: accessibility)
 *
 * Reviewer note (UI-SPEC §Post-Verification): Grid is primary focal point.
 * ColorLegend is secondary chrome — no accent colors on the legend container.
 */

const SHARED_FAMILY_COLOR = '#F25C7A';
const SHARED_FAMILY_NAME = 'Family';

export interface LegendMember {
  id: string;
  name: string;
  color: string;
}

interface ColorLegendProps {
  members?: LegendMember[];
}

export function ColorLegend({ members = [] }: ColorLegendProps) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 'var(--space-2)',
        padding: 'var(--space-3) 0',
        fontFamily: 'var(--font-family-base)',
      }}
      aria-label="Calendar color legend"
    >
      {/* Per-member rows */}
      {members.map((member) => (
        <LegendRow key={member.id} name={member.name} color={member.color} />
      ))}

      {/* Shared-family row — always last */}
      <LegendRow name={SHARED_FAMILY_NAME} color={SHARED_FAMILY_COLOR} />
    </div>
  );
}

function LegendRow({ name, color }: { name: string; color: string }) {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 'var(--space-2)',
        minHeight: '20px',
      }}
    >
      {/* 12px color circle */}
      <span
        style={{
          width: '12px',
          height: '12px',
          borderRadius: '50%',
          background: color,
          flexShrink: 0,
          display: 'inline-block',
        }}
        aria-label={`${name}: ${color}`}
        role="img"
      />
      {/* Display name */}
      <span
        style={{
          fontSize: 'var(--text-label-size)',
          fontWeight: 'var(--text-label-weight)',
          lineHeight: 'var(--text-label-line-height)',
          color: 'var(--color-text-secondary)',
        }}
      >
        {name}
      </span>
    </div>
  );
}
