import { useNavigate } from 'react-router-dom';
import { Mail, Tag, Users } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { useModules } from '@/hooks/useModules';
import { DocLink } from '@/components/DocLink';

interface MarketingCard {
  title: string;
  description: string;
  icon: React.ElementType;
  to: string;
}

const cards: MarketingCard[] = [
  {
    title: __('Coupons'),
    description: __('Discounts, promotions, and coupon codes'),
    icon: Tag,
    to: '/marketing/coupons',
  },
  {
    title: __('Newsletter'),
    description: __('Manage subscribers and send email campaigns'),
    icon: Mail,
    to: '/marketing/newsletter',
  },
];

export default function Marketing() {
  const navigate = useNavigate();
  const { isEnabled } = useModules();

  const activeCards = [...cards];

  // Add Affiliates card conditionally if module is enabled
  if (isEnabled('affiliate')) {
    activeCards.splice(1, 0, {
      title: __('Affiliates'),
      description: __('Manage affiliate program and referrals'),
      icon: Users,
      to: '/marketing/affiliates',
    });
  }

  return (
    <div className="w-full space-y-6">
      <div>
        <div className="flex items-center">
          <h1 className="text-2xl font-bold tracking-tight">{__('Marketing')}</h1>
          <DocLink />
        </div>
        <p className="text-muted-foreground mt-2">{__('Coupons, affiliates, and newsletter campaigns')}</p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {activeCards.map((card) => (
          <button
            key={card.to}
            onClick={() => navigate(card.to)}
            className="flex items-start gap-4 p-6 rounded-lg border bg-card hover:bg-accent transition-colors text-left"
          >
            <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
              <card.icon className="w-5 h-5" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="font-medium">{card.title}</div>
              <div className="text-sm text-muted-foreground mt-1">
                {card.description}
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}
