import { useAI, useAuth, useProxy, share } from '@deplixo/sdk';
import { useEffect, useRef, useState } from 'react';
import { ObservationLog } from './components/ObservationLog.jsx';
import { AddObservation } from './components/AddObservation.jsx';
import { Stats } from './components/Stats.jsx';

/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * ObservationLog — Timeline of stargazing observations [components/ObservationLog.jsx]
 * AddObservation — Form to log a new observation [components/AddObservation.jsx]
 * ObservationDetail — Detail view for a single observation [components/ObservationDetail.jsx]
 * Stats — Overview statistics and charts [components/Stats.jsx]
 * LocationCaptureFields — Adds a browser geolocation helper for the AddObservation form, letting users auto-fill latitude, longitude, and optional accuracy from their device.
 * ObservationLocationMap — Google Maps view centered on a single observation coordinate pair, with a fallback when coordinates are missing.
 * ObservationLogItemMap — Compact, non-interactive Google Maps preview for observation cards in the timeline.
 * null — Single-observation detail panel with a full Google Map centered on the saved coordinates. Note: if your existing ObservationDetail has different props/markup, merge the map section into that component.
 * TonightVisibleObjects — Shows tonight’s visible sky objects from the new proxy feed with refresh and fallback states.
 * AIObservationAssist — Lets the user describe what they saw and uses AI to suggest a better observation description and likely object matches.
 * @end-component-map */
// DEPLOY_CONFIG: {"server": {"proxy_endpoints": [{"name": "tonight_visible_objects", "method": "GET", "path": "/api/astronomy/tonight-visible-objects", "description": "Server-side proxy endpoint that fetches tonight's visible astronomical objects from an external astronomy API, using a server-stored API key and returning a normalized list for the client.", "env": {"ASTRONOMY_API_KEY": {"type": "secret", "required": true}, "ASTRONOMY_API_BASE_URL": {"type": "env", "required": false, "default": "https://api.astronomy.example.com"}}}]}}

function App() {
  const { user, loading, login, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('log');
  const [showAddModal, setShowAddModal] = useState(false);
  const [editItem, setEditItem] = useState(null);
  const [sharedObservationId, setSharedObservationId] = useState(null);
  const [sharedObservation, setSharedObservation] = useState(null);
  const [sharedLoading, setSharedLoading] = useState(false);

  const handleEdit = (item) => {
    setEditItem(item);
    setShowAddModal(true);
  };

  const handleCloseModal = () => {
    setShowAddModal(false);
    setEditItem(null);
  };

  const handleAddClick = () => {
    if (!user) {
      login();
      return;
    }
    setShowAddModal(true);
  };

  const handleOpenSharedObservation = (observation) => {
    if (!observation) return;
    setActiveTab('log');
    setSharedObservationId(observation.id || null);
    setSharedObservation(observation);
  };

  const clearSharedObservation = () => {
    setSharedObservationId(null);
    setSharedObservation(null);
  };

  const syncShareRoute = () => {
    if (typeof window === 'undefined') return;
    const params = new URLSearchParams(window.location.search);
    const view = params.get('view');
    const id = params.get('id');
    if (view === 'observation' && id) {
      setSharedObservationId(id);
    }
  };

  useEffect(() => {
    syncShareRoute();
    if (typeof window === 'undefined') return undefined;
    const onPopState = () => syncShareRoute();
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  useEffect(() => {
    if (!sharedObservationId || !user) return;
    let cancelled = false;
    const loadSharedObservation = async () => {
      setSharedLoading(true);
      try {
        const response = await fetch(window.location.href, { method: 'GET' });
        const text = await response.text();
        const match = text && text.includes(sharedObservationId);
        if (!cancelled) {
          setSharedObservation(match ? sharedObservation : sharedObservation);
        }
      } catch (error) {
        if (!cancelled) setSharedObservation(sharedObservation);
      } finally {
        if (!cancelled) setSharedLoading(false);
      }
    };
    loadSharedObservation();
    return () => { cancelled = true; };
  }, [sharedObservationId, user]);

  if (loading) return <div>Signing in...</div>;

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <div className="header-content">
            <div className="header-title">
              <span className="header-icon">✦</span>
              <h1>Stargazer Journal</h1>
            </div>
          </div>
        </header>
        <main className="app-main auth-main">
          <div className="auth-card">
            <h2>Sign in to view your observations</h2>
            <p>Use Google authentication to keep your stargazing notes private and tied to your account.</p>
            <button className="add-btn auth-btn" onClick={login}>
              Sign in with Google
            </button>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="header-content">
          <div className="header-title">
            <span className="header-icon">✦</span>
            <h1>Stargazer Journal</h1>
          </div>
          <div className="user-actions">
            <span className="user-greeting">Welcome, {user.name}</span>
            <button className="logout-btn" onClick={logout}>Sign Out</button>
            <button className="add-btn" onClick={handleAddClick}>
              <span>+</span> Log Observation
            </button>
          </div>
        </div>
        <nav className="tab-nav">
          <button className={`tab-btn ${activeTab === 'log' ? 'active' : ''}`} onClick={() => setActiveTab('log')}>
            <span className="tab-icon">☽</span> Timeline
          </button>
          <button className={`tab-btn ${activeTab === 'stats' ? 'active' : ''}`} onClick={() => setActiveTab('stats')}>
            <span className="tab-icon">◈</span> Stats
          </button>
        </nav>
      </header>

      <main className="app-main">
        {activeTab === 'log' && <ObservationLog user={user} onEdit={handleEdit} onOpenSharedObservation={handleOpenSharedObservation} sharedObservationId={sharedObservationId} />}
        {activeTab === 'stats' && <Stats user={user} />}
      </main>

      {sharedObservationId && activeTab === 'log' && (
        <div className="shared-observation-panel">
          {sharedLoading ? (
            <div className="shared-loading">Loading shared report...</div>
          ) : sharedObservation ? (
            <ObservationDetail observation={sharedObservation} onEdit={handleEdit} onClose={clearSharedObservation} />
          ) : (
            <div className="shared-missing">Shared observation not found.</div>
          )}
        </div>
      )}

      {showAddModal && (
        <AddObservation user={user} onClose={handleCloseModal} editItem={editItem} />
      )}
    </div>
  );
}


function LocationCaptureFields({ value, onChange }) {
  const [capturing, setCapturing] = useState(false);
  const [error, setError] = useState('');

  const requestLocation = () => {
    setError('');

    if (!navigator.geolocation) {
      setError('Geolocation is not supported by this browser.');
      return;
    }

    setCapturing(true);
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const latitude = position?.coords?.latitude;
        const longitude = position?.coords?.longitude;
        const accuracy = position?.coords?.accuracy;

        if (latitude === undefined || longitude === undefined || latitude === null || longitude === null) {
          setError('Could not determine your location.');
          setCapturing(false);
          return;
        }

        onChange({
          ...value,
          latitude,
          longitude,
          accuracy,
        });
        setCapturing(false);
      },
      () => {
        setError('Unable to access your location. Please allow location access and try again.');
        setCapturing(false);
      },
      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
    );
  };

  return (
    <div className="location-capture-fields">
      <div className="location-capture-header">
        <label className="field-label">Location coordinates</label>
        <button type="button" className="location-btn" onClick={requestLocation} disabled={capturing}>
          {capturing ? 'Capturing...' : 'Use my location'}
        </button>
      </div>

      <div className="location-coordinates">
        <div className="field-group">
          <label className="field-label">Latitude</label>
          <input
            className="text-input"
            value={value.latitude ?? ''}
            onChange={(e) => onChange({ ...value, latitude: e.target.value })}
            placeholder="Latitude"
          />
        </div>
        <div className="field-group">
          <label className="field-label">Longitude</label>
          <input
            className="text-input"
            value={value.longitude ?? ''}
            onChange={(e) => onChange({ ...value, longitude: e.target.value })}
            placeholder="Longitude"
          />
        </div>
      </div>

      <div className="field-group">
        <label className="field-label">Accuracy (optional, meters)</label>
        <input
          className="text-input"
          value={value.accuracy ?? ''}
          onChange={(e) => onChange({ ...value, accuracy: e.target.value })}
          placeholder="Accuracy in meters"
        />
      </div>

      {error && <p className="field-error">{error}</p>}
    </div>
  );
}


function ObservationLocationMap({ latitude, longitude, title, description, zoom = 14, className = '' }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const lat = Number(latitude);
    const lng = Number(longitude);

    if (!containerRef.current) return;
    if (Number.isNaN(lat) || Number.isNaN(lng)) return;
    if (typeof window === 'undefined' || !window.google || !window.google.maps) return;

    const map = new window.google.maps.Map(containerRef.current, {
      center: { lat, lng },
      zoom,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      zoomControl: true,
    });

    new window.google.maps.Marker({
      position: { lat, lng },
      map,
      title: title || 'Observation site',
    });

    if (description) {
      const infoWindow = new window.google.maps.InfoWindow({
        content: `<div class="map-popup"><strong>${title || 'Observation site'}</strong><p>${description}</p></div>`,
      });

      map.addListener('click', () => infoWindow.close());
    }
  }, [latitude, longitude, title, description, zoom]);

  const latNum = Number(latitude);
  const lngNum = Number(longitude);
  const hasCoords = !Number.isNaN(latNum) && !Number.isNaN(lngNum);

  return (
    <div className={`observation-location-map ${className}`.trim()}>
      {hasCoords ? (
        <div ref={containerRef} className="google-map-canvas" />
      ) : (
        <div className="map-placeholder">
          <span className="map-placeholder-icon">⌖</span>
          <p>No coordinates available</p>
        </div>
      )}
    </div>
  );
}


function ObservationLogItemMap({ latitude, longitude, title }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const lat = Number(latitude);
    const lng = Number(longitude);

    if (!containerRef.current) return;
    if (Number.isNaN(lat) || Number.isNaN(lng)) return;
    if (typeof window === 'undefined' || !window.google || !window.google.maps) return;

    const map = new window.google.maps.Map(containerRef.current, {
      center: { lat, lng },
      zoom: 11,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl: false,
      gestureHandling: 'none',
      draggable: false,
      zoomControl: false,
    });

    new window.google.maps.Marker({
      position: { lat, lng },
      map,
      title: title || 'Observation site',
    });
  }, [latitude, longitude, title]);

  const latNum = Number(latitude);
  const lngNum = Number(longitude);
  const hasCoords = !Number.isNaN(latNum) && !Number.isNaN(lngNum);

  return (
    <div className="observation-log-item-map">
      {hasCoords ? (
        <div ref={containerRef} className="google-map-canvas google-map-canvas-sm" />
      ) : (
        <div className="map-placeholder map-placeholder-sm">
          <span className="map-placeholder-icon">⌖</span>
          <p>No map available</p>
        </div>
      )}
    </div>
  );
}


function ObservationDetail({ observation, onEdit, onClose }) {
  const lat = observation?.latitude;
  const lng = observation?.longitude;
  const hasCoords = lat !== undefined && lat !== null && lng !== undefined && lng !== null && lat !== '' && lng !== '';
  const images = Array.isArray(observation?.imageUrls) ? observation.imageUrls : (Array.isArray(observation?.images) ? observation.images : []);

  const buildShareSummary = () => {
    if (!observation) return 'Stargazer Journal observation report';

    const parts = [];
    parts.push(`Stargazer Journal report: ${observation.title || 'Observation Details'}`);
    if (observation.date) parts.push(`Date: ${observation.date}`);
    if (observation.notes) parts.push(`Notes: ${observation.notes}`);
    if (hasCoords) {
      parts.push(`Location: ${observation.latitude}, ${observation.longitude}`);
      if (observation.accuracy !== undefined && observation.accuracy !== null && observation.accuracy !== '') {
        parts.push(`Accuracy: ${observation.accuracy} m`);
      }
    }
    if (images.length > 0) parts.push(`Photos: ${images.length}`);
    return parts.join('\n');
  };

  const getShareUrl = () => {
    if (typeof window === 'undefined' || !observation?.id) return '';
    const base = window.location.origin + window.location.pathname;
    const url = new URL(base, window.location.origin);
    url.searchParams.set('view', 'observation');
    url.searchParams.set('id', String(observation.id));
    return url.toString();
  };

  const handleCopyShareSummary = async () => {
    const shareText = `${buildShareSummary()}\n${getShareUrl() ? `\nView shared report: ${getShareUrl()}` : ''}`.trim();
    try {
      if (navigator?.clipboard?.writeText) {
        await navigator.clipboard.writeText(shareText);
      }
    } catch (error) {
      const textarea = document.createElement('textarea');
      textarea.value = shareText;
      textarea.setAttribute('readonly', 'true');
      textarea.className = 'share-copy-fallback';
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
  };

  const handleNativeShare = async () => {
    const shareUrl = getShareUrl();
    const shareText = buildShareSummary();

    if (navigator?.share && shareUrl) {
      try {
        await navigator.share({
          title: observation?.title || 'Observation Details',
          text: shareText,
          url: shareUrl,
        });
        return;
      } catch (error) {
        /* user canceled or share failed */
      }
    }

    await handleCopyShareSummary();
  };

  return (
    <div className="observation-detail">
      <div className="observation-detail-header">
        <div>
          <h2>{observation?.title || 'Observation Details'}</h2>
          {observation?.date && <p className="observation-meta">{observation.date}</p>}
        </div>
        <div className="detail-actions">
          <button className="share-btn" onClick={handleNativeShare} disabled={!observation}>
            Share
          </button>
          <button className="copy-share-btn" onClick={handleCopyShareSummary} disabled={!observation}>
            Copy summary
          </button>
          {onEdit && (
            <button className="edit-btn" onClick={() => onEdit(observation)}>
              Edit
            </button>
          )}
          {onClose && (
            <button className="close-btn" onClick={onClose}>
              Close
            </button>
          )}
        </div>
      </div>

      {observation?.notes && <p className="observation-notes">{observation.notes}</p>}

      {images.length > 0 && (
        <div className="observation-images-section">
          <h3>Astrophotography</h3>
          <div className="observation-image-grid">
            {images.map((src, index) => (
              <a key={`${src}-${index}`} href={src} target="_blank" rel="noreferrer" className="observation-image-link">
                <img src={src} alt={`${observation?.title || 'Observation'} image ${index + 1}`} className="observation-image-thumb" />
              </a>
            ))}
          </div>
          {images[0] && (
            <div className="observation-image-full-wrap">
              <img src={images[0]} alt={`${observation?.title || 'Observation'} full view`} className="observation-image-full" />
            </div>
          )}
        </div>
      )}

      <div className="observation-location-section">
        <h3>Observation site</h3>
        {hasCoords ? (
          <>
            <div className="observation-coordinates-text">
              <span>Latitude: {observation.latitude}</span>
              <span>Longitude: {observation.longitude}</span>
              {observation.accuracy !== undefined && observation.accuracy !== null && observation.accuracy !== '' && (
                <span>Accuracy: {observation.accuracy} m</span>
              )}
            </div>
            <ObservationLocationMap
              latitude={observation.latitude}
              longitude={observation.longitude}
              title={observation.title}
              description={observation.notes}
              zoom={14}
            />
          </>
        ) : (
          <div className="map-placeholder">
            <span className="map-placeholder-icon">⌖</span>
            <p>No coordinates recorded for this observation.</p>
          </div>
        )}
      </div>
    </div>
  );
}


function TonightVisibleObjects() {
  const { fetch: proxyFetch, loading, error } = useProxy();
  const [objects, setObjects] = useState([]);
  const [status, setStatus] = useState('');

  const loadObjects = async () => {
    setStatus('Loading tonight’s visible objects...');
    try {
      const data = await proxyFetch('https://api.deplixo.ai/astronomy/tonight-visible-objects', {
        method: 'GET'
      });
      const list = Array.isArray(data?.objects) ? data.objects : (Array.isArray(data) ? data : []);
      setObjects(list);
      setStatus(list.length ? '' : 'No visible objects were returned for tonight.');
    } catch (err) {
      setObjects([]);
      setStatus('Unable to load tonight’s visible objects.');
    }
  };

  return (
    <div className="tonight-objects-card">
      <div className="tonight-objects-header">
        <div>
          <h3>Tonight’s Visible Objects</h3>
          <p>Powered by the live proxy feed.</p>
        </div>
        <button className="refresh-btn" onClick={loadObjects} disabled={loading}>
          {loading ? 'Refreshing...' : 'Refresh'}
        </button>
      </div>
      {error && <p className="error">{error}</p>}
      {status && <p className="tonight-objects-status">{status}</p>}
      <div className="tonight-objects-list">
        {objects.map((item, index) => (
          <div key={`${item?.id || item?.name || index}`} className="tonight-object-item">
            <div className="tonight-object-topline">
              <h4>{item?.name || item?.title || 'Unknown object'}</h4>
              {item?.type && <span className="tonight-object-type">{item.type}</span>}
            </div>
            {item?.description && <p>{item.description}</p>}
            <div className="tonight-object-meta">
              {item?.bestTime && <span>Best time: {item.bestTime}</span>}
              {item?.altitude && <span>Altitude: {item.altitude}</span>}
              {item?.visibility && <span>Visibility: {item.visibility}</span>}
            </div>
          </div>
        ))}
      </div>
      {!objects.length && !loading && !status && <p className="tonight-objects-empty">Tap refresh to load tonight’s list.</p>}
    </div>
  );
}


function AIObservationAssist({ initialWhatSeen = '', initialNotes = '', onApply }) {
  const { generate, loading, error } = useAI();
  const [whatSeen, setWhatSeen] = useState(initialWhatSeen);
  const [notes, setNotes] = useState(initialNotes);
  const [result, setResult] = useState(null);

  const handleAnalyze = async () => {
    const response = await generate({
      system: 'You are an astronomy assistant. Given a user observation, suggest a concise improved description and likely object IDs/names. Return JSON with keys: suggestedDescription, likelyObjects (array of objects with name, id, confidence, reason), followUpQuestions (array of strings).',
      user: JSON.stringify({ whatSeen, notes }),
      json: true
    });
    setResult(response || null);
    if (onApply && response?.suggestedDescription) {
      onApply(response);
    }
  };

  return (
    <div className="ai-observation-assist">
      <h3>AI-assisted identification</h3>
      <p>Describe what you saw and get a suggested observation summary plus likely object matches.</p>
      <label className="field-label">
        What did you see?
        <textarea
          className="ai-textarea"
          value={whatSeen}
          onChange={(e) => setWhatSeen(e.target.value)}
          placeholder="e.g. bright fuzzy patch near Orion, maybe a cluster"
        />
      </label>
      <label className="field-label">
        Extra notes
        <textarea
          className="ai-textarea"
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          placeholder="Time, location, binoculars, weather, direction, etc."
        />
      </label>
      <button className="ai-analyze-btn" onClick={handleAnalyze} disabled={loading}>
        {loading ? 'Analyzing...' : 'Analyze with AI'}
      </button>
      {error && <p className="error">{error}</p>}
      {result && (
        <div className="ai-result">
          {result.suggestedDescription && (
            <div>
              <h4>Suggested description</h4>
              <p>{result.suggestedDescription}</p>
            </div>
          )}
          {Array.isArray(result.likelyObjects) && result.likelyObjects.length > 0 && (
            <div>
              <h4>Likely object IDs</h4>
              <ul className="ai-object-list">
                {result.likelyObjects.map((obj, index) => (
                  <li key={`${obj?.id || obj?.name || index}`}>
                    <strong>{obj?.name || obj?.id || 'Unknown'}</strong>
                    {obj?.confidence !== undefined && obj?.confidence !== null && <span> — {obj.confidence}</span>}
                    {obj?.reason && <p>{obj.reason}</p>}
                  </li>
                ))}
              </ul>
            </div>
          )}
          {Array.isArray(result.followUpQuestions) && result.followUpQuestions.length > 0 && (
            <div>
              <h4>Follow-up questions</h4>
              <ul className="ai-object-list">
                {result.followUpQuestions.map((q, index) => (
                  <li key={`${q}-${index}`}>{q}</li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

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