import { useMemo, useState, useEffect, useRef } from 'react';
import { useCollection, useNotifications } from '@deplixo/sdk';
import { ParkingGrid } from './components/ParkingGrid.jsx';
import { SpotDetail } from './components/SpotDetail.jsx';
import { Legend } from './components/Legend.jsx';

const TOTAL_SPOTS = 40;
const HOURS = Array.from({ length: 24 }, (_, i) => i);
const HOUR_LABELS = HOURS.map(hour => `${String(hour).padStart(2, '0')}:00`);
const NOTIFICATION_PREF_KEY = 'parktrack_notification_pref';

function getHourFromTimestamp(timestamp) {
  if (!timestamp) return null;
  const date = new Date(timestamp);
  return Number.isNaN(date.getTime()) ? null : date.getHours();
}

function getSpotNumber(spotId) {
  const match = String(spotId ?? '').match(/\d+/);
  return match ? Number(match[0]) : null;
}

function getDistanceFromUserSpot(userSpotId, targetSpotId) {
  const userSpotNumber = getSpotNumber(userSpotId);
  const targetSpotNumber = getSpotNumber(targetSpotId);
  if (userSpotNumber === null || targetSpotNumber === null) return null;
  return Math.abs(userSpotNumber - targetSpotNumber);
}

function App() {
  const { items, loading, add, update, remove } = useCollection("parking_spots", { personal: true });
  const { notifications, unreadCount, send, markRead } = useNotifications();
  const [selectedSpot, setSelectedSpot] = useState(null);
  const [filter, setFilter] = useState("all");
  const [hourView, setHourView] = useState("availability");
  const [notificationsEnabled, setNotificationsEnabled] = useState(false);
  const [notifyRadius, setNotifyRadius] = useState(3);
  const [userSpotId, setUserSpotId] = useState(1);
  const [notificationStatus, setNotificationStatus] = useState('idle');
  const alertedSpotsRef = useRef(new Set());

  useEffect(() => {
    try {
      const saved = JSON.parse(window.name || 'null');
      if (saved && typeof saved === 'object') {
        if (typeof saved.notificationsEnabled === 'boolean') setNotificationsEnabled(saved.notificationsEnabled);
        if (typeof saved.notifyRadius === 'number') setNotifyRadius(saved.notifyRadius);
        if (typeof saved.userSpotId === 'number') setUserSpotId(saved.userSpotId);
      }
    } catch {
      // no-op
    }
  }, []);

  useEffect(() => {
    try {
      window.name = JSON.stringify({ notificationsEnabled, notifyRadius, userSpotId });
    } catch {
      // no-op
    }
  }, [notificationsEnabled, notifyRadius, userSpotId]);

  const spotMap = {};
  items.forEach(item => {
    spotMap[item.value.spotId] = item;
  });

  const takenCount = items.filter(i => i.value.status === "taken").length;
  const reservedCount = items.filter(i => i.value.status === "reserved").length;
  const available = TOTAL_SPOTS - takenCount;
  const taken = takenCount;
  const reserved = reservedCount;

  const nearbyAvailableSpots = useMemo(() => {
    if (!notificationsEnabled) return [];
    return Array.from({ length: TOTAL_SPOTS }, (_, index) => index + 1)
      .filter(spotId => {
        const distance = getDistanceFromUserSpot(userSpotId, spotId);
        if (distance === null || distance > notifyRadius) return false;
        const item = spotMap[spotId];
        return !item || item.value.status === 'available';
      });
  }, [notificationsEnabled, notifyRadius, userSpotId, spotMap]);

  const hourlyAvailability = useMemo(() => {
    const buckets = HOURS.map(() => ({ total: 0, available: 0, taken: 0, reserved: 0 }));

    items.forEach(item => {
      const hour = getHourFromTimestamp(item.value.updatedAt);
      if (hour === null) return;
      const bucket = buckets[hour];
      bucket.total += 1;
      if (item.value.status === 'taken') bucket.taken += 1;
      else if (item.value.status === 'reserved') bucket.reserved += 1;
      else bucket.available += 1;
    });

    return buckets.map((bucket, hour) => ({
      hour,
      label: HOUR_LABELS[hour],
      total: bucket.total,
      available: bucket.available,
      taken: bucket.taken,
      reserved: bucket.reserved,
      percentAvailable: bucket.total > 0 ? Math.round((bucket.available / bucket.total) * 100) : 0,
      percentTaken: bucket.total > 0 ? Math.round((bucket.taken / bucket.total) * 100) : 0,
      percentReserved: bucket.total > 0 ? Math.round((bucket.reserved / bucket.total) * 100) : 0,
    }));
  }, [items]);

  const chartPeak = Math.max(1, ...hourlyAvailability.map(h => h.total));

  const handleSpotClick = (spotId) => {
    setSelectedSpot(spotId);
  };

  const handleStatusChange = async (spotId, status, note) => {
    const existing = spotMap[spotId];
    const previousStatus = existing?.value?.status;
    if (status === "available" && existing) {
      await remove(existing.id);
    } else if (existing) {
      await update(existing.id, { spotId, status, note, updatedAt: Date.now() });
    } else if (status !== "available") {
      await add({ spotId, status, note, updatedAt: Date.now() });
    }

    const wasNotified = alertedSpotsRef.current.has(spotId);
    const distance = getDistanceFromUserSpot(userSpotId, spotId);
    const isNearby = distance !== null && distance <= notifyRadius;
    const becameAvailable = previousStatus && previousStatus !== 'available' && status === 'available';
    if (notificationsEnabled && isNearby && becameAvailable && !wasNotified) {
      alertedSpotsRef.current.add(spotId);
      try {
        setNotificationStatus('sending');
        await send({
          title: 'Nearby spot available',
          body: `Spot ${spotId} is now available within ${distance} spot(s) of your selected location.`,
          to: 'me',
        });
        setNotificationStatus('sent');
      } catch {
        setNotificationStatus('error');
      }
    }

    if (status !== 'available') {
      alertedSpotsRef.current.delete(spotId);
    }

    setSelectedSpot(null);
  };

  const requestNotifications = async () => {
    setNotificationStatus('requesting');
    if (typeof window !== 'undefined' && 'Notification' in window && Notification.permission === 'default') {
      const permission = await Notification.requestPermission();
      if (permission !== 'granted') {
        setNotificationsEnabled(false);
        setNotificationStatus('denied');
        return;
      }
    }
    setNotificationsEnabled(true);
    setNotificationStatus('enabled');
  };

  const disableNotifications = () => {
    setNotificationsEnabled(false);
    setNotificationStatus('disabled');
  };

  if (loading) {
    return (
      <div className="loading-screen">
        <div className="loading-icon">🅿️</div>
        <div className="loading-text">Loading parking lot...</div>
        <div className="loading-shimmer"></div>
      </div>
    );
  }

  return (
    <div className="app">
      <header className="header">
        <div className="header-left">
          <span className="logo">🅿️</span>
          <h1 className="title">ParkTrack</h1>
        </div>
        <div className="stats-bar">
          <div className="stat stat-available">
            <span className="stat-number">{available}</span>
            <span className="stat-label">Open</span>
          </div>
          <div className="stat stat-taken">
            <span className="stat-number">{taken}</span>
            <span className="stat-label">Taken</span>
          </div>
          <div className="stat stat-reserved">
            <span className="stat-number">{reserved}</span>
            <span className="stat-label">Reserved</span>
          </div>
        </div>
      </header>

      <section className="presence-bar" aria-label="Notification controls and nearby availability">
        <div className="presence-summary">
          <span className="presence-dot"></span>
          <span>
            <strong>{nearbyAvailableSpots.length}</strong> nearby spot{nearbyAvailableSpots.length === 1 ? '' : 's'} available
          </span>
        </div>
        <div className="presence-list">
          <label className="presence-chip" title="Select your current spot to calculate nearby availability">
            Your spot
            <input
              type="number"
              min="1"
              max={TOTAL_SPOTS}
              value={userSpotId}
              onChange={(e) => setUserSpotId(Number(e.target.value) || 1)}
              aria-label="Your current spot"
              style={{ width: 52, marginLeft: 8, background: 'transparent', border: 'none', color: 'inherit', outline: 'none' }}
            />
          </label>
          <label className="presence-chip" title="How many spots away should count as near">
            Radius
            <input
              type="number"
              min="1"
              max="10"
              value={notifyRadius}
              onChange={(e) => setNotifyRadius(Number(e.target.value) || 1)}
              aria-label="Notification radius"
              style={{ width: 40, marginLeft: 8, background: 'transparent', border: 'none', color: 'inherit', outline: 'none' }}
            />
          </label>
          <span className="presence-chip presence-chip-more">
            Notifications {notificationsEnabled ? 'on' : 'off'}
          </span>
        </div>
      </section>

      <div className="notification-panel">
        <div className="notification-panel-header">
          <div>
            <h2 className="notification-panel-title">Nearby availability alerts</h2>
            <p className="notification-panel-subtitle">
              Get notified when a spot near your selected location becomes available.
            </p>
          </div>
          <div className="notification-panel-actions">
            {!notificationsEnabled ? (
              <button type="button" className="btn btn-save" onClick={requestNotifications}>
                Enable alerts
              </button>
            ) : (
              <button type="button" className="btn btn-cancel" onClick={disableNotifications}>
                Disable alerts
              </button>
            )}
          </div>
        </div>
        <div className="notification-panel-meta">
          <span>Status: {notificationStatus}</span>
          <span>Unread notifications: {unreadCount}</span>
        </div>
        <div className="notification-list">
          {notifications.slice(0, 3).map(n => (
            <button key={n.id} type="button" className={`notification-item ${n.read ? 'read' : 'unread'}`} onClick={() => markRead(n.id)}>
              <strong>{n.title}</strong>
              <p>{n.body}</p>
            </button>
          ))}
        </div>
      </div>

      <Legend filter={filter} setFilter={setFilter} total={TOTAL_SPOTS} available={available} />

      <section className="availability-charts" aria-label="Availability pattern charts by hour">
        <div className="charts-header">
          <div>
            <h2 className="charts-title">Availability by hour</h2>
            <p className="charts-subtitle">Based on current spot activity timestamps in your parking data.</p>
          </div>
          <div className="chart-mode-toggle" role="tablist" aria-label="Chart mode">
            <button
              type="button"
              className={`chart-mode-btn ${hourView === 'availability' ? 'active' : ''}`}
              onClick={() => setHourView('availability')}
            >
              Available %
            </button>
            <button
              type="button"
              className={`chart-mode-btn ${hourView === 'counts' ? 'active' : ''}`}
              onClick={() => setHourView('counts')}
            >
              Counts
            </button>
          </div>
        </div>

        <div className="hour-chart-grid">
          {hourlyAvailability.map((hourData) => {
            const visibleValue = hourView === 'availability' ? hourData.percentAvailable : hourData.total;
            const maxValue = hourView === 'availability' ? 100 : chartPeak;
            const fillHeight = `${Math.max(4, (visibleValue / maxValue) * 100)}%`;

            return (
              <div key={hourData.hour} className="hour-chart-card">
                <div className="hour-chart-topline">
                  <span className="hour-label">{hourData.label}</span>
                  <span className="hour-value">
                    {hourView === 'availability' ? `${hourData.percentAvailable}%` : hourData.total}
                  </span>
                </div>
                <div className="hour-chart-track" title={`${hourData.label} — ${hourData.available} available, ${hourData.taken} taken, ${hourData.reserved} reserved`}>
                  <div className="hour-chart-fill" style={{ height: fillHeight }} />
                </div>
                <div className="hour-chart-meta">
                  <span className="hour-meta available">A {hourData.available}</span>
                  <span className="hour-meta taken">T {hourData.taken}</span>
                  <span className="hour-meta reserved">R {hourData.reserved}</span>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <ParkingGrid
        totalSpots={TOTAL_SPOTS}
        spotMap={spotMap}
        onSpotClick={handleSpotClick}
        filter={filter}
      />

      {selectedSpot !== null && (
        <SpotDetail
          spotId={selectedSpot}
          currentData={spotMap[selectedSpot]?.value || null}
          onSave={handleStatusChange}
          onClose={() => setSelectedSpot(null)}
        />
      )}
    </div>
  );
}

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