/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * ApartmentList — List/grid of saved apartments [components/ApartmentList.jsx]
 * ApartmentForm — Add/edit apartment modal [components/ApartmentForm.jsx]
 * ApartmentMap — Map view with color-coded markers [components/ApartmentMap.jsx]
 * ApartmentDetail — Detail view modal [components/ApartmentDetail.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"proxy": [{"name": "neighborhood-data-proxy", "path": "/api/neighborhoods", "method": "GET", "target": "https://external.api/neighborhoods", "forward_query_params": true, "normalize_response": {"type": "json", "mapping": {"items": "data", "total": "meta.total", "success": "true"}}}]}


import { useMemo, useState } from 'react';
import { ApartmentList } from './components/ApartmentList.jsx';
import { ApartmentForm } from './components/ApartmentForm.jsx';
import { ApartmentMap } from './components/ApartmentMap.jsx';
import { ApartmentDetail } from './components/ApartmentDetail.jsx';
import { useCollection, useAuth } from '@deplixo/sdk';

const SCORE_WEIGHTS = {
  price: 0.35,
  location: 0.3,
  size: 0.2,
  condition: 0.15,
};

const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

const toNumber = (value) => {
  if (value === null || value === undefined || value === '') return null;
  const num = Number(value);
  return Number.isFinite(num) ? num : null;
};

const getRating = (apt) => {
  const raw = apt?.rating ?? apt?.score ?? apt?.conditionRating;
  const rating = toNumber(raw);
  return rating === null ? 0 : clamp(rating, 0, 5);
};

const getConditionScore = (apt) => {
  const conditionValue = toNumber(apt?.conditionScore ?? apt?.condition);
  if (conditionValue !== null) return clamp(conditionValue, 0, 5);
  return getRating(apt);
};

const getLocationScore = (apt) => {
  const value = toNumber(apt?.locationScore ?? apt?.walkability ?? apt?.transitScore);
  if (value !== null) return clamp(value, 0, 5);
  const lat = toNumber(apt?.lat ?? apt?.latitude);
  const lng = toNumber(apt?.lng ?? apt?.longitude);
  if (lat === null || lng === null) return 2.5;
  const normalized = (Math.abs(lat % 1) + Math.abs(lng % 1)) / 2;
  return clamp(5 - normalized * 5, 0, 5);
};

const getSizeScore = (apt) => {
  const beds = toNumber(apt?.bedrooms ?? apt?.beds ?? apt?.bedCount);
  const sqft = toNumber(apt?.sqft ?? apt?.squareFeet ?? apt?.area);
  if (sqft !== null) {
    return clamp((sqft / 1200) * 5, 0, 5);
  }
  if (beds !== null) {
    return clamp((beds / 3) * 5, 0, 5);
  }
  return 2.5;
};

const getPriceScore = (apt) => {
  const rent = toNumber(apt?.rent ?? apt?.price ?? apt?.monthlyRent);
  if (rent === null) return 2.5;
  const minRent = 800;
  const maxRent = 5000;
  const normalized = 1 - clamp((rent - minRent) / (maxRent - minRent), 0, 1);
  return clamp(normalized * 5, 0, 5);
};

const calculateApartmentScore = (apt) => {
  const priceScore = getPriceScore(apt);
  const locationScore = getLocationScore(apt);
  const sizeScore = getSizeScore(apt);
  const conditionScore = getConditionScore(apt);

  const weightedTotal =
    priceScore * SCORE_WEIGHTS.price +
    locationScore * SCORE_WEIGHTS.location +
    sizeScore * SCORE_WEIGHTS.size +
    conditionScore * SCORE_WEIGHTS.condition;

  return {
    priceScore,
    locationScore,
    sizeScore,
    conditionScore,
    totalScore: Number(weightedTotal.toFixed(2)),
  };
};

const getDisplayValue = (value, fallback = '—') => {
  if (value === null || value === undefined || value === '') return fallback;
  return value;
};

const formatCurrency = (value) => {
  const num = toNumber(value);
  if (num === null) return '—';
  return `$${num.toLocaleString()}`;
};

const formatBeds = (apt) => {
  const beds = toNumber(apt?.bedrooms ?? apt?.beds ?? apt?.bedCount);
  return beds === null ? '—' : `${beds} bd`;
};

const formatSqft = (apt) => {
  const sqft = toNumber(apt?.sqft ?? apt?.squareFeet ?? apt?.area);
  return sqft === null ? '—' : `${sqft.toLocaleString()} sqft`;
};

const formatLocation = (apt) => {
  const address = apt?.address || apt?.location || apt?.name;
  return getDisplayValue(address);
};

const getTopPicks = (apartments, count = 3) => [...apartments].slice(0, count);

function App() {
  const { user, loading: authLoading, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('list');
  const [showForm, setShowForm] = useState(false);
  const [editingApt, setEditingApt] = useState(null);
  const [viewingApt, setViewingApt] = useState(null);
  const collection = useCollection('apartments', { personal: true });

  const apartmentsWithScores = useMemo(() => {
    return (collection.items || []).map((apt) => {
      const scoring = calculateApartmentScore(apt);
      return {
        ...apt,
        scoring,
        totalScore: scoring.totalScore,
      };
    });
  }, [collection.items]);

  const rankedApartments = useMemo(() => {
    return [...apartmentsWithScores].sort((a, b) => (b.totalScore || 0) - (a.totalScore || 0));
  }, [apartmentsWithScores]);

  const topPick = rankedApartments[0] || null;
  const topPicks = useMemo(() => getTopPicks(rankedApartments, 3), [rankedApartments]);

  const handleEdit = (apt) => {
    setEditingApt(apt);
    setShowForm(true);
  };
  const handleCloseForm = () => {
    setShowForm(false);
    setEditingApt(null);
  };
  const handleView = (apt) => setViewingApt(apt);
  const handleCloseDetail = () => setViewingApt(null);

  if (authLoading) return <div className="auth-gate">Signing in...</div>;
  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-icon">🏠</div>
          <h1>ApartmentTracker</h1>
          <p>Sign in with Google to access your personal apartment list, map, and notes.</p>
          <button className="btn-primary" onClick={() => {}}>
            Continue with Google
          </button>
          <p className="auth-hint">You’ll be redirected to Deplixo login, which supports Google sign-in.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="header-icon">🏠</span>
          <h1 className="header-title">ApartmentTracker</h1>
        </div>
        <div className="header-actions">
          {topPick && (
            <span className="top-pick-chip" title="Highest ranked apartment based on weighted scoring">
              Top Pick: {topPick.totalScore}/5
            </span>
          )}
          <span className="user-chip">{user.name}</span>
          <button className="btn-secondary btn-signout" onClick={logout}>Sign Out</button>
          <button className="btn-add" onClick={() => setShowForm(true)}>+ Add Listing</button>
        </div>
      </header>
      <nav className="tab-bar">
        <button className={`tab-btn ${activeTab === 'list' ? 'active' : ''}`} onClick={() => setActiveTab('list')}>
          <span className="tab-icon">📋</span> Listings
        </button>
        <button className={`tab-btn ${activeTab === 'map' ? 'active' : ''}`} onClick={() => setActiveTab('map')}>
          <span className="tab-icon">🗺️</span> Map View
        </button>
        <button className={`tab-btn ${activeTab === 'compare' ? 'active' : ''}`} onClick={() => setActiveTab('compare')}>
          <span className="tab-icon">⚖️</span> Compare
        </button>
      </nav>
      <main className="main-content">
        <div className="score-explainer">
          <div className="score-explainer-title">Weighted Score</div>
          <div className="score-explainer-list">
            <span>Price 35%</span>
            <span>Location 30%</span>
            <span>Size 20%</span>
            <span>Condition 15%</span>
          </div>
        </div>
        {activeTab === 'list' && (
          <ApartmentList collection={{ ...collection, items: rankedApartments }} onEdit={handleEdit} onView={handleView} />
        )}
        {activeTab === 'map' && (
          <ApartmentMap collection={{ ...collection, items: apartmentsWithScores }} onView={handleView} />
        )}
        {activeTab === 'compare' && (
          <section className="compare-view">
            <div className="compare-header">
              <h2>Top Picks Comparison</h2>
              <p>Side-by-side view of your highest ranked apartments based on the weighted scoring system.</p>
            </div>
            {topPicks.length === 0 ? (
              <div className="empty-state">
                <div className="empty-icon">⚖️</div>
                <h3>No apartments to compare yet</h3>
                <p>Add listings to see your top-ranked apartments side by side.</p>
              </div>
            ) : (
              <div className="compare-grid">
                {topPicks.map((apt, index) => (
                  <article key={apt.id || `${formatLocation(apt)}-${index}`} className={`compare-card compare-rank-${index + 1}`}>
                    <div className="compare-card-header">
                      <div>
                        <div className="compare-rank-label">#{index + 1} Pick</div>
                        <h3 className="compare-address">{formatLocation(apt)}</h3>
                      </div>
                      <div className="compare-score-badge">{apt.totalScore}/5</div>
                    </div>
                    <div className="compare-score-row">
                      <span className="score-label">Price</span>
                      <span className="score-value">{apt.scoring.priceScore.toFixed(1)}/5</span>
                    </div>
                    <div className="score-bar"><div className="score-bar-fill" style={{ width: `${(apt.scoring.priceScore / 5) * 100}%` }} /></div>
                    <div className="score-row">
                      <span className="score-label">Location</span>
                      <span className="score-value">{apt.scoring.locationScore.toFixed(1)}/5</span>
                    </div>
                    <div className="score-bar"><div className="score-bar-fill" style={{ width: `${(apt.scoring.locationScore / 5) * 100}%` }} /></div>
                    <div className="score-row">
                      <span className="score-label">Size</span>
                      <span className="score-value">{apt.scoring.sizeScore.toFixed(1)}/5</span>
                    </div>
                    <div className="score-bar"><div className="score-bar-fill" style={{ width: `${(apt.scoring.sizeScore / 5) * 100}%` }} /></div>
                    <div className="score-row">
                      <span className="score-label">Condition</span>
                      <span className="score-value">{apt.scoring.conditionScore.toFixed(1)}/5</span>
                    </div>
                    <div className="score-bar"><div className="score-bar-fill" style={{ width: `${(apt.scoring.conditionScore / 5) * 100}%` }} /></div>
                    <div className="compare-details">
                      <div><strong>Rent:</strong> {formatCurrency(apt.rent ?? apt.price ?? apt.monthlyRent)}</div>
                      <div><strong>Beds:</strong> {formatBeds(apt)}</div>
                      <div><strong>Sqft:</strong> {formatSqft(apt)}</div>
                      <div><strong>Rating:</strong> {getRating(apt).toFixed(1)}/5</div>
                    </div>
                    <div className="compare-breakdown">
                      <span>Price {SCORE_WEIGHTS.price * 100}%</span>
                      <span>Location {SCORE_WEIGHTS.location * 100}%</span>
                      <span>Size {SCORE_WEIGHTS.size * 100}%</span>
                      <span>Condition {SCORE_WEIGHTS.condition * 100}%</span>
                    </div>
                    <button className="btn-secondary compare-action" onClick={() => handleView(apt)}>View Details</button>
                  </article>
                ))}
              </div>
            )}
          </section>
        )}
      </main>
      {showForm && (
        <ApartmentForm collection={collection} editing={editingApt} onClose={handleCloseForm} />
      )}
      {viewingApt && (
        <ApartmentDetail apartment={viewingApt} onClose={handleCloseDetail} onEdit={handleEdit} />
      )}
    </div>
  );
}

export default App;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);