import React, { forwardRef, useEffect, useState } from 'react';

import { Autocomplete, TextField, Avatar, Stack } from '@mui/material';
import axios from 'axios';
import { MdMyLocation } from 'react-icons/md';

// Pill variant — opt-in via `pill` prop. Mirrors the design used across the
// deliveries / dispatch filter rows (rounded pill, soft tinted bg, accent
// border + focus ring, optional leading avatar icon). The default
// (`pill={false}` or omitted) renders the original outlined TextField with
// label "Select Zones" so existing callers are not affected.
const LocationAutocomplete = forwardRef(
  (
    {
      setAppId,
      setLocoName,
      setPage,
      sx,
      textfeildSx,
      textfieldSx,
      pill = false,
      accentColor = '#6366f1',
      icon,
      placeholder = 'Select Zone',
      paperComponent
    },
    ref
  ) => {
    const [locations, setLocations] = useState(JSON.parse(localStorage.getItem('applocations') || '[]'));

    useEffect(() => {
      const fetchLocations = async () => {
        try {
          const userid = localStorage.getItem('userid');
          if (!userid) return;
          const response = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
          if (response.data.status) {
            const updatedLocations = [...response.data.details, { locationname: 'All', applocationid: 0 }];
            localStorage.setItem('applocations', JSON.stringify(updatedLocations));
            setLocations(updatedLocations);
          }
        } catch (err) {
          console.error('Error fetching locations in LocationAutocomplete:', err);
        }
      };

      if (locations.length === 0) {
        fetchLocations();
      }
    }, [locations.length]);

    // Helpers (only used by pill variant) — match the deliveries page's
    // token shorthand so the same opacity ramp is applied here.
    const a = (suffix) => `${accentColor}${suffix}`;
    const tint = a('08');
    const ring = a('26');
    const edge = a('55');
    const soft = a('18');

    const pillSx = pill
      ? {
          cursor: 'pointer',
          '& .MuiOutlinedInput-root': {
            borderRadius: '999px',
            bgcolor: tint,
            fontWeight: 600,
            color: '#0f172a',
            paddingRight: '8px',
            cursor: 'pointer',
            transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.2s',
            '& fieldset': { borderColor: edge, borderWidth: 1.5 },
            '&:hover fieldset': { borderColor: accentColor },
            '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring}` },
            '&.Mui-focused fieldset': { borderColor: accentColor, borderWidth: 2 }
          },
          '& .MuiAutocomplete-endAdornment .MuiSvgIcon-root': { color: accentColor }
        }
      : {};

    const Adornment = pill && (
      <Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5, mr: 0.25, flexShrink: 0 }}>
        <Avatar
          sx={{
            width: 24,
            height: 24,
            bgcolor: soft,
            color: accentColor,
            transition: 'background-color 0.15s, color 0.15s'
          }}
        >
          {icon || <MdMyLocation size={14} />}
        </Avatar>
      </Stack>
    );

    return (
      <Autocomplete
        id="location-autocomplete"
        options={locations || []}
        getOptionLabel={(option) => option?.locationname ?? ''}
        PaperComponent={paperComponent}
        sx={{ ...sx }}
        onChange={(event, value, reason) => {
          if (reason === 'clear') {
            setAppId?.(0);
            setLocoName?.('');
            setPage?.(0);
          } else if (value) {
            setAppId?.(value.applocationid);
            setLocoName?.(value.locationname);
            setPage?.(0);
          }
        }}
        renderInput={(params) =>
          pill ? (
            <TextField
              {...params}
              inputRef={ref}
              placeholder={placeholder}
              InputProps={{
                ...params.InputProps,
                startAdornment: Adornment
              }}
              sx={{ ...pillSx, ...(textfieldSx || textfeildSx || {}) }}
            />
          ) : (
            <TextField {...params} inputRef={ref} label={'Select Zones'} sx={{ ...(textfieldSx || textfeildSx || {}) }} />
          )
        }
      />
    );
  }
);

export default LocationAutocomplete;
