'use client';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useState } from 'react';
import { ComponentType } from '@/src/components/builder/config/componentRegistry';
import { ComponentGroupPreview } from '@/src/components/builder/ComponentGroupPreview';
import { FaBriefcase, FaCode, FaElementor, FaFolderPlus, FaColumns } from 'react-icons/fa';
import { MdContacts } from 'react-icons/md';
import { TbLayoutNavbarFilled } from 'react-icons/tb';
import { cn } from '@/lib/utils';
import { PortfolioElement } from '@/src/types/portfolio';

interface ComponentSelectorProps {
  onSelect: (componentType: ComponentType, initialProps?: Partial<PortfolioElement['props']>) => void;
  onCancel: () => void;
  disabledCategories?: string[];
}

const componentCategories = [
  {
    id: 'technologies',
    icon: <FaCode />,
    label: 'Technologies',
    group: 'technologies',
  },
  {
    id: 'navigation',
    icon: <TbLayoutNavbarFilled />,
    label: 'Navigation',
    group: 'headers',
  },
  {
    id: 'timeline',
    icon: <FaBriefcase />,
    label: 'Timeline',
    group: 'timeline',
  },
  {
    id: 'projects',
    icon: <FaFolderPlus />,
    label: 'Projects',
    group: 'projects',
  },
  {
    id: 'contact',
    icon: <MdContacts />,
    label: 'Contact',
    group: 'contact',
  },
  {
    id: 'elements',
    icon: <FaElementor />,
    label: 'Elements',
    group: 'elements',
  },
  {
    id: 'sections',
    icon: <FaColumns />,
    label: 'Sections',
    group: 'sections',
  },
] as const;

export function ComponentSelector({ onSelect, onCancel, disabledCategories = [] }: ComponentSelectorProps) {
  const [activeTab, setActiveTab] = useState(componentCategories[0].id);

  return (
    <Dialog open={true} onOpenChange={(open) => !open && onCancel()}>
      <DialogContent className='max-w-4xl max-h-[80vh] z-[600]'>
        <DialogHeader>
          <DialogTitle>Add Component</DialogTitle>
        </DialogHeader>

        <div className='flex h-[60vh]'>
          <div className='w-40 border-r pr-2'>
            <div className='flex flex-col space-y-1'>
              {componentCategories
                .filter((category) => !disabledCategories?.includes(category.id))
                .map((category) => (
                  <button
                    key={category.id}
                    onClick={() => setActiveTab(category.id as 'technologies')}
                    className={cn(
                      'flex items-center gap-2 px-3 py-2 text-sm rounded-lg',
                      'hover:bg-neutral-100 transition-colors',
                      activeTab === category.id ? 'bg-neutral-100 text-neutral-600' : 'text-neutral-600'
                    )}
                  >
                    {category.icon}
                    <span>{category.label}</span>
                  </button>
                ))}
            </div>
          </div>
          <div className='flex-1 pl-4 overflow-y-auto'>
            {componentCategories.map(
              (category) =>
                activeTab === category.id && (
                  <ComponentGroupPreview key={category.id} group={category.group} onLayoutSelect={onSelect} />
                )
            )}
          </div>
        </div>

        <div className='flex justify-end gap-2 mt-2 pt-2 border-t'>
          <Button onClick={onCancel}>Cancel</Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}
