import { Button } from '@astryxdesign/core/Button';
import { HStack } from '@astryxdesign/core/HStack';
import { Text } from '@astryxdesign/core/Text';
import { VStack } from '@astryxdesign/core/VStack';
import { ArrowRight, Boxes, Check, LayoutDashboard, PackageSearch } from 'lucide-react';

/**
 * The end.
 *
 * One quiet animation — a tick that draws itself once — and then straight to
 * what comes next. Confetti on a business tool is a celebration the user did
 * not ask for, and it delays the three things they actually came here to do.
 *
 * The three cards are the real next actions, not a tour: each is a screen that
 * exists and does something.
 */
export interface DoneStepProps {
  productCount: number;
  onCatalogue: () => void;
  onInventory: () => void;
  onStorefront: () => void;
  onDashboard: () => void;
}

export function DoneStep({
  productCount,
  onCatalogue,
  onInventory,
  onStorefront,
  onDashboard,
}: DoneStepProps) {
  return (
    <VStack gap={4} className="ob-panel">
      <VStack gap={1.5} style={{ textAlign: 'center', alignItems: 'center' }}>
        <span className="ob-tick" aria-hidden>
          <Check size={30} strokeWidth={3} />
        </span>
        <Text
          type="display-2"
          weight="semibold"
          style={{ fontFamily: 'var(--font-display)', textWrap: 'balance' }}
        >
          You&rsquo;re all set 🎉
        </Text>
        <Text type="body" color="secondary" style={{ maxWidth: '48ch', lineHeight: 1.65 }}>
          {productCount > 0
            ? 'Your store is set up and your products are ready for customers.'
            : 'Your store is set up. Add some products and they will be ready for customers.'}
        </Text>
      </VStack>

      <div className="ob-benefits">
        <NextCard
          icon={<Boxes size={20} />}
          title="Manage your catalogue"
          body="Add products, set prices, and release them to your shops."
          cta="Open catalogue"
          onClick={onCatalogue}
        />
        <NextCard
          icon={<PackageSearch size={20} />}
          title="Update your stock"
          body="Upload your latest counts so customers see what is really there."
          cta="Update stock"
          onClick={onInventory}
        />
        <NextCard
          icon={<LayoutDashboard size={20} />}
          title="See your shop"
          body="Check what a customer sees, and which products are on sale."
          cta="View products"
          onClick={onStorefront}
        />
      </div>

      <HStack justify="center">
        <Button
          label="Go to the console"
          variant="primary"
          size="lg"
          endContent={<ArrowRight size={15} />}
          onClick={onDashboard}
        />
      </HStack>
    </VStack>
  );
}

function NextCard({
  icon,
  title,
  body,
  cta,
  onClick,
}: {
  icon: React.ReactNode;
  title: string;
  body: string;
  cta: string;
  onClick: () => void;
}) {
  return (
    <button type="button" className="ob-choice" onClick={onClick}>
      <VStack gap={1}>
        <span style={{ color: 'var(--color-brand)' }} aria-hidden>
          {icon}
        </span>
        <Text type="label" size="sm" weight="semibold">
          {title}
        </Text>
        <Text type="body" size="sm" color="secondary" style={{ lineHeight: 1.6 }}>
          {body}
        </Text>
        <Text type="label" size="sm" weight="semibold" style={{ color: 'var(--color-brand)' }}>
          {cta} →
        </Text>
      </VStack>
    </button>
  );
}