import { motion } from 'framer-motion'
import { Card, CardHeader } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { formatRelativeTime } from '@/lib/utils'
import {
  TrendingUp,
  Users,
  FileText,
  FileCheck,
  UserPlus,
} from 'lucide-react'

const activities = [
  {
    id: '1',
    type: 'deal' as const,
    title: 'Enterprise deal closed',
    description: 'Acme Corp signed €85,000 contract',
    time: new Date(Date.now() - 1000 * 60 * 15).toISOString(),
    user: 'Sarah Chen',
  },
  {
    id: '2',
    type: 'customer' as const,
    title: 'New customer onboarded',
    description: 'TechStart AB joined as a premium client',
    time: new Date(Date.now() - 1000 * 60 * 45).toISOString(),
    user: 'Marcus Lind',
  },
  {
    id: '3',
    type: 'invoice' as const,
    title: 'Invoice #INV-2024-0089 paid',
    description: '€12,400 received from Nordic Solutions',
    time: new Date(Date.now() - 1000 * 60 * 60 * 2).toISOString(),
  },
  {
    id: '4',
    type: 'contract' as const,
    title: 'Contract renewed',
    description: 'Global Industries extended for 2 years',
    time: new Date(Date.now() - 1000 * 60 * 60 * 4).toISOString(),
    user: 'Elena Rossi',
  },
  {
    id: '5',
    type: 'employee' as const,
    title: 'New team member',
    description: 'Johan Berg joined the Engineering team',
    time: new Date(Date.now() - 1000 * 60 * 60 * 6).toISOString(),
  },
  {
    id: '6',
    type: 'deal' as const,
    title: 'Deal moved to negotiation',
    description: 'MegaCorp €120K proposal under review',
    time: new Date(Date.now() - 1000 * 60 * 60 * 8).toISOString(),
    user: 'Sarah Chen',
  },
]

const typeConfig = {
  deal: { icon: TrendingUp, color: 'primary' as const, label: 'Deal' },
  customer: { icon: Users, color: 'success' as const, label: 'Customer' },
  invoice: { icon: FileText, color: 'warning' as const, label: 'Invoice' },
  contract: { icon: FileCheck, color: 'primary' as const, label: 'Contract' },
  employee: { icon: UserPlus, color: 'success' as const, label: 'HR' },
}

export function ActivityFeed() {
  return (
    <Card>
      <CardHeader title="Recent Activity" subtitle="Latest updates across your organization" />
      <div className="space-y-0">
        {activities.map((activity, i) => {
          const config = typeConfig[activity.type]
          const Icon = config.icon

          return (
            <motion.div
              key={activity.id}
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.15, delay: i * 0.03 }}
              className="flex items-start gap-3 py-3.5 border-b border-border/40 last:border-0"
            >
              <div className={`w-9 h-9 rounded-xl bg-${config.color}-light flex items-center justify-center shrink-0`}>
                <Icon size={16} className={`text-${config.color}`} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <p className="text-sm font-medium text-text-primary truncate">
                    {activity.title}
                  </p>
                  <Badge variant={config.color} size="sm">{config.label}</Badge>
                </div>
                <p className="text-xs text-text-secondary mt-0.5">{activity.description}</p>
                <div className="flex items-center gap-2 mt-1.5">
                  <span className="text-[11px] text-text-secondary/60">
                    {formatRelativeTime(activity.time)}
                  </span>
                  {activity.user && (
                    <>
                      <span className="text-[11px] text-text-secondary/40">·</span>
                      <span className="text-[11px] text-text-secondary/60">{activity.user}</span>
                    </>
                  )}
                </div>
              </div>
            </motion.div>
          )
        })}
      </div>
    </Card>
  )
}
