'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Briefcase, FolderKanban, Calendar, Mail, Megaphone, Plus } from 'lucide-react'
import { Contact } from '@/lib/api/contacts'
import { toast } from 'react-hot-toast'

interface QuickActionsProps {
  contact: Contact
}

export default function QuickActions({ contact }: QuickActionsProps) {
  const router = useRouter()
  const [loading, setLoading] = useState<string | null>(null)

  const actions = [
    {
      id: 'deal',
      label: 'Create Deal',
      icon: Briefcase,
      color: 'blue',
      action: () => {
        // Navigate to CRM deals page with contact pre-filled
        router.push(`/crm?action=create-deal&contactId=${contact.id}`)
      }
    },
    {
      id: 'project',
      label: 'Create Project',
      icon: FolderKanban,
      color: 'green',
      action: () => {
        // Navigate to Projects page with client pre-filled
        router.push(`/projects?action=create&clientId=${contact.id}`)
      }
    },
    {
      id: 'activity',
      label: 'Schedule Activity',
      icon: Calendar,
      color: 'purple',
      action: () => {
        // TODO: Open activity creation modal/page
        toast.success('Activity scheduling coming soon')
      }
    },
    {
      id: 'email',
      label: 'Send Email',
      icon: Mail,
      color: 'orange',
      action: () => {
        if (contact.email) {
          // Open email client
          window.location.href = `mailto:${contact.email}`
        } else {
          toast.error('Contact has no email address')
        }
      }
    },
    {
      id: 'campaign',
      label: 'Add to Campaign',
      icon: Megaphone,
      color: 'pink',
      action: () => {
        // Navigate to marketing campaigns
        router.push(`/marketing?action=add-to-campaign&contactId=${contact.id}`)
      }
    }
  ]

  const getColorClasses = (color: string) => {
    const colors: Record<string, string> = {
      blue: 'bg-blue-50 text-blue-700 hover:bg-blue-100 border-blue-200',
      green: 'bg-green-50 text-green-700 hover:bg-green-100 border-green-200',
      purple: 'bg-purple-50 text-purple-700 hover:bg-purple-100 border-purple-200',
      orange: 'bg-orange-50 text-orange-700 hover:bg-orange-100 border-orange-200',
      pink: 'bg-pink-50 text-pink-700 hover:bg-pink-100 border-pink-200'
    }
    return colors[color] || colors.blue
  }

  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <div className="flex items-center gap-2 mb-4">
        <Plus className="h-5 w-5 text-gray-600" />
        <h3 className="text-lg font-semibold text-gray-900">Quick Actions</h3>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {actions.map((action) => {
          const Icon = action.icon
          const isLoading = loading === action.id

          return (
            <button
              key={action.id}
              onClick={() => {
                setLoading(action.id)
                action.action()
                setTimeout(() => setLoading(null), 1000)
              }}
              disabled={isLoading}
              className={`flex items-center gap-3 p-4 border rounded-lg transition-colors ${getColorClasses(action.color)} disabled:opacity-50`}
            >
              <Icon className="h-5 w-5" />
              <span className="font-medium text-sm">{action.label}</span>
            </button>
          )
        })}
      </div>

      <div className="mt-4 pt-4 border-t border-gray-200">
        <p className="text-xs text-gray-500 text-center">
          Quick actions allow you to create related records with this contact pre-filled
        </p>
      </div>
    </div>
  )
}
