'use client';

import Link from 'next/link';
import { Icon, type IconName } from '@/components/marketing/icons';
import { cn } from '@/lib/utils';
import { useFeedback } from '@/components/ui/feedback-toast';

type QuickAction = {
  href?: string;
  label: string;
  icon: IconName;
  primary?: boolean;
  description?: string;
  onClick?: () => void;
};

export function QuickActions({
  storeSlug,
  className,
}: {
  storeSlug: string;
  className?: string;
}) {
  const feedback = useFeedback();
  const storePath = `/store/${storeSlug}`;

  async function shareStore() {
    const url = `${window.location.origin}${storePath}`;
    try {
      if (navigator.share) {
        await navigator.share({ title: 'My CHIMBO store', url });
        return;
      }
      await navigator.clipboard.writeText(url);
      feedback.success('Store link copied.');
    } catch {
      try {
        await navigator.clipboard.writeText(url);
        feedback.success('Store link copied.');
      } catch {
        feedback.error('Unable to share store link.');
      }
    }
  }

  const actions: QuickAction[] = [
    { href: '/dashboard/products/new', label: 'Add Product', icon: 'plus', primary: true, description: 'List something new' },
    { href: '/dashboard/offers/new', label: 'Create Offer', icon: 'offers', description: 'Personalized quote' },
    { href: '/dashboard/customers/new', label: 'Add Customer', icon: 'users', description: 'Save a contact' },
    { href: storePath, label: 'View Store', icon: 'store', description: 'Open public shop' },
    { label: 'Share Store', icon: 'share', description: 'Copy or WhatsApp', onClick: () => void shareStore() },
  ];

  return (
    <section aria-labelledby="quick-actions-heading" className={className}>
      <h2 id="quick-actions-heading" className="text-base font-bold text-navy">Quick Actions</h2>
      <div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-5">
        {actions.map(action => {
          const classNameInner = cn(
            'group flex min-h-[5.5rem] flex-col justify-between rounded-[var(--radius-lg)] border p-3.5 text-left transition-[transform,box-shadow,background-color] duration-200 active:scale-[0.98] motion-reduce:active:scale-100',
            action.primary
              ? 'border-primary bg-primary text-primary-foreground shadow-[var(--shadow-md)]'
              : 'border-border bg-card text-navy shadow-[var(--shadow-sm)] hover:border-primary/30 hover:shadow-[var(--shadow-md)]',
          );
          const body = (
            <>
              <span className={cn(
                'inline-flex size-9 items-center justify-center rounded-xl',
                action.primary ? 'bg-white/15' : 'bg-primary-soft text-primary',
              )}>
                <Icon name={action.icon} size={18} />
              </span>
              <span>
                <span className="block text-sm font-bold leading-tight">{action.label}</span>
                {action.description && (
                  <span className={cn('mt-0.5 block text-[11px]', action.primary ? 'text-white/70' : 'text-muted-foreground')}>
                    {action.description}
                  </span>
                )}
              </span>
            </>
          );

          if (action.onClick) {
            return (
              <button
                key={action.label}
                type="button"
                onClick={action.onClick}
                className={classNameInner}
              >
                {body}
              </button>
            );
          }

          return (
            <Link
              key={`${action.href}-${action.label}`}
              href={action.href!}
              target={action.href?.startsWith('/store/') ? '_blank' : undefined}
              rel={action.href?.startsWith('/store/') ? 'noreferrer' : undefined}
              className={classNameInner}
            >
              {body}
            </Link>
          );
        })}
      </div>
    </section>
  );
}