/* eslint-disable -- temporary disable for development/testing purposes */

'use client';

import React, { useEffect, useState, useContext } from 'react';
import { GoogleMap, Marker, InfoWindow, useJsApiLoader } from '@react-google-maps/api';
import { UserContext } from '@/contexts/user-context';
import { Stack, Typography } from '@mui/material';
import { useRouter } from 'next/navigation';

type Provider = {
  id: string;
  name: string;
  email: string;
  lat: number;
  lng: number;
};

const containerStyle = {
  width: '100%',
  height: '600px',
};

export function ServerdArea({ id }: { id: string }): React.JSX.Element {
  const [provider, setProvider] = useState<Provider | null>(null);
  const [loading, setLoading] = useState(true);
  const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number }>({ lat: 24.8607, lng: 67.0011 });

  // const { user: loggedInUser } = useContext(UserContext) ?? {};
  const router = useRouter();

  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '',
  });

  useEffect(() => {
    const fetchProvider = async () => {
      try {
        const res = await fetch(`/admin/api/provider/${id}/details`);
        if (!res.ok) throw new Error('Failed to fetch provider');
        const data = await res.json();
        console.log(data,'datadata')

        const formatted: Provider = {
          id: data.user.id,
          name: data.user.name || 'No Name',
          email: data.user.email || 'No Email',
          lat: Number(data.user.lat) || 24.8607,
          lng: Number(data.user.lng) || 67.0011,
        };

        setProvider(formatted);
        setMapCenter({ lat: formatted.lat, lng: formatted.lng });
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchProvider();
  }, [id]);

  if (!isLoaded) return <Typography>Loading Google Maps...</Typography>;

  return (
    <Stack spacing={3}>
      <Typography variant="h4">Served Area</Typography>

      {loading || !provider ? (
        <Typography>Loading provider...</Typography>
      ) : (
        <GoogleMap mapContainerStyle={containerStyle} center={mapCenter} zoom={13}>
          <Marker position={{ lat: provider.lat, lng: provider.lng }}>
            <InfoWindow position={{ lat: provider.lat, lng: provider.lng }}>
              <div style={{ maxWidth: '200px' }}>
                <strong>{provider.name}</strong>
                <p
                  style={{ color: 'blue', cursor: 'pointer', margin: '5px 0' }}
                  onClick={() => router.push(`/provider/${provider.id}`)}
                >
                  {provider.email}
                </p>
              </div>
            </InfoWindow>
          </Marker>
        </GoogleMap>
      )}
    </Stack>
  );
}