import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { TimelinePropsItem } from '@/src/types/timeline';
import { TimelineItemEditorProps } from '@/types/timeline';
import { getBulletKey } from '@/utils/timeline';
import { Plus, Trash2, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import { IconPicker } from '@/components/ui/icon-picker';

export function TimelineItemEditor({ item, onUpdate, onClose, index }: TimelineItemEditorProps) {
  const [bulletKeys] = useState<Record<string, string>>({});
  const [localItem, setLocalItem] = useState<TimelinePropsItem>(item);

  useEffect(() => {
    setLocalItem(item);
  }, [item]);

  const updateItem = (updates: Partial<TimelinePropsItem>) => {
    const updated = { ...localItem, ...updates };
    setLocalItem(updated);
    onUpdate(updated);
  };

  return (
    <div className='space-y-4 bg-neutral-200 text-neutral-800'>
      <div className='flex justify-between items-center'>
        <Label className='text-neutral-800'>Item {index + 1}</Label>
        <Button variant='ghost' size='sm' onClick={onClose}>
          <X className='h-4 w-4' />
        </Button>
      </div>

      <div className='grid gap-4'>
        {['date', 'position', 'company'].map((field) => (
          <div key={field} className='space-y-2'>
            <Label className='text-neutral-800'>{field.charAt(0).toUpperCase() + field.slice(1)}</Label>
            <Input
              value={localItem[field as keyof TimelinePropsItem] as string}
              onChange={(e) => updateItem({ [field]: e.target.value })}
              className='border-neutral-800'
            />
          </div>
        ))}

        <div className='space-y-2'>
          <Label className='text-neutral-800'>Icon</Label>
          <IconPicker value={item.icon} onChange={(value) => updateItem({ icon: value as string })} />
        </div>

        <div className='space-y-2'>
          <div className='flex justify-between items-center'>
            <Label className='text-neutral-800'>Bullet Points</Label>
            <Button
              variant='light-outline'
              size='sm'
              onClick={() => updateItem({ bullets: [...localItem.bullets, 'New bullet point'] })}
              className='flex items-center gap-2'
            >
              <Plus className='h-4 w-4' />
              Add Bullet
            </Button>
          </div>

          {localItem.bullets.map((bullet, bulletIndex) => (
            <div key={getBulletKey(index, bulletIndex, bulletKeys)} className='flex'>
              <Input
                value={bullet}
                onChange={(e) => {
                  const newBullets = [...localItem.bullets];
                  newBullets[bulletIndex] = e.target.value;
                  updateItem({ bullets: newBullets });
                }}
                className='border-neutral-800 w-full'
              />
              <Button
                variant='ghost'
                size='sm'
                onClick={() =>
                  updateItem({
                    bullets: localItem.bullets.filter((_, idx) => idx !== bulletIndex),
                  })
                }
                className='text-neutral-800'
              >
                <Trash2 className='h-4 w-4' />
              </Button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
