import { ChevronDown, Globe, Plane, TrendingUp, BookOpen, PenLine } from 'lucide-react';
import { cn } from '@/lib/utils';
import {
  Popover,
  PopoverButton,
  PopoverPanel,
} from '@headlessui/react';
import { useChat } from '@/lib/hooks/useChat';
import { AnimatePresence, motion } from 'motion/react';

type AnswerModeKey = 'standard' | 'focus' | 'academic' | 'writing' | 'travel' | 'finance';

const AnswerModes: { key: AnswerModeKey; title: string; icon: React.ReactNode }[] = [
  { key: 'standard', title: 'Standard', icon: <Globe size={16} className="text-[#EA580C]" /> },
  { key: 'travel', title: 'Travel', icon: <Plane size={16} className="text-[#EA580C]" /> },
  { key: 'finance', title: 'Finance', icon: <TrendingUp size={16} className="text-[#EA580C]" /> },
  { key: 'academic', title: 'Academic', icon: <BookOpen size={16} className="text-[#EA580C]" /> },
  { key: 'writing', title: 'Writing', icon: <PenLine size={16} className="text-[#EA580C]" /> },
  { key: 'focus', title: 'Focus', icon: <Globe size={16} className="text-[#EA580C]" /> },
];

const AnswerMode = () => {
  const { answerMode, setAnswerMode } = useChat();
  const current = AnswerModes.find((m) => m.key === answerMode) ?? AnswerModes[0];

  return (
    <Popover className="relative">
      {({ open }) => (
        <>
          <PopoverButton
            type="button"
            className="p-2 text-black/50 dark:text-white/50 rounded-xl hover:bg-light-secondary dark:hover:bg-dark-secondary active:scale-95 transition duration-200 hover:text-black dark:hover:text-white focus:outline-none"
            title="Answer mode"
          >
            <div className="flex flex-row items-center space-x-1">
              {current.icon}
              <span className="text-xs hidden sm:inline">{current.title}</span>
              <ChevronDown
                size={14}
                className={cn(open ? 'rotate-180' : 'rotate-0', 'transition')}
              />
            </div>
          </PopoverButton>
          <AnimatePresence>
            {open && (
              <PopoverPanel
                className="absolute z-10 w-48 left-0 bottom-full mb-2"
                static
              >
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.9 }}
                  transition={{ duration: 0.1, ease: 'easeOut' }}
                  className="origin-bottom-left flex flex-col bg-light-primary dark:bg-dark-primary border rounded-lg border-light-200 dark:border-dark-200 p-2"
                >
                  {AnswerModes.map((mode) => (
                    <PopoverButton
                      key={mode.key}
                      onClick={() => setAnswerMode(mode.key)}
                      className={cn(
                        'p-2 rounded-lg flex flex-row items-center gap-2 text-start cursor-pointer transition focus:outline-none',
                        answerMode === mode.key
                          ? 'bg-light-secondary dark:bg-dark-secondary'
                          : 'hover:bg-light-secondary dark:hover:bg-dark-secondary',
                      )}
                    >
                      {mode.icon}
                      <span className="text-sm font-medium">{mode.title}</span>
                    </PopoverButton>
                  ))}
                </motion.div>
              </PopoverPanel>
            )}
          </AnimatePresence>
        </>
      )}
    </Popover>
  );
};

export default AnswerMode;
