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

import * as React from 'react';
import {  useState, useContext } from 'react';
import { Box, Typography, Paper, Snackbar, Alert } from '@mui/material';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import { CaretUpDown as CaretUpDownIcon } from '@phosphor-icons/react';
import CompanyDropdown from './CompanyDropdown';
import { UserContext } from '@/contexts/user-context';

interface Company {
  id: number;
  name: string;
  active: boolean;
}

interface CompanySelectorProps {
  user: {
    companies: Company[];
  } | null;
}

export function CompanySelector({ user }: CompanySelectorProps) {
  const [open, setOpen] = useState(false); // dropdown
  const [switching, setSwitching] = useState(false); // show "Switching..."
  const [switched, setSwitched] = useState(false);   // show "Switched!"
  
  const activeCompany = user?.companies?.find((c) => c.active);
  const userContext = useContext(UserContext);

  if (!userContext) {
    return <Typography>Loading context...</Typography>;
  }

  const { setUser } = userContext;

  const handleSelect = (selectedCompany: Company) => {
    if (!user) return;

    setSwitching(true);
    setSwitched(false);

    const updatedCompanies = user.companies.map((company) => ({
      ...company,
      active: company.id === selectedCompany.id,
    }));

    setTimeout(() => {
      setUser((prevUser) =>
        prevUser ? { ...prevUser, companies: updatedCompanies } : null
      );
      setSwitching(false);
      setSwitched(true);
      setTimeout(() => setSwitched(false), 3000); // hide banner after 3s
    }, 1000); // simulate switching delay

    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prev) => !prev);
  };

  const handleClickAway = () => {
    setOpen(false);
  };

  if (!user) {
    return <Typography>No user data available</Typography>;
  }

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <Box sx={{ position: 'relative' }}>
        <Box
          onClick={handleToggle}
          sx={{
            alignItems: 'center',
            backgroundColor: 'var(--mui-palette-neutral-950)',
            border: '1px solid var(--mui-palette-neutral-700)',
            borderRadius: '12px',
            cursor: 'pointer',
            display: 'flex',
            p: '4px 12px',
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <Box sx={{ flex: '1 1 auto' }}>
            <Typography color="var(--mui-palette-neutral-400)" variant="body2">
              Workspace
            </Typography>
            <Typography color="inherit" variant="subtitle1" noWrap>
              {activeCompany?.name || 'No Active Company'}
            </Typography>
          </Box>
          <CaretUpDownIcon />
        </Box>

        {open && (
          <Paper
            elevation={4}
            sx={{
              position: 'absolute',
              top: '100%',
              left: 0,
              mt: 1,
              width: '100%',
              zIndex: 10,
              backgroundColor: 'white',
            }}
          >
            <CompanyDropdown
              companies={user.companies || []}
              defaultCompany={activeCompany}
              onSelect={handleSelect}
            />
          </Paper>
        )}

        {/* Banner / Snackbar */}
        <Snackbar
  open={switching}
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  sx={{ top: '80px !important' }} // Adjust this based on your header height
>
  <Alert severity="info" sx={{ width: '100%' }}>
    Switching company...
  </Alert>
</Snackbar>

<Snackbar
  open={switched}
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  sx={{ top: '80px !important' }} // Same here
>
  <Alert severity="success" sx={{ width: '100%' }}>
    Switched company successfully
  </Alert>
</Snackbar>
      </Box>
    </ClickAwayListener>
  );
}