import React, { useState } from 'react';
import { FiChevronDown, FiChevronUp, FiInfo } from 'react-icons/fi';
import {
  ModelInfo,
  getModelsByProvider,
  getModelDisplayInfo,
} from '../../lib/models';
import Typography from './Typography';
import { Badge } from './badge';
import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';

interface ModelSelectorProps {
  provider: 'openai' | 'anthropic';
  selectedModel: string;
  onModelChange: (model: string) => void;
  className?: string;
}

interface ModelCardProps {
  model: ModelInfo;
  isSelected: boolean;
  onSelect: (modelId: string) => void;
}

const ModelCard: React.FC<ModelCardProps> = ({
  model,
  isSelected,
  onSelect,
}) => {
  const displayInfo = getModelDisplayInfo(model.id);

  return (
    <div
      onClick={() => onSelect(model.id)}
      className={`cursor-pointer border rounded-lg p-4 transition-all hover:shadow-md ${
        isSelected
          ? 'border-brand-blue bg-brand-blue/5 dark:bg-brand-blue/10'
          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
      }`}
    >
      <div className='flex items-start justify-between mb-2'>
        <div className='flex items-center space-x-2'>
          <Typography variant='h6' className='font-semibold'>
            {model.name}
          </Typography>
          <div className='flex items-center space-x-1'>
            {displayInfo?.badges.map((badge) => (
              <Badge
                key={badge}
                variant={(() => {
                  if (badge === 'Recommended') return 'default';
                  if (badge === 'New') return 'secondary';
                  return 'outline';
                })()}
                className='text-xs'
              >
                {badge}
              </Badge>
            ))}
          </div>
        </div>
        <Tooltip>
          <TooltipTrigger>
            <FiInfo className='w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-help' />
          </TooltipTrigger>
          <TooltipContent>View detailed information</TooltipContent>
        </Tooltip>
      </div>

      <Typography
        variant='caption'
        color='muted'
        className='mb-3 leading-relaxed'
      >
        {model.description}
      </Typography>

      <div className='grid grid-cols-2 gap-4 mb-3'>
        <div>
          <Typography
            variant='caption'
            className='font-medium text-gray-700 dark:text-gray-300'
          >
            Context Window
          </Typography>
          <Typography variant='caption' color='muted'>
            {model.contextWindow}
          </Typography>
        </div>
        <div>
          <Typography
            variant='caption'
            className='font-medium text-gray-700 dark:text-gray-300'
          >
            Input Cost
          </Typography>
          <Typography variant='caption' color='muted'>
            {model.inputCost}
          </Typography>
        </div>
      </div>

      <div className='mb-3'>
        <Typography
          variant='caption'
          className='font-medium text-gray-700 dark:text-gray-300 mb-1'
        >
          Best For:
        </Typography>
        <div className='flex flex-wrap gap-1'>
          {model.bestFor.slice(0, 3).map((use) => (
            <span
              key={use}
              className='inline-block bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 px-2 py-1 rounded text-xs'
            >
              {use}
            </span>
          ))}
        </div>
      </div>

      <div className='flex items-center justify-between'>
        <div className='flex items-center space-x-3 text-xs text-gray-500 dark:text-gray-400'>
          {model.supportsVision && (
            <span className='flex items-center'>👁️ Vision</span>
          )}
          {model.supportsFunctionCalling && (
            <span className='flex items-center'>🔧 Functions</span>
          )}
        </div>
        <Typography variant='caption' color='muted'>
          Output: {model.outputCost}
        </Typography>
      </div>
    </div>
  );
};

export const ModelSelector: React.FC<ModelSelectorProps> = ({
  provider,
  selectedModel,
  onModelChange,
  className = '',
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const models = getModelsByProvider(provider);
  const selectedModelInfo = models.find((m) => m.id === selectedModel);

  const recommendedModels = models.filter((m) => m.isRecommended);
  const otherModels = models.filter((m) => !m.isRecommended);

  if (!isExpanded) {
    return (
      <div className={className}>
        <div className='mb-2'>
          <Typography variant='body1' className='font-medium mb-1'>
            AI Model
          </Typography>
          <Typography variant='caption' color='muted'>
            Choose the AI model that best fits your needs and budget
          </Typography>
        </div>

        <div
          onClick={() => setIsExpanded(true)}
          className='cursor-pointer border border-gray-300 dark:border-gray-600 rounded-md p-3 bg-white dark:bg-gray-800 hover:border-gray-400 dark:hover:border-gray-500 transition-colors'
        >
          <div className='flex items-center justify-between'>
            <div>
              <Typography variant='body1' className='font-medium'>
                {selectedModelInfo?.name || 'Select a model'}
              </Typography>
              {selectedModelInfo && (
                <Typography
                  variant='caption'
                  color='muted'
                  className='line-clamp-1'
                >
                  {selectedModelInfo.description}
                </Typography>
              )}
            </div>
            <FiChevronDown className='w-5 h-5 text-gray-500' />
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={className}>
      <div className='flex items-center justify-between mb-4'>
        <div>
          <Typography variant='body1' className='font-medium mb-1'>
            Select AI Model
          </Typography>
          <Typography variant='caption' color='muted'>
            Choose the model that best fits your use case
          </Typography>
        </div>
        <button
          onClick={() => setIsExpanded(false)}
          className='flex items-center space-x-1 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
        >
          <span className='text-sm'>Collapse</span>
          <FiChevronUp className='w-4 h-4' />
        </button>
      </div>

      {recommendedModels.length > 0 && (
        <div className='mb-6'>
          <Typography
            variant='h6'
            className='mb-3 text-green-700 dark:text-green-300'
          >
            ⭐ Recommended Models
          </Typography>
          <div className='space-y-3'>
            {recommendedModels.map((model) => (
              <ModelCard
                key={model.id}
                model={model}
                isSelected={selectedModel === model.id}
                onSelect={onModelChange}
              />
            ))}
          </div>
        </div>
      )}

      {otherModels.length > 0 && (
        <div>
          <Typography
            variant='h6'
            className='mb-3 text-gray-700 dark:text-gray-300'
          >
            Other Models
          </Typography>
          <div className='space-y-3'>
            {otherModels.map((model) => (
              <ModelCard
                key={model.id}
                model={model}
                isSelected={selectedModel === model.id}
                onSelect={onModelChange}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
};