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

'use client';

import React, { useState, useEffect, 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 ProviderAreasPageClient(): React.JSX.Element {
  const [providers, setProviders] = useState<Provider[]>([]);
  const [loading, setLoading] = useState(true);
  const [mapCenter, setMapCenter] = useState<{ lat: number; lng: number }>({ lat: 24.8607, lng: 67.0011 });
  const [selectedProvider, setSelectedProvider] = useState<Provider | null>(null);

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

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

  useEffect(() => {
    if (!loggedInUser) return;

    const fetchCustomers = async () => {
      try {
        let url = '/admin/api/customers?role=doctor';
        if (loggedInUser.role === 'manager' && loggedInUser.companies.length > 0) {
          const activeCompany = loggedInUser.companies.find(company => company.active);
          if (activeCompany) {
            url += `&companyId=${activeCompany.id}`;
          }
        }

        const res = await fetch(url);
        if (!res.ok) {
          throw new Error(`Failed to fetch customers: ${res.status}`);
        }
        const data = await res.json();

        const formatted: Provider[] = data.map((item: any, index: number) => ({
          id: item.id || `DB-USER-${index + 1}`,
          name: item.name || 'No Name',
          email: item.email || 'No Email',
          lat: item.lat ? Number(item.lat) : 24.8607,
          lng: item.lng ? Number(item.lng) : 67.0011,
        }));

        setProviders(formatted);

        if (formatted.length > 0) {
          setMapCenter({ lat: formatted[0].lat, lng: formatted[0].lng }); // Use first provider's location
        }
      } catch (error) {
        // console.error('Failed to fetch customers', error);
      } finally {
        setLoading(false);
      }
    };

    fetchCustomers();
  }, [loggedInUser]);

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

  return (
    <Stack spacing={3}>
      <Typography variant="h4">Provider Areas</Typography>

      {loading ? (
        <Typography>Loading providers...</Typography>
      ) : (
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={mapCenter}
          zoom={12}
        >
          {providers.map((provider) => (
            <Marker
              key={provider.id}
              position={{
                lat: Number(provider.lat),
                lng: Number(provider.lng),
              }}
              onClick={() => setSelectedProvider(provider)}
            />
          ))}

          {selectedProvider && (
            <InfoWindow
              position={{ lat: selectedProvider.lat, lng: selectedProvider.lng }}
              onCloseClick={() => setSelectedProvider(null)}
            >
              <div style={{ maxWidth: '200px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <strong>Details</strong>
                  {/* <button onClick={() => setSelectedProvider(null)} style={{ border: 'none', background: 'none', cursor: 'pointer' }}>
                    ✕
                  </button> */}
                </div>
                <div>
                  <p
                    style={{ color: 'blue', cursor: 'pointer', margin: '5px 0' }}
                    onClick={() => router.push(`/provider/${selectedProvider.id}`)}
                  >
                    {selectedProvider.name}
                  </p>
                  <p
                    style={{ color: 'blue', cursor: 'pointer', margin: 0 }}
                    onClick={() => router.push(`/provider/${selectedProvider.id}`)}
                  >
                    {selectedProvider.email}
                  </p>
                </div>
              </div>
            </InfoWindow>
          )}
        </GoogleMap>
      )}
    </Stack>
  );
}