import * as React from 'react';
import { motion } from 'motion/react';

import { cn } from '@workspace/ui/lib/utils';
import { Button } from '@workspace/ui/components/ui/button';

// Define types for steps
interface StepItem {
  title: string;
  description: string;
  // Optional: 'What you do' and 'What we do' bullets
  youDo?: string;
  weDo?: string;
}

export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
  steps: StepItem[];
  title?: string; // Optional title for the section
  ctaText?: string; // Text for the CTA button
  ctaHref?: string; // Href for the CTA button
}

export function Steps({ steps, title, ctaText, ctaHref, className, ...props }: StepsProps) {
  return (
    <div className={cn('w-full', className)} {...props}>
      {title && <h2 className="text-2xl font-bold mb-8 text-center">{title}</h2>}

      {/* Desktop / Wide: horizontal timeline */}
      <div className="relative hidden md:block">
        {/* Horizontal line */}
        <div className="absolute left-0 right-0 top-5 h-px bg-border" />

        <ol className="relative flex items-start justify-between gap-6">
          {steps.map((step, index) => (
            <motion.li
              key={index}
              className="relative flex-1 min-w-0"
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-10%' }}
              transition={{ duration: 0.22, delay: index * 0.05, ease: [0.2, 0.8, 0.2, 1] }}
            >
              <div className="relative z-10 mx-auto w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                <span className="text-sm">{index + 1}</span>
              </div>
              <div className="mt-3 text-center px-2">
                <h3 className="text-sm font-semibold truncate">{step.title}</h3>
                <p className="mt-1 text-xs text-muted-foreground line-clamp-3">{step.description}</p>
                {(step.youDo || step.weDo) && (
                  <ul className="mt-2 space-y-1 text-xs text-left mx-auto max-w-xs">
                    {step.youDo && (
                      <li className="flex items-start"><span className="mr-2 text-primary">•</span><span><span className="font-medium">You:</span> {step.youDo}</span></li>
                    )}
                    {step.weDo && (
                      <li className="flex items-start"><span className="mr-2 text-primary">•</span><span><span className="font-medium">We:</span> {step.weDo}</span></li>
                    )}
                  </ul>
                )}
              </div>
            </motion.li>
          ))}
        </ol>
      </div>

      {/* Mobile: centered stacked items */}
      <div className="md:hidden">
        <ol className="space-y-8">
          {steps.map((step, index) => (
            <motion.li
              key={index}
              className="relative"
              initial={{ opacity: 0, y: 8 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-10%' }}
              transition={{ duration: 0.22, delay: index * 0.05, ease: [0.2, 0.8, 0.2, 1] }}
            >
              <div className="mx-auto w-9 h-9 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
                <span className="text-xs">{index + 1}</span>
              </div>
              <div className="mt-3 text-center px-1">
                <h3 className="text-base font-semibold">{step.title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{step.description}</p>
                {(step.youDo || step.weDo) && (
                  <ul className="mt-2 space-y-1 text-sm text-left mx-auto max-w-sm">
                    {step.youDo && (
                      <li className="flex items-start"><span className="mr-2 text-primary">•</span><span><span className="font-medium">You:</span> {step.youDo}</span></li>
                    )}
                    {step.weDo && (
                      <li className="flex items-start"><span className="mr-2 text-primary">•</span><span><span className="font-medium">We:</span> {step.weDo}</span></li>
                    )}
                  </ul>
                )}
              </div>
            </motion.li>
          ))}
        </ol>
      </div>

      {ctaText && ctaHref && (
        <div className="mt-10 flex justify-center">
          <Button asChild>
            <a href={ctaHref}>{ctaText}</a>
          </Button>
        </div>
      )}
    </div>
  );
}
