// Property card — consumes API Property Object

function PropertyCard({ property, onRoomClick }) {
  const {
    name, skcs, areaName, rent, commonfee,
    accessText, access, image, activeRoomCount, rooms = [],
  } = property;
  const [expanded, setExpanded] = React.useState(false);
  const [imgFailed, setImgFailed] = React.useState(false);

  const activeRooms = rooms.filter(r => r.status !== 'expired');
  const visibleRooms = expanded ? activeRooms : activeRooms.slice(0, 2);
  const thumbUrl = resolveImg(image);

  const seedIdx = React.useMemo(
    () => (name || '').split('').reduce((a, c) => a + c.charCodeAt(0), 0),
    [name]
  );

  return (
    <div style={cardStyles.card}>
      {/* Header: image + name */}
      <div style={cardStyles.header}>
        <div style={cardStyles.thumb}>
          {thumbUrl && !imgFailed ? (
            <img
              src={thumbUrl}
              alt={name}
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              onError={() => setImgFailed(true)}
            />
          ) : (
            <BuildingPlaceholder seed={seedIdx} width={88} height={88}/>
          )}
        </div>
        <div style={cardStyles.titleCol}>
          <div style={cardStyles.wardRow}>
            <Icon.Location size={11} color="#8A7F72"/>
            <span>{skcs || areaName}</span>
          </div>
          <div style={cardStyles.name}>{name}</div>
          {accessText && (
            <div style={cardStyles.access}>
              <Icon.Train size={10} color="#A89B82"/>
              <span style={cardStyles.accessText}>{accessText.split('\n')[0]}</span>
            </div>
          )}
        </div>
      </div>

      {/* Rent summary */}
      <div style={cardStyles.rentBlock}>
        <div style={cardStyles.rentCol}>
          <div style={cardStyles.rentLabel}>租金（含管理费）</div>
          <div style={cardStyles.rentMain}>{rent || '—'}</div>
          {commonfee && <div style={cardStyles.rentSub}>管理费 {commonfee}</div>}
        </div>
        <div style={cardStyles.unitCount}>
          <span style={cardStyles.unitDot}/>
          空房 <b style={{ color: '#1A1A1A', fontWeight: 600 }}>{activeRoomCount ?? activeRooms.length}</b> 套
        </div>
      </div>

      {/* Rooms list — each row is a tappable entry */}
      <div style={cardStyles.rooms}>
        {visibleRooms.map((r, i) => (
          <button
            key={r.roomKey || r.id || i}
            onClick={() => onRoomClick && onRoomClick(property, r)}
            style={{ ...cardStyles.roomRow, border: 'none', width: '100%' }}
          >
            <div style={cardStyles.roomLeft}>
              <div style={cardStyles.roomUnit}>{r.name}</div>
              <div style={cardStyles.roomMeta}>
                {r.type && <span>{r.type}</span>}
                {r.type && r.floorspace && <span style={cardStyles.metaDot}/>}
                {r.floorspace && <span>{r.floorspace}</span>}
                {r.floorspace && r.floor && <span style={cardStyles.metaDot}/>}
                {r.floor && <span>{r.floor}</span>}
              </div>
            </div>
            <div style={cardStyles.roomRight}>
              <div style={cardStyles.roomPrice}>{r.rent}</div>
              {r.commonfee && <div style={cardStyles.roomSub}>{r.commonfee}</div>}
            </div>
            <div style={cardStyles.roomChev}>
              <Icon.Chevron size={12} dir="right" color="#B0A695"/>
            </div>
          </button>
        ))}

        {activeRooms.length > 2 && (
          <button style={cardStyles.moreBtn} onClick={() => setExpanded(!expanded)}>
            {expanded ? '收起' : `查看其余 ${activeRooms.length - 2} 套`}
            <Icon.Chevron size={12} dir={expanded ? 'up' : 'down'} color="#6B6258"/>
          </button>
        )}
      </div>
    </div>
  );
}

const cardStyles = {
  card: {
    background: '#FFFFFF', borderRadius: 16, padding: '14px 14px 8px',
    marginBottom: 12, border: '1px solid #EDE6D9',
    boxShadow: '0 1px 2px rgba(60, 50, 30, 0.03)',
  },
  header: { display: 'flex', gap: 12, marginBottom: 12 },
  thumb: {
    width: 88, height: 88, borderRadius: 10, overflow: 'hidden', flexShrink: 0,
    border: '1px solid #EDE6D9', background: '#F4EFE4',
  },
  titleCol: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 },
  wardRow: {
    display: 'flex', alignItems: 'center', gap: 4,
    fontSize: 11, color: '#8A7F72', fontWeight: 500, letterSpacing: '0.02em',
  },
  name: {
    fontSize: 15, fontWeight: 600, color: '#1A1A1A', lineHeight: 1.35,
    letterSpacing: '0.005em', overflow: 'hidden',
    display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
  },
  access: {
    display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 2,
    fontSize: 10, color: '#A89B82',
  },
  accessText: {
    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
    display: 'inline-block', maxWidth: '100%',
  },
  rentBlock: {
    background: '#FAF6EE', borderRadius: 10, padding: '10px 12px',
    marginBottom: 10, display: 'flex', alignItems: 'center',
    justifyContent: 'space-between', gap: 12,
  },
  rentCol: { flex: 1, minWidth: 0 },
  rentLabel: { fontSize: 10, color: '#8A7F72', fontWeight: 500, letterSpacing: '0.04em' },
  rentMain: {
    fontSize: 16, fontWeight: 700, color: '#C6572B',
    fontFamily: '"Inter", "Noto Sans JP", sans-serif', letterSpacing: '-0.01em',
    marginTop: 2,
  },
  rentSub: { fontSize: 10, color: '#8A7F72', fontWeight: 500, marginTop: 1 },
  unitCount: {
    display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: '#6B6258',
    background: '#FFFFFF', padding: '5px 10px', borderRadius: 999,
    border: '1px solid #EDE6D9', flexShrink: 0,
  },
  unitDot: {
    width: 6, height: 6, borderRadius: 3, background: '#4D8B5E',
    boxShadow: '0 0 0 3px rgba(77,139,94,0.15)',
  },
  rooms: { borderTop: '1px dashed #EDE6D9', paddingTop: 2 },
  roomRow: {
    width: '100%', display: 'flex', alignItems: 'center',
    gap: 10, padding: '12px 4px', borderBottom: '1px dashed #F4EFE4',
    background: 'transparent', fontFamily: 'inherit', cursor: 'pointer',
    textAlign: 'left', textDecoration: 'none', color: 'inherit',
    transition: 'background 150ms ease', boxSizing: 'border-box',
  },
  roomLeft: { display: 'flex', flexDirection: 'column', gap: 3, flex: 1, minWidth: 0 },
  roomUnit: { fontSize: 13, color: '#1A1A1A', fontWeight: 500 },
  roomMeta: {
    display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: '#8A7F72',
    flexWrap: 'wrap',
  },
  metaDot: { width: 3, height: 3, borderRadius: 1.5, background: '#C4BBAA' },
  roomRight: { textAlign: 'right', flexShrink: 0 },
  roomPrice: {
    fontSize: 13, fontWeight: 600, color: '#1A1A1A',
    fontFamily: '"Inter", "Noto Sans JP", sans-serif',
  },
  roomSub: { fontSize: 10, color: '#8A7F72', marginTop: 1 },
  roomChev: {
    width: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  },
  moreBtn: {
    width: '100%', padding: '10px', background: 'transparent', border: 'none',
    fontSize: 12, color: '#6B6258', fontWeight: 500, cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
    fontFamily: 'inherit',
  },
};

Object.assign(window, { PropertyCard });