/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * BrowseTools — Browse neighbor tools with search/filter [components/BrowseTools.jsx]
 * MyTools — Manage your own tool listings [components/MyTools.jsx]
 * BorrowRequests — View and manage borrow requests [components/BorrowRequests.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"triggers": [{"name": "borrow_request_owner_email_notification", "on": "collection.add", "collection": "borrow_requests", "actions": [{"type": "email", "to": "{{tool_owner_email}}", "subject": "New borrow request submitted", "body": "A new borrow request was submitted.\n\nRequest details:\n- Request ID: {{id}}\n- Borrower: {{borrower_name}}\n- Tool: {{tool_name}}\n- Requested dates: {{start_date}} to {{end_date}}\n- Message: {{message}}\n\nPlease review the request in the Deplixo app."}]}, {"name": "borrower_due_date_reminder", "on": "collection.add", "collection": "borrow_requests", "actions": [{"type": "email", "to": "{{borrower_email}}", "subject": "Reminder: tool due tomorrow", "body": "Hi {{borrower_name}},\n\nThis is a reminder that your borrowed tool, {{tool_name}}, is due on {{end_date}}.\n\nPlease return it by the due date to avoid any issues.\n\nBorrow request ID: {{id}}"}]}], "cron": [{"name": "overdue_tool_alerts", "schedule": "0 9 * * *", "action": "event", "config": {"event_type": "overdue_tool_scan"}}]}

import { useEffect, useMemo, useRef, useState } from 'react';
import { useAuth, useCollection, renderMap } from '@deplixo/sdk';
import { BrowseTools } from './components/BrowseTools.jsx';
import { MyTools } from './components/MyTools.jsx';
import { BorrowRequests } from './components/BorrowRequests.jsx';

function EventMap({ markers = [], height = '360px' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const safeMarkers = markers
      .filter(m => Number.isFinite(m.lat) && Number.isFinite(m.lng))
      .map(m => ({
        lat: m.lat,
        lng: m.lng,
        popup: `<b>${String(m.title || 'Tool').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</b><p>${String(m.description || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</p>`,
      }));

    if (safeMarkers.length === 0) return;

    const first = safeMarkers[0];
    renderMap(containerRef.current, {
      center: [first.lat, first.lng],
      zoom: safeMarkers.length > 1 ? 11 : 13,
      markers: safeMarkers,
    });
  }, [markers]);

  return <div ref={containerRef} className="neighborhood-map" style={{ height }} />;
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [tab, setTab] = useState('browse');
  const { items: browseTools } = useCollection('tools');
  const { items: myTools } = useCollection('tools', { personal: true });

  const isVerifiedMember = Boolean(user?.verified || user?.isVerified || user?.memberVerified);
  const verifiedLabel = isVerifiedMember ? 'Verified neighborhood member' : 'Unverified member';
  const userDisplayName = user?.name || user?.displayName || user?.email?.split?.('@')?.[0] || 'Neighbor';

  const mapMarkers = useMemo(() => {
    const tools = (browseTools?.length ? browseTools : myTools || []);
    return tools
      .map(tool => {
        const lat = Number(tool?.lat ?? tool?.latitude ?? tool?.location?.lat);
        const lng = Number(tool?.lng ?? tool?.longitude ?? tool?.location?.lng);
        if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
        return {
          lat,
          lng,
          title: tool?.name || tool?.toolName || 'Tool',
          description: `${tool?.category || 'Tool'}${tool?.ownerName ? ` • ${tool.ownerName}` : ''}`,
        };
      })
      .filter(Boolean);
  }, [browseTools, myTools]);

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-icon">🔧</div>
        <div className="loading-text">Loading ToolShare...</div>
      </div>
    );
  }

  if (!user || !isVerifiedMember) {
    return (
      <div className="auth-screen">
        <div className="auth-card">
          <div className="auth-brand">
            <span className="logo-icon">🔧</span>
            <h1 className="app-title">ToolShare</h1>
          </div>
          <h2 className="auth-title">Verified members only</h2>
          <p className="auth-copy">
            Sign in with Google to continue. Access is restricted to verified neighborhood members.
          </p>
          <div className="auth-status auth-status-warning">
            Your account must be verified to use the app.
          </div>
          <button className="btn btn-primary btn-full auth-login-btn" onClick={() => login('google')}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  const tabs = [
    { id: 'browse', label: 'Browse Tools', icon: '🔍' },
    { id: 'mytools', label: 'My Tools', icon: '🧰' },
    { id: 'requests', label: 'Requests', icon: '📋' },
  ];

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-left">
          <span className="logo-icon">🔧</span>
          <h1 className="app-title">ToolShare</h1>
        </div>
        <div className="header-right">
          <div className="identity-badge" title={verifiedLabel}>
            <span className="identity-name">👋 {userDisplayName}</span>
            <span className={`identity-status ${isVerifiedMember ? 'verified' : 'unverified'}`}>
              {isVerifiedMember ? 'Verified' : 'Unverified'}
            </span>
          </div>
          <button className="btn btn-muted btn-sm auth-logout-btn" onClick={logout}>
            Sign out
          </button>
        </div>
      </header>

      <nav className="tab-bar">
        {tabs.map(t => (
          <button
            key={t.id}
            className={`tab-btn ${tab === t.id ? 'active' : ''}`}
            onClick={() => setTab(t.id)}
          >
            <span className="tab-icon">{t.icon}</span>
            <span className="tab-label">{t.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {mapMarkers.length > 0 && (
          <section className="map-section">
            <div className="section-header">
              <h2 className="section-title">Neighborhood tool map</h2>
              <span className="section-subtitle">Showing tools with saved coordinates</span>
            </div>
            <EventMap markers={mapMarkers} />
          </section>
        )}

        {tab === 'browse' && <BrowseTools currentUser={user} />}
        {tab === 'mytools' && <MyTools currentUser={user} />}
        {tab === 'requests' && <BorrowRequests currentUser={user} />}
      </main>
    </div>
  );
}

// PROGRESS:browse:complete:Setting up tool browsing
// PROGRESS:mytools:complete:Building tool management
// PROGRESS:requests:complete:Creating borrow request system

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