// ECR Property Summary — Fullscreen detail view

function FullscreenDetail({ property, isFav, onToggleFav, onClose, onPrev, onNext }) {
  const [photoIdx, setPhotoIdx] = React.useState(0);
  React.useEffect(() => { setPhotoIdx(0); }, [property.id]);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev && onPrev();
      if (e.key === 'ArrowRight') onNext && onNext();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose, onPrev, onNext]);

  const photoLabels = ['Exterior', 'Lobby', 'Floor Plate', 'Amenities', 'Site'];
  const sfDisplay = property.type === 'Land'
    ? `${(property.sf / 43560).toFixed(1)} acres`
    : `${property.sf.toLocaleString()} SF`;

  return (
    <div style={{
      position: 'fixed', inset: 0, background: ECR.cream80, zIndex: 1000,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Top bar */}
      <div style={{ background: ECR.charcoal, height: 60, display: 'flex', alignItems: 'center', padding: '0 24px', gap: 20, flexShrink: 0 }}>
        <button onClick={onClose} style={{
          fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
          background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,0.25)',
          padding: '9px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <ArrowIcon size={11} dir="left" color="#fff" />
          Back to Map
        </button>
        <div style={{ width: 1, height: 24, background: 'rgba(255,255,255,0.15)' }}></div>
        <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 9, letterSpacing: '0.26em', textTransform: 'uppercase', color: ECR.grayMid }}>
          ECR · Property Detail · {property.id}
        </div>
        <div style={{ flex: 1 }}></div>
        <button onClick={onPrev} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', padding: '9px 14px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          <ArrowIcon size={10} dir="left" color="#fff" /> Prev
        </button>
        <button onClick={onNext} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', padding: '9px 14px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
          Next <ArrowIcon size={10} dir="right" color="#fff" />
        </button>
        <button onClick={onToggleFav} style={{
          background: isFav ? ECR.red : 'transparent', border: `1px solid ${isFav ? ECR.red : 'rgba(255,255,255,0.25)'}`,
          color: '#fff', padding: '9px 14px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
        }}>
          <HeartIcon size={11} filled={isFav} color="#fff" />
          {isFav ? 'Shortlisted' : 'Add to Shortlist'}
        </button>
      </div>

      {/* Content */}
      <div style={{ flex: 1, overflow: 'auto' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 48px 80px' }}>

          {/* Hero block */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32, marginBottom: 36 }}>
            {/* Big photo */}
            <div>
              <div style={{ position: 'relative', height: 480, background: ECR.charcoal10, overflow: 'hidden' }}>
                <PhotoCanvas property={property} variant={photoIdx} large={true} />
                <div style={{ position: 'absolute', top: 20, left: 20, display: 'flex', gap: 0 }}>
                  <span style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', background: TYPE_COLORS[property.type], color: '#fff', padding: '9px 14px' }}>{property.type}</span>
                  <span style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', background: ECR.red, color: '#fff', padding: '9px 14px' }}>{property.status}</span>
                </div>
                <button onClick={() => setPhotoIdx((photoIdx - 1 + photoLabels.length) % photoLabels.length)} style={{ position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)', width: 44, height: 64, background: 'rgba(63,68,67,0.65)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ArrowIcon size={16} dir="left" color="#fff" />
                </button>
                <button onClick={() => setPhotoIdx((photoIdx + 1) % photoLabels.length)} style={{ position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)', width: 44, height: 64, background: 'rgba(63,68,67,0.65)', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <ArrowIcon size={16} dir="right" color="#fff" />
                </button>
                <div style={{ position: 'absolute', bottom: 20, right: 20, background: 'rgba(255,255,255,0.95)', padding: '8px 14px', fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: ECR.charcoal }}>
                  {photoIdx + 1} / {photoLabels.length} · {photoLabels[photoIdx]}
                </div>
              </div>
              {/* Thumbs */}
              <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
                {photoLabels.map((label, i) => (
                  <div key={i} onClick={() => setPhotoIdx(i)} style={{
                    flex: 1, height: 72, cursor: 'pointer',
                    outline: photoIdx === i ? `2px solid ${ECR.red}` : `1px solid ${ECR.grayLight}`,
                    outlineOffset: photoIdx === i ? -2 : -1,
                    opacity: photoIdx === i ? 1 : 0.7, transition: 'opacity 150ms',
                  }}>
                    <PhotoCanvas property={property} variant={i} />
                  </div>
                ))}
              </div>
            </div>

            {/* Title + key facts */}
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: ECR.red, marginBottom: 10 }}>
                {property.submarket}
              </div>
              <h1 style={{ fontFamily: 'MADECanvas', fontWeight: 900, fontSize: 42, letterSpacing: '0.05em', textTransform: 'uppercase', color: ECR.charcoal, lineHeight: 1.05, margin: 0, marginBottom: 14 }}>
                {property.name}
              </h1>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 400, fontSize: 13, color: ECR.charcoal70, letterSpacing: '0.06em', lineHeight: 1.6, marginBottom: 28 }}>
                {property.address}<br />{property.city}
              </div>

              {/* Big stats */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0, background: ECR.white, border: `1px solid ${ECR.grayLight}` }}>
                {[
                  { label: property.type === 'Land' ? 'Acreage' : 'Total Size', value: sfDisplay },
                  { label: property.status === 'For Sale' ? 'Asking Price' : 'Asking Rate', value: property.rate },
                  { label: 'Available', value: property.available },
                  { label: 'Floor / Suite', value: property.floorSuite },
                  { label: 'Parking Ratio', value: property.parking },
                ].map((s, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 18px', borderBottom: i < 4 ? `1px solid ${ECR.charcoal10}` : 'none' }}>
                    <span style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 9, letterSpacing: '0.24em', textTransform: 'uppercase', color: ECR.grayMid }}>{s.label}</span>
                    <span style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em', color: ECR.charcoal, textAlign: 'right' }}>{s.value}</span>
                  </div>
                ))}
              </div>

              <button style={{
                marginTop: 18, padding: '18px 22px', background: ECR.red, color: '#fff', border: 'none', cursor: 'pointer',
                fontFamily: 'Montserrat', fontWeight: 700, fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <span>Request a Tour</span>
                <ArrowIcon size={14} dir="right" color="#fff" />
              </button>
              <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                <button style={{ flex: 1, padding: '12px', background: 'transparent', color: ECR.charcoal, border: `1px solid ${ECR.grayLight}`, cursor: 'pointer', fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
                  Brochure
                </button>
                <button style={{ flex: 1, padding: '12px', background: 'transparent', color: ECR.charcoal, border: `1px solid ${ECR.grayLight}`, cursor: 'pointer', fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
                  Floor Plans
                </button>
                <button style={{ flex: 1, padding: '12px', background: 'transparent', color: ECR.charcoal, border: `1px solid ${ECR.grayLight}`, cursor: 'pointer', fontFamily: 'Montserrat', fontWeight: 700, fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
                  Share
                </button>
              </div>
            </div>
          </div>

          {/* Description + specs */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 32, marginBottom: 36 }}>
            <div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: ECR.charcoal, marginBottom: 16, paddingBottom: 10, borderBottom: `2px solid ${ECR.charcoal}` }}>
                Overview
              </div>
              <p style={{ fontFamily: 'FreightText', fontWeight: 400, fontSize: 17, lineHeight: 1.75, color: ECR.charcoal, marginBottom: 18 }}>
                {property.description}
              </p>
              <p style={{ fontFamily: 'FreightText', fontWeight: 300, fontSize: 15, lineHeight: 1.75, color: ECR.charcoal70 }}>
                Located in the {property.submarket} submarket of {property.city.split(',')[0]}, this {property.type.toLowerCase()} opportunity represents one of the strongest values available in the current Austin market. Contact {property.broker.name.split(',')[0]} to schedule a tour or request additional information.
              </p>
            </div>
            <div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: ECR.charcoal, marginBottom: 16, paddingBottom: 10, borderBottom: `2px solid ${ECR.charcoal}` }}>
                Specifications
              </div>
              {[
                ['Property ID', property.id],
                ['Type', property.type],
                ['Submarket', property.submarket],
                ['Min. Divisible', property.minDivSf >= property.sf ? '— full only' : (property.type === 'Land' ? `${(property.minDivSf / 43560).toFixed(1)} acres` : `${property.minDivSf.toLocaleString()} SF`)],
                ['Year Built', property.yearBuilt || '—'],
                ['Last Renovated', property.renovated || '—'],
                ['Walk Score®', `${property.walkScore} / 100`],
                ['Status', property.status],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '10px 0', borderBottom: `1px solid ${ECR.charcoal10}` }}>
                  <span style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 9.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: ECR.grayMid }}>{k}</span>
                  <span style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 11, letterSpacing: '0.04em', color: ECR.charcoal, textAlign: 'right' }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Amenities */}
          <div style={{ marginBottom: 36 }}>
            <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: ECR.charcoal, marginBottom: 16, paddingBottom: 10, borderBottom: `2px solid ${ECR.charcoal}` }}>
              Walkability + Nearby Amenities
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: `1px solid ${ECR.grayLight}` }}>
              <div style={{ padding: '20px 22px', background: ECR.cream, borderRight: `1px solid ${ECR.grayLight}` }}>
                <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 8, letterSpacing: '0.24em', textTransform: 'uppercase', color: ECR.grayMid, marginBottom: 6 }}>Walk Score®</div>
                <div style={{ fontFamily: 'MADECanvas', fontWeight: 900, fontSize: 36, letterSpacing: '0.04em', color: ECR.charcoal, lineHeight: 1 }}>
                  {property.walkScore}
                  <span style={{ fontSize: 14, color: ECR.grayMid }}> /100</span>
                </div>
              </div>
              {property.amenities.slice(0,3).map((a, i) => (
                <div key={a} style={{ padding: '20px 22px', background: ECR.white, borderRight: i < 2 ? `1px solid ${ECR.grayLight}` : 'none' }}>
                  <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 8, letterSpacing: '0.24em', textTransform: 'uppercase', color: ECR.red, marginBottom: 6 }}>Nearby</div>
                  <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 13, letterSpacing: '0.04em', color: ECR.charcoal, lineHeight: 1.3 }}>{a}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Broker block */}
          <div style={{ background: ECR.charcoal, padding: '32px 36px', display: 'flex', alignItems: 'center', gap: 28 }}>
            <div style={{ width: 88, height: 88, background: ECR.red, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'MADECanvas', fontWeight: 900, fontSize: 28, letterSpacing: '0.05em', color: '#fff' }}>
              {property.broker.name.split(' ').map(n => n[0]).slice(0,2).join('')}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 600, fontSize: 9, letterSpacing: '0.28em', textTransform: 'uppercase', color: ECR.red, marginBottom: 6 }}>
                Listing Broker
              </div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 22, letterSpacing: '0.10em', textTransform: 'uppercase', color: '#fff', marginBottom: 4 }}>
                {property.broker.name}
              </div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 400, fontSize: 11, color: ECR.grayLight, letterSpacing: '0.06em' }}>{property.broker.title}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 700, fontSize: 14, letterSpacing: '0.10em', color: '#fff' }}>{property.broker.phone}</div>
              <div style={{ fontFamily: 'Montserrat', fontWeight: 400, fontSize: 11, color: ECR.grayLight, letterSpacing: '0.04em' }}>{property.broker.email}</div>
            </div>
            <button style={{ padding: '14px 22px', background: ECR.red, color: '#fff', border: 'none', cursor: 'pointer', fontFamily: 'Montserrat', fontWeight: 700, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
              Contact Broker
            </button>
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FullscreenDetail });