/* ===== Planting Area Edit Experience =====
   Overlay over the BaseMap in DesignReveal showing 2-3 named planting areas
   as soft-stroked polygons. Click an area → right-side edit panel slides in. */

const PLANTING_AREAS = [
  {
    id: 'patio',
    name: 'Back Patio Surround',
    // polygon over the back yard area in basemap coords (0..1000 x 0..640)
    points: '320 415 590 415 600 545 305 545',
    labelX: 455, labelY: 480,
    interactive: true,
    summary: '11 elements · 4 new · 7 existing',
    elements: [
      { id: 'p1', name: 'Flagstone patio', type: 'Hardscape',  status: 'new',      icon: 'square' },
      { id: 'p2', name: 'Fire pit',        type: 'Feature',    status: 'new',      icon: 'flame' },
      { id: 'p3', name: 'Serviceberry',    type: 'Tree',       status: 'new',      icon: 'trees', latin: 'Amelanchier × grandiflora', qty: 2 },
      { id: 'p4', name: 'Oregon grape',    type: 'Shrub',      status: 'existing', icon: 'leaf',  latin: 'Mahonia aquifolium',        qty: 4 },
      { id: 'p5', name: 'Purple coneflower', type: 'Perennial', status: 'new',     icon: 'flower-2', latin: 'Echinacea purpurea',      qty: 4 },
      { id: 'p6', name: 'Feather reed grass', type: 'Grass',   status: 'existing', icon: 'wind',   latin: 'Calamagrostis × acutiflora', qty: 4 },
      { id: 'p7', name: 'Creeping thyme',  type: 'Groundcover',status: 'existing', icon: 'sprout', latin: 'Thymus serpyllum',          qty: 12 },
    ],
  },
  {
    id: 'side',
    name: 'Side Border',
    points: '150 425 305 425 305 545 150 545',
    labelX: 225, labelY: 488,
    interactive: false,
    summary: '6 elements · 2 new · 4 existing',
    elements: [],
  },
  {
    id: 'rear',
    name: 'Rear Screen',
    points: '600 425 760 425 760 545 605 545',
    labelX: 680, labelY: 488,
    interactive: false,
    summary: '4 elements · 1 new · 3 existing',
    elements: [],
  },
];

/* Three alternative options used by the Change drawer */
const ALTERNATIVES = {
  p3: [
    { name: 'Vine maple',         type: 'Tree' },
    { name: 'Pacific dogwood',    type: 'Tree' },
    { name: 'Redbud (Forest Pansy)', type: 'Tree' },
  ],
  p5: [
    { name: 'Black-eyed susan',   type: 'Perennial' },
    { name: 'Salvia "Caradonna"', type: 'Perennial' },
    { name: 'Yarrow "Moonshine"', type: 'Perennial' },
  ],
  p7: [
    { name: 'Woolly thyme',       type: 'Groundcover' },
    { name: 'Kinnikinnick',       type: 'Groundcover' },
    { name: 'Blue star creeper',  type: 'Groundcover' },
  ],
  // sensible defaults for anything else
  _default: [
    { name: 'Alternative A',      type: 'Plant' },
    { name: 'Alternative B',      type: 'Plant' },
    { name: 'Alternative C',      type: 'Plant' },
  ],
};

/* === SVG overlay drawn on top of the BaseMap === */
const PlantingAreaOverlay = ({ activeId, hoveredId, setHoveredId, onSelect }) => (
  <svg viewBox="0 0 1000 640" className="planting-overlay" preserveAspectRatio="none">
    <defs>
      <pattern id="pa-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <line x1="0" y1="0" x2="0" y2="6" stroke="#3D4421" strokeWidth="0.6" strokeOpacity="0.18" />
      </pattern>
    </defs>
    {PLANTING_AREAS.map(area => {
      const isActive = activeId === area.id;
      const isHover = hoveredId === area.id;
      return (
        <g key={area.id}
          className="planting-area"
          data-active={isActive}
          data-hover={isHover}
          onMouseEnter={() => setHoveredId(area.id)}
          onMouseLeave={() => setHoveredId(null)}
          onClick={() => onSelect(area.id)}
          style={{ cursor: 'pointer' }}>
          <polygon
            points={area.points}
            fill={isActive || isHover ? 'url(#pa-hatch)' : 'rgba(61,68,33,0.04)'}
            stroke={isActive ? '#3D4421' : '#6B7541'}
            strokeWidth={isActive ? 2.2 : 1.4}
            strokeDasharray="8 5"
            rx="6"
          />
          {/* Floating label */}
          <g transform={`translate(${area.labelX}, ${area.labelY})`} style={{ pointerEvents: 'none' }}>
            <rect x="-78" y="-15" width="156" height="30" rx="15"
              fill={isActive ? '#3D4421' : '#FAF9F6'}
              stroke={isActive ? '#3D4421' : '#6B7541'}
              strokeWidth="1"
            />
            <text x="0" y="2"
              textAnchor="middle"
              fontFamily="Fraunces, serif"
              fontSize="13"
              fontWeight="500"
              fill={isActive ? '#FAF9F6' : '#3D4421'}
              dominantBaseline="middle">
              {area.name}
            </text>
          </g>
        </g>
      );
    })}
  </svg>
);

/* === Right-side edit panel === */
const PlantingAreaPanel = ({ area, onClose }) => {
  const [items, setItems] = React.useState(() => area.elements.map(e => ({ ...e, liked: false, locked: false, changing: false, replaced: null })));
  // reset when a different area is selected
  React.useEffect(() => {
    setItems(area.elements.map(e => ({ ...e, liked: false, locked: false, changing: false, replaced: null })));
  }, [area.id]);

  const update = (id, patch) => setItems(prev => prev.map(it => it.id === id ? { ...it, ...patch } : it));

  return (
    <div className="pa-panel">
      <div className="pa-panel__header">
        <div>
          <div className="eyebrow"><span className="eyebrow__dot" />Planting area</div>
          <h3 className="serif pa-panel__title">{area.name}</h3>
          <div className="pa-panel__summary">{area.summary}</div>
        </div>
        <button className="pa-panel__close" onClick={onClose} aria-label="Close">
          <Icon name="x" size={16} />
        </button>
      </div>

      {!area.interactive ? (
        <div className="pa-empty">
          <div className="pa-empty__icon"><Icon name="construction" size={26} /></div>
          <div className="pa-empty__title">Coming soon</div>
          <p className="pa-empty__body">
            Editing for <strong>{area.name}</strong> opens in the next prototype pass.
            Try <strong>Back Patio Surround</strong> to walk through the full flow — Like, Change, and Lock are all wired there.
          </p>
          <button className="btn btn--ghost btn--sm" onClick={onClose}>
            <Icon name="arrow-left" size={14} /> Back to lot view
          </button>
        </div>
      ) : (
        <>
          <div className="pa-panel__legend">
            <span className="pa-legend"><span className="pa-dot pa-dot--new" /> New</span>
            <span className="pa-legend"><span className="pa-dot pa-dot--existing" /> Existing</span>
          </div>
          <div className="pa-panel__list">
            {items.map(item => (
              <PlantCard
                key={item.id}
                item={item}
                onLike={() => update(item.id, { liked: !item.liked })}
                onLock={() => update(item.id, { locked: !item.locked })}
                onChange={() => update(item.id, { changing: !item.changing })}
                onPick={(alt) => update(item.id, { replaced: alt, changing: false, liked: false })}
              />
            ))}
          </div>
          <div className="pa-panel__footer">
            <div className="pa-footer-stat">
              <span className="pa-footer-stat__num">{items.filter(i => i.liked).length}</span>
              <span className="pa-footer-stat__lbl">liked</span>
            </div>
            <div className="pa-footer-stat">
              <span className="pa-footer-stat__num">{items.filter(i => i.locked).length}</span>
              <span className="pa-footer-stat__lbl">locked</span>
            </div>
            <div className="pa-footer-stat">
              <span className="pa-footer-stat__num">{items.filter(i => i.replaced).length}</span>
              <span className="pa-footer-stat__lbl">swapped</span>
            </div>
            <button className="btn btn--primary btn--sm pa-footer-cta">
              Apply changes <Icon name="check" size={14} />
            </button>
          </div>
        </>
      )}
    </div>
  );
};

const PlantCard = ({ item, onLike, onLock, onChange, onPick }) => {
  const alts = ALTERNATIVES[item.id] || ALTERNATIVES._default;
  const display = item.replaced ? item.replaced : item;
  const isExisting = item.status === 'existing';
  return (
    <div className={`pa-card ${item.locked ? 'pa-card--locked' : ''} ${item.changing ? 'pa-card--changing' : ''}`}>
      <div className="pa-card__main">
        <div className="pa-card__icon" data-status={item.status}>
          <Icon name={item.icon} size={18} />
        </div>
        <div className="pa-card__body">
          <div className="pa-card__head">
            <div className="pa-card__name">
              {display.name}
              {item.replaced && <span className="pa-swapped">swapped</span>}
            </div>
            {item.locked && <Icon name="lock" size={13} />}
          </div>
          <div className="pa-card__meta">
            <span className="pa-tag">{display.type}</span>
            <span className={`pa-status pa-status--${item.status}`}>
              {isExisting ? 'Existing' : 'New'}
            </span>
            {item.latin && <span className="pa-latin">{item.latin}</span>}
            {item.qty && <span className="pa-qty">×{item.qty}</span>}
          </div>
        </div>
      </div>

      <div className="pa-card__actions">
        <button
          className="pa-action"
          data-active={item.liked}
          data-kind="like"
          onClick={onLike}
          disabled={item.locked}
          aria-label="Like">
          <Icon name={item.liked ? 'heart' : 'heart'} size={14} />
          <span>Like</span>
        </button>
        <button
          className="pa-action"
          data-active={item.changing}
          data-kind="change"
          onClick={onChange}
          disabled={item.locked}
          aria-label="Change">
          <Icon name="refresh-ccw" size={14} />
          <span>Change</span>
        </button>
        <button
          className="pa-action"
          data-active={item.locked}
          data-kind="lock"
          onClick={onLock}
          aria-label="Lock">
          <Icon name={item.locked ? 'lock' : 'unlock'} size={14} />
          <span>Lock</span>
        </button>
      </div>

      {item.changing && (
        <div className="pa-alts">
          <div className="pa-alts__head">Pick an alternative</div>
          <div className="pa-alts__grid">
            {alts.map((alt, i) => (
              <button key={i} className="pa-alt" onClick={() => onPick(alt)}>
                <div className="pa-alt__icon"><Icon name={item.icon} size={14} /></div>
                <div className="pa-alt__name">{alt.name}</div>
                <div className="pa-alt__type">{alt.type}</div>
              </button>
            ))}
          </div>
          <button className="pa-alts__keep" onClick={onChange}>
            Keep original
          </button>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { PLANTING_AREAS, PlantingAreaOverlay, PlantingAreaPanel });