import React from 'react';

export function KitchenIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="9" y="4" width="14" height="24" rx="3" fill="#FFF1E5" stroke="#F97316" strokeWidth="1.8" />
      <path d="M9 13.5H23" stroke="#F97316" strokeWidth="1.4" />
      <rect x="10.8" y="6.2" width="10.4" height="6" rx="1.3" fill="#FFFFFF" stroke="#FDBA74" strokeWidth="1" />
      <rect x="10.8" y="15.2" width="10.4" height="10.6" rx="1.4" fill="#FFF7ED" stroke="#FDBA74" strokeWidth="1" />
      <path d="M20.2 8.4V10.3" stroke="#F97316" strokeWidth="1.5" strokeLinecap="round" />
      <path d="M20.2 18.8V21.8" stroke="#F97316" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

export function BedroomIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="4" y="14" width="24" height="9" rx="3" fill="#F1EAFE" stroke="#9B72CF" strokeWidth="1.8" />
      <path d="M7 14V11.2C7 9.99 7.99 9 9.2 9H22.8C24.01 9 25 9.99 25 11.2V14" stroke="#9B72CF" strokeWidth="1.8" />
      <rect x="8" y="10" width="6" height="4" rx="1.5" fill="#FFFFFF" stroke="#9B72CF" strokeWidth="1.2" />
      <rect x="18" y="10" width="6" height="4" rx="1.5" fill="#FFFFFF" stroke="#9B72CF" strokeWidth="1.2" />
      <path d="M5 23V26" stroke="#9B72CF" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M27 23V26" stroke="#9B72CF" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

export function BathroomIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M9 9.5V8.2C9 6.99 9.99 6 11.2 6H12.2" stroke="#4AABDE" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M13.2 6H15.2" stroke="#4AABDE" strokeWidth="1.8" strokeLinecap="round" />
      <rect x="8" y="10" width="16" height="8" rx="4" fill="#E9F7FD" stroke="#4AABDE" strokeWidth="1.8" />
      <path d="M10 18V22C10 23.66 12.69 25 16 25C19.31 25 22 23.66 22 22V18" stroke="#4AABDE" strokeWidth="1.8" />
      <circle cx="21.5" cy="8" r="1" fill="#4AABDE" />
      <circle cx="23.8" cy="9.4" r="0.9" fill="#4AABDE" opacity="0.7" />
    </svg>
  );
}

export function LivingRoomIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="7" y="12" width="18" height="9" rx="4" fill="#E8F7EB" stroke="#5CB85C" strokeWidth="1.8" />
      <path d="M5 16C5 14.9 5.9 14 7 14V22H5V16Z" fill="#F4FFF6" stroke="#5CB85C" strokeWidth="1.2" />
      <path d="M27 16C27 14.9 26.1 14 25 14V22H27V16Z" fill="#F4FFF6" stroke="#5CB85C" strokeWidth="1.2" />
      <rect x="10" y="21" width="3" height="4" rx="1" fill="#E8F7EB" stroke="#5CB85C" strokeWidth="1.2" />
      <rect x="19" y="21" width="3" height="4" rx="1" fill="#E8F7EB" stroke="#5CB85C" strokeWidth="1.2" />
      <rect x="12" y="14" width="8" height="3.5" rx="1.7" fill="#FFFFFF" stroke="#5CB85C" strokeWidth="1" />
    </svg>
  );
}

export function OfficeIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="7" y="8" width="18" height="11" rx="2" fill="#FFF9E3" stroke="#D4A017" strokeWidth="1.8" />
      <rect x="9.5" y="10.5" width="13" height="6" rx="1" fill="#FFFFFF" stroke="#D4A017" strokeWidth="1.1" />
      <path d="M14.5 19V23" stroke="#D4A017" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M17.5 19V23" stroke="#D4A017" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M11.5 24H20.5" stroke="#D4A017" strokeWidth="1.8" strokeLinecap="round" />
      <rect x="6" y="23.5" width="20" height="2.5" rx="1.2" fill="#FFF3CD" stroke="#D4A017" strokeWidth="1.2" />
    </svg>
  );
}

export function GarageIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M5 13L16 6L27 13" stroke="#64748B" strokeWidth="1.8" strokeLinejoin="round" />
      <rect x="7" y="13" width="18" height="13" rx="2.5" fill="#F1F5F9" stroke="#64748B" strokeWidth="1.8" />
      <rect x="11" y="16" width="10" height="10" rx="1.5" fill="#E2E8F0" stroke="#64748B" strokeWidth="1.3" />
      <path d="M11 19H21" stroke="#94A3B8" strokeWidth="1" />
      <path d="M11 22H21" stroke="#94A3B8" strokeWidth="1" />
    </svg>
  );
}

export function LaundryIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="7" y="4" width="18" height="24" rx="3" fill="#EAF7FF" stroke="#0EA5E9" strokeWidth="1.8" />
      <circle cx="16" cy="18" r="6.5" fill="#D2EEFF" stroke="#0EA5E9" strokeWidth="1.8" />
      <path d="M12.8 18.4C13.5 16.5 15.3 15.2 17.3 15.2C18.4 15.2 19.5 15.6 20.3 16.3" stroke="#0EA5E9" strokeWidth="1.2" strokeLinecap="round" />
      <circle cx="11" cy="8" r="1.1" fill="#0EA5E9" />
      <circle cx="14.4" cy="8" r="1.1" fill="#0EA5E9" />
      <path d="M7 10.6H25" stroke="#0EA5E9" strokeWidth="1.6" />
    </svg>
  );
}

export function OtherRoomIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M6 14L16 7L26 14" stroke="#9B8A77" strokeWidth="1.8" strokeLinejoin="round" />
      <rect x="8.5" y="14" width="15" height="11" rx="2.2" fill="#F7F0E8" stroke="#9B8A77" strokeWidth="1.8" />
      <rect x="14" y="18" width="4" height="7" rx="1" fill="#EFE3D6" stroke="#9B8A77" strokeWidth="1.2" />
      <path d="M20.8 12.5V9.5" stroke="#9B8A77" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

const ROOM_ICON_MAP: Record<string, () => React.JSX.Element> = {
  kitchen: KitchenIcon,
  bedroom: BedroomIcon,
  bathroom: BathroomIcon,
  living: LivingRoomIcon,
  livingroom: LivingRoomIcon,
  living_room: LivingRoomIcon,
  office: OfficeIcon,
  garage: GarageIcon,
  laundry: LaundryIcon,
  other: OtherRoomIcon,
};

const ROOM_NAME_KEYWORDS: Array<{ keyword: string; key: string }> = [
  { keyword: 'kitchen', key: 'kitchen' },
  { keyword: 'bedroom', key: 'bedroom' },
  { keyword: 'bathroom', key: 'bathroom' },
  { keyword: 'living', key: 'living' },
  { keyword: 'office', key: 'office' },
  { keyword: 'garage', key: 'garage' },
  { keyword: 'laundry', key: 'laundry' },
];

export function getRoomIcon(roomType: string): () => React.JSX.Element {
  const lower = roomType.toLowerCase();

  if (ROOM_ICON_MAP[lower]) {
    return ROOM_ICON_MAP[lower];
  }

  for (const entry of ROOM_NAME_KEYWORDS) {
    if (lower.includes(entry.keyword)) {
      return ROOM_ICON_MAP[entry.key];
    }
  }

  return OtherRoomIcon;
}
