import { VISIT_OUTCOME_COLORS, VISIT_OUTCOME_LABELS, type VisitOutcome } from '@/types/canvass';

const items: { key: string; label: string; color: string }[] = [
  { key: 'unvisited', label: 'Not Visited', color: '#95a5a6' },
  ...Object.entries(VISIT_OUTCOME_LABELS).map(([key, label]) => ({
    key,
    label,
    color: VISIT_OUTCOME_COLORS[key as VisitOutcome],
  })),
];

interface CanvassLegendProps {
  style?: React.CSSProperties;
}

export default function CanvassLegend({ style }: CanvassLegendProps = {}) {
  return (
    <div
      style={{
        position: 'absolute',
        top: 10,
        right: 10,
        zIndex: 1000,
        background: 'rgba(0,0,0,0.75)',
        borderRadius: 8,
        padding: '8px 10px',
        maxWidth: 180,
        ...style,
      }}
    >
      {/* Icon type indicators */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 6, paddingBottom: 4, borderBottom: '1px solid rgba(255,255,255,0.15)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <svg width={14} height={14} viewBox="0 0 24 24">
            <path d="M12 3L4 10v10a1 1 0 001 1h4v-6h6v6h4a1 1 0 001-1V10z" fill="rgba(255,255,255,0.7)" />
          </svg>
          <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 10 }}>House</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <svg width={14} height={14} viewBox="0 0 24 24">
            <rect x="4" y="3" width="16" height="18" rx="1" fill="rgba(255,255,255,0.7)" />
            <rect x="7" y="6" width="3" height="2.5" rx="0.3" fill="rgba(0,0,0,0.3)" />
            <rect x="14" y="6" width="3" height="2.5" rx="0.3" fill="rgba(0,0,0,0.3)" />
          </svg>
          <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 10 }}>Apt</span>
        </div>
      </div>

      {items.map((item) => (
        <div key={item.key} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <div
            style={{
              width: 10,
              height: 10,
              borderRadius: '50%',
              background: item.color,
              flexShrink: 0,
            }}
          />
          <span style={{ color: '#fff', fontSize: 11 }}>{item.label}</span>
        </div>
      ))}
    </div>
  );
}
