'use client';

import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import {
  Zap,
  Clock,
  Calendar,
  Users,
  FileText,
  Mail,
  MessageSquare,
  Settings,
  type LucideIcon,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { WidgetContainer } from '../widget-container';

interface QuickAction {
  id: string;
  icon: LucideIcon;
  labelKey: string;
  href?: string;
  onClick?: () => void;
  variant?: 'default' | 'primary';
}

const DEFAULT_ACTIONS: QuickAction[] = [
  {
    id: 'clock-in',
    icon: Clock,
    labelKey: 'clockIn',
    href: '/hr/time-tracking',
    variant: 'primary',
  },
  {
    id: 'vacation',
    icon: Calendar,
    labelKey: 'requestVacation',
    href: '/hr/absences/new',
  },
  {
    id: 'meeting',
    icon: Users,
    labelKey: 'scheduleMeeting',
    href: '/calendar/new',
  },
  {
    id: 'document',
    icon: FileText,
    labelKey: 'createDocument',
    href: '/documents/new',
  },
];

interface QuickActionsWidgetProps {
  id: string;
  isEditing?: boolean;
  onRemove?: () => void;
  onSettings?: () => void;
  actions?: QuickAction[];
  locale?: string;
  className?: string;
}

/**
 * Quick Actions Widget - Provides shortcuts to common actions
 */
export function QuickActionsWidget({
  id,
  isEditing = false,
  onRemove,
  onSettings,
  actions = DEFAULT_ACTIONS,
  locale = 'de',
  className,
}: QuickActionsWidgetProps) {
  const t = useTranslations('widgets.quickActions');
  const router = useRouter();

  const handleActionClick = (action: QuickAction) => {
    if (action.onClick) {
      action.onClick();
    } else if (action.href) {
      router.push(`/${locale}${action.href}`);
    }
  };

  return (
    <WidgetContainer
      id={id}
      title={t('name')}
      icon={<Zap className="h-4 w-4 text-primary" />}
      isEditing={isEditing}
      onRemove={onRemove}
      onSettings={onSettings}
      className={className}
    >
      <div className="grid gap-2">
        {actions.map((action, index) => {
          const Icon = action.icon;
          return (
            <motion.div
              key={action.id}
              initial={{ opacity: 0, x: -10 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.2, delay: index * 0.05 }}
            >
              <Button
                variant={action.variant === 'primary' ? 'default' : 'outline'}
                className={cn(
                  'w-full justify-start gap-3 h-11',
                  action.variant !== 'primary' && 'hover:bg-accent'
                )}
                onClick={() => handleActionClick(action)}
                disabled={isEditing}
              >
                <Icon className="h-4 w-4" />
                <span className="truncate">{t(action.labelKey)}</span>
              </Button>
            </motion.div>
          );
        })}
      </div>
    </WidgetContainer>
  );
}
