import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from 'primereact/card';
import Button from '../shared/components/_V2/Button';
import Dropdown from '../shared/components/_V2/Dropdown';
import Divider from '../shared/components/_V1/Divider';

import fusero_logo from '../assets/fusero_logo.svg';
import roc_logo from '../assets/roc_logo.png';
import { useSystemStore } from '../state/stores/useSystemStore';

export type SystemDropdownOption = {
  id: number;
  label: string;
  businessLabel: string;
  urlSlug: string;
  logo: string;
  category: string;
  enterprises?: Enterprise[];
};

export type Enterprise = {
  id: number;
  name: string;
};

export interface SystemSelectionModalProps {
  systemDetails: SystemDropdownOption | null;
  onSystemSelected: (systemData: any) => void;
  onLogoChange: (newLogoPath: string) => void;
}

// TODO: removed mocked put in db
const mockedSystems = [
  {
    id: 1,
    label: 'CouncilAI',
    businessLabel: 'CouncilAI',
    urlSlug: 'council',
    logo: fusero_logo,
    category: 'Apps',
  },
  {
    id: 4,
    label: 'FuseMind',
    businessLabel: 'FuseMind (AI)',
    urlSlug: 'fusemind',
    logo: fusero_logo,
    category: 'Apps',
  },
  {
    id: 5,
    label: 'Canvas API',
    businessLabel: 'Canvas API',
    urlSlug: 'canvas',
    logo: roc_logo,
    category: 'Apps',
  },
];

// Add system default routes configuration
const systemDefaultRoutes = {
  council: 'chat',
  fusemind: 'home',
};

const SystemSelectionModal = ({ systemDetails }: SystemSelectionModalProps) => {
  const navigate = useNavigate();
  const [selectedSystem, setSelectedSystem] = useState<SystemDropdownOption | null>(null);
  const [selectedEnterprise, setSelectedEnterprise] = useState<number | null>(null);
  const { setSystem } = useSystemStore();

  useEffect(() => {
    [fusero_logo].forEach((image) => {
      const img = new Image();
      img.src = image;
    });
    if (systemDetails) {
      setSelectedSystem(systemDetails);
      setSystem(systemDetails);
    }
  }, [systemDetails, setSystem]);

  const handleSystemChange = useCallback(
    (e: { value: SystemDropdownOption }) => {
      setSelectedSystem(e.value);
      setSystem(e.value);
    },
    [setSystem]
  );

  const handleSelectSystem = () => {
    if (selectedSystem) {
      navigate(`/dashboard/${selectedSystem.urlSlug}`);  // JUST GO TO BASE PATH
    }
  };

  const handleEnterpriseChange = useCallback((e: { value: number }) => {
    setSelectedEnterprise(e.value);
  }, []);

  return (
    <>
      <Card
        style={{ border: 'none', boxShadow: 'none', overflow: 'hidden' }}
        className='px-8 bg-white'
      >
        <h2 className='my-2 text-xl font-semibold text-gray-700'>Apps & Flows</h2>
        <div className='flex items-center justify-between'>
          <Dropdown
            id='system'
            value={selectedSystem}
            options={mockedSystems}
            onChange={handleSystemChange}
            optionLabel='businessLabel'
            placeholder='Select an integration'
          />
        </div>
        {selectedSystem && selectedSystem.enterprises && (
          <Dropdown
            id='enterprise'
            value={selectedEnterprise}
            options={selectedSystem.enterprises.map((enterprise) => ({
              label: enterprise.name,
              value: enterprise.id,
            }))}
            onChange={handleEnterpriseChange}
            placeholder='Select an enterprise'
          />
        )}
        <Button
          label='Select System'
          onClick={handleSelectSystem}
          className='w-full mt-4 text-white transition-colors bg-teal-500 border-2 border-teal-500 rounded-md hover:bg-white hover:text-teal-500'
        />
        <Divider />
      </Card>
      {selectedSystem && (
        <img
          src={selectedSystem.logo}
          alt={`${selectedSystem.label} Logo`}
          className='w-48'
        />
      )}
    </>
  );
};

export default SystemSelectionModal;
