import { Badge } from '@/components/ui/Badge'
import { formatCurrency } from '@/lib/utils'
import {
  AlertTriangle,
  TrendingUp,
  TrendingDown,
  AlertCircle,
  Briefcase,
  Clock,
  ArrowRight,
} from 'lucide-react'

interface BriefingCardProps {
  title: string
  value: string | number
  subtitle?: string
  icon?: React.ReactNode
  trend?: 'up' | 'down' | 'neutral'
  trendValue?: string
  variant?: 'default' | 'success' | 'warning' | 'danger'
}

export function BriefingCard({
  title,
  value,
  subtitle,
  icon,
  trend,
  trendValue,
  variant = 'default',
}: BriefingCardProps) {
  const variantStyles = {
    default: 'bg-surface border-border',
    success: 'bg-success/5 border-success/20',
    warning: 'bg-warning/5 border-warning/20',
    danger: 'bg-danger/5 border-danger/20',
  }

  return (
    <div className={`p-4 rounded-xl border ${variantStyles[variant]}`}>
      <div className="flex items-start justify-between">
        <div className="space-y-1">
          <p className="text-sm text-text-secondary">{title}</p>
          <p className="text-2xl font-semibold">{value}</p>
          {subtitle && <p className="text-xs text-text-tertiary">{subtitle}</p>}
        </div>
        {icon && <div className="text-text-secondary">{icon}</div>}
      </div>
      {trend && (
        <div className="flex items-center gap-1 mt-2">
          {trend === 'up' && <TrendingUp size={14} className="text-success" />}
          {trend === 'down' && <TrendingDown size={14} className="text-danger" />}
          {trend === 'neutral' && <AlertCircle size={14} className="text-text-secondary" />}
          <span className={`text-xs ${trend === 'up' ? 'text-success' : trend === 'down' ? 'text-danger' : 'text-text-secondary'}`}>
            {trendValue}
          </span>
        </div>
      )}
    </div>
  )
}

interface AlertCardProps {
  alert: {
    level: string
    title: string
    description: string
    source: string
  }
}

export function AlertCard({ alert }: AlertCardProps) {
  const levelStyles = {
    info: { icon: <AlertCircle size={16} />, color: 'text-primary bg-primary/5 border-primary/20' },
    warning: { icon: <AlertTriangle size={16} />, color: 'text-warning bg-warning/5 border-warning/20' },
    critical: { icon: <AlertTriangle size={16} />, color: 'text-danger bg-danger/5 border-danger/20' },
  }

  const style = levelStyles[alert.level as keyof typeof levelStyles] || levelStyles.info

  return (
    <div className={`p-3 rounded-lg border ${style.color}`}>
      <div className="flex items-start gap-2">
        {style.icon}
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium">{alert.title}</p>
          <p className="text-xs opacity-80 mt-0.5">{alert.description}</p>
        </div>
        <Badge variant="default" className="text-xs">{alert.source}</Badge>
      </div>
    </div>
  )
}

interface ActionCardProps {
  action: {
    priority: number
    title: string
    description: string
    impact: string
    time_estimate: string
  }
}

export function ActionCard({ action }: ActionCardProps) {
  const priorityColors = {
    10: 'bg-danger text-white',
    9: 'bg-danger/80 text-white',
    8: 'bg-warning text-white',
    7: 'bg-warning/80 text-white',
    6: 'bg-primary text-white',
    5: 'bg-primary/80 text-white',
  }

  return (
    <div className="p-3 rounded-lg border border-border bg-surface hover:bg-surface-hover transition-colors cursor-pointer group">
      <div className="flex items-start gap-3">
        <div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium shrink-0 ${priorityColors[action.priority as keyof typeof priorityColors] || 'bg-text-secondary text-white'}`}>
          {action.priority}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium group-hover:text-primary transition-colors">{action.title}</p>
          <p className="text-xs text-text-secondary mt-0.5">{action.description}</p>
          <div className="flex items-center gap-3 mt-2">
            <span className="text-xs text-text-tertiary flex items-center gap-1">
              <Clock size={12} />
              {action.time_estimate}
            </span>
            <span className="text-xs text-text-tertiary">{action.impact}</span>
          </div>
        </div>
        <ArrowRight size={16} className="text-text-tertiary group-hover:text-primary transition-colors shrink-0" />
      </div>
    </div>
  )
}

interface TaskCardProps {
  task: {
    id: string
    title: string
    priority: string
    status: string
    days_open: number
    category: string
  }
}

export function TaskCard({ task }: TaskCardProps) {
  const priorityVariants = {
    critical: 'danger',
    high: 'warning',
    medium: 'default',
    low: 'success',
  }

  return (
    <div className="flex items-center gap-3 p-2 rounded-lg hover:bg-surface-hover transition-colors">
      <div className="w-2 h-2 rounded-full bg-warning shrink-0" />
      <div className="flex-1 min-w-0">
        <p className="text-sm truncate">{task.title}</p>
        <div className="flex items-center gap-2 mt-0.5">
          <Badge variant={priorityVariants[task.priority as keyof typeof priorityVariants] as any} className="text-xs">
            {task.priority}
          </Badge>
          <span className="text-xs text-text-tertiary">{task.category}</span>
        </div>
      </div>
      <span className="text-xs text-text-tertiary shrink-0">{task.days_open}d</span>
    </div>
  )
}

interface DealCardProps {
  deal: {
    id: string
    name: string
    customer: string
    value: number
    currency: string
    stage: string
    probability: number
  }
}

export function DealCard({ deal }: DealCardProps) {
  return (
    <div className="flex items-center gap-3 p-2 rounded-lg hover:bg-surface-hover transition-colors">
      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
        <Briefcase size={16} className="text-primary" />
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium truncate">{deal.name}</p>
        <p className="text-xs text-text-secondary">{deal.customer}</p>
      </div>
      <div className="text-right shrink-0">
        <p className="text-sm font-medium">{formatCurrency(deal.value)}</p>
        <p className="text-xs text-text-tertiary">{deal.probability}%</p>
      </div>
    </div>
  )
}
