/* SITE PLAN (B) — aerial backdrop, floating filter card, overlays */

const M = window.MAF;
const { useState, useMemo, useCallback } = React;

function SitePlanPage() {
  const { navigate } = M.useRoute();
  const data = M.useData();

  const [filters, setFilters] = useState({
    type: { cottage: true, estate: true },
    status: { available: true, reserved: true, sold: true, soon: true },
    price: 'all',
    builder: 'all',
  });
  const [showAerial, setShowAerial] = useState(true);
  const [showLabels, setShowLabels] = useState(false);
  const [hover, setHover] = useState(null);

  const matchesFilter = useCallback((lot) => {
    if (!filters.type[lot.type]) return false;
    if (!filters.status[lot.status]) return false;
    const p = lot.price;
    if (filters.price === '<750'  && !(p < 750000)) return false;
    if (filters.price === '750-1' && !(p >= 750000 && p < 1000000)) return false;
    if (filters.price === '1-1.5' && !(p >= 1000000 && p < 1500000)) return false;
    if (filters.price === '1.5+'  && !(p >= 1500000)) return false;
    if (filters.builder !== 'all' && lot.builderId !== filters.builder) return false;
    return true;
  }, [filters]);

  const matchCount = useMemo(() => data.lots.filter(matchesFilter).length, [data, matchesFilter]);
  const counts = useMemo(() => {
    const c = { available: 0, reserved: 0, sold: 0, soon: 0 };
    for (const l of data.lots) c[l.status]++;
    return c;
  }, [data]);

  const toggle = (group, key) => setFilters(f => ({ ...f, [group]: { ...f[group], [key]: !f[group][key] } }));

  return (
    <div className="wf-screen col" style={{ minHeight: '100vh' }}>
      <M.TopNav />

      <div style={{ position: "relative", padding: "20px 40px", borderBottom: "1px solid var(--neutral-200)" }}>
        <div className="row between center">
          <div className="row gap-4 center">
            <M.Eyebrow>The Walkthrough</M.Eyebrow>
            <span style={{ color: "var(--neutral-300)" }}>/</span>
            <div className="t-h4">Site Plan</div>
            <M.Eyebrow>· {matchCount} of {data.count} lots match</M.Eyebrow>
          </div>
          <div className="row gap-3 center">
            <div className="row gap-1" style={{
              border: "1px solid var(--neutral-300)", borderRadius: 4, padding: 2
            }}>
              <button onClick={() => setShowAerial(true)}
                      className="wf-chip" style={{
                        border: "none",
                        background: showAerial ? "var(--neutral-900)" : "transparent",
                        color: showAerial ? "var(--bg-primary)" : "var(--neutral-700)",
                        cursor: 'pointer'
                      }}>Aerial</button>
              <button onClick={() => setShowAerial(false)}
                      className="wf-chip" style={{
                        border: "none",
                        background: !showAerial ? "var(--neutral-900)" : "transparent",
                        color: !showAerial ? "var(--bg-primary)" : "var(--neutral-700)",
                        cursor: 'pointer'
                      }}>Schematic</button>
            </div>
            <button onClick={() => setShowLabels(s => !s)}
                    className="wf-chip" style={{ cursor: 'pointer', background: showLabels ? 'var(--neutral-900)' : undefined, color: showLabels ? 'var(--bg-primary)' : undefined }}>
              Labels
            </button>
            <span className="wf-chip">Phase 1</span>
          </div>
        </div>
      </div>

      <div style={{ position: "relative", flex: 1, minHeight: 720, background: showAerial ? '#bfae8e' : 'var(--bg-secondary)' }}>
        <M.SitePlanMap
          filters={filters}
          showAerial={showAerial}
          showLabels={showLabels}
          highlight={hover?.n}
          onHover={setHover}
          onSelect={(lot) => navigate('lot', { n: lot.n })}
          height={720}
        />

        {/* floating filter panel top-left */}
        <div style={{
          position: "absolute", top: 24, left: 24, width: 270,
          background: "rgba(251,251,249,0.96)",
          backdropFilter: "blur(10px)",
          border: "1px solid var(--neutral-200)",
          borderRadius: 4, padding: 20
        }}>
          <div className="col gap-4">
            <div className="row between center">
              <M.Eyebrow>Filters</M.Eyebrow>
              <button onClick={() => setFilters({
                type: { cottage: true, estate: true },
                status: { available: true, reserved: true, sold: true, soon: true },
                price: 'all', builder: 'all'
              })} className="t-eyebrow" style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                color: 'var(--neutral-700)', textDecoration: 'underline'
              }}>Reset</button>
            </div>

            <FilterGroup title="Lot type" options={[
              { label: 'Cottage', count: data.lots.filter(l=>l.type==='cottage').length, on: filters.type.cottage, onChange: () => toggle('type','cottage') },
              { label: 'Estate',  count: data.lots.filter(l=>l.type==='estate').length,  on: filters.type.estate,  onChange: () => toggle('type','estate') },
            ]}/>

            <FilterGroup title="Status" options={[
              { label: 'Available',  count: counts.available, on: filters.status.available, onChange: () => toggle('status','available') },
              { label: 'Reserved',   count: counts.reserved,  on: filters.status.reserved,  onChange: () => toggle('status','reserved') },
              { label: 'Sold',       count: counts.sold,      on: filters.status.sold,      onChange: () => toggle('status','sold') },
              { label: 'Coming soon',count: counts.soon,      on: filters.status.soon,      onChange: () => toggle('status','soon') },
            ]}/>

            <div className="col gap-2">
              <M.Eyebrow>Price band</M.Eyebrow>
              <select className="wf-input" style={{ height: 36, fontSize: 12 }}
                      value={filters.price}
                      onChange={e => setFilters(f => ({ ...f, price: e.target.value }))}>
                <option value="all">All price bands</option>
                <option value="<750">Under $750k</option>
                <option value="750-1">$750k – $1M</option>
                <option value="1-1.5">$1M – $1.5M</option>
                <option value="1.5+">$1.5M and up</option>
              </select>
            </div>

            <div className="col gap-2">
              <M.Eyebrow>Builder</M.Eyebrow>
              <select className="wf-input" style={{ height: 36, fontSize: 12 }}
                      value={filters.builder}
                      onChange={e => setFilters(f => ({ ...f, builder: e.target.value }))}>
                <option value="all">All builders</option>
                {data.builders.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
              </select>
            </div>

            <div className="wf-chip wf-chip-filled" style={{ alignSelf: 'flex-start' }}>
              {matchCount} lots match
            </div>
          </div>
        </div>

        {/* legend bottom-left */}
        <div style={{
          position: "absolute", bottom: 24, left: 24,
          background: "rgba(251,251,249,0.96)",
          border: "1px solid var(--neutral-200)",
          borderRadius: 4, padding: "12px 18px"
        }}>
          <div className="row gap-5 center">
            <M.StatusChip tone="sage" label="Available" />
            <M.StatusChip tone="amber" label="Reserved" />
            <M.StatusChip tone="stone" label="Sold" />
            <M.StatusChip tone="cream" label="Coming soon" />
          </div>
        </div>

        {/* lot peek floating right */}
        {hover && <M.LotPeekCard lot={hover} />}
      </div>

      <M.Footer />
    </div>
  );
}

function FilterGroup({ title, options }) {
  return (
    <div className="col gap-3" style={{ paddingBottom: 12, borderBottom: "1px solid var(--neutral-200)" }}>
      <M.Eyebrow>{title}</M.Eyebrow>
      <div className="col gap-2">
        {options.map((o, i) => (
          <label key={i} className="row gap-2 center" style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--neutral-700)", cursor: 'pointer' }}>
            <input type="checkbox" checked={!!o.on} onChange={o.onChange}
                   style={{ width: 14, height: 14, accentColor: '#1c1917' }} />
            <span style={{ flex: 1 }}>{o.label}</span>
            <span style={{ color: "var(--neutral-400)" }}>{o.count}</span>
          </label>
        ))}
      </div>
    </div>
  );
}

window.MAF.SitePlanPage = SitePlanPage;