Feature tabs

'use client';

import * as React from 'react';
import { type FeatureTab, FeatureTabs } from './feature-tabs';

function Pane({ title, text, children }: { title: string; text: string; children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-1">
        <h3 className="m-0 text-md font-semibold text-primary">{title}</h3>
        <p className="m-0 text-sm text-tertiary">{text}</p>
      </div>
      <div className="flex flex-col gap-3 rounded-xl border border-secondary bg-secondary p-4">
        {children}
      </div>
    </div>
  );
}

function Task({ done, children }: { done?: boolean; children: React.ReactNode }) {
  return (
    <div className={`flex items-center gap-2 text-sm ${done ? 'text-tertiary' : 'text-secondary'}`}>
      <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" className="size-4 shrink-0">
        <circle
          cx="8"
          cy="8"
          r="6.5"
          stroke={done ? 'var(--lunia-fg-success-primary)' : 'var(--lunia-fg-quaternary)'}
          strokeWidth="1.5"
        />
        {done ? (
          <path
            d="m5.25 8.25 1.9 1.9 3.6-4"
            stroke="var(--lunia-fg-success-primary)"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        ) : null}
      </svg>
      {children}
    </div>
  );
}

function Bar({ label, value }: { label: string; value: number }) {
  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center justify-between text-sm font-medium text-primary">
        {label}
        <span className="font-mono text-xs font-normal text-tertiary">{value}%</span>
      </div>
      <div className="h-1.5 overflow-hidden rounded-full bg-quaternary">
        <div className="h-full rounded-full bg-brand-solid" style={{ width: `${value}%` }} />
      </div>
    </div>
  );
}

const TABS: FeatureTab[] = [
  {
    id: 'plan',
    label: 'Plan',
    content: (
      <Pane title="Plan the work" text="Break the goal into tasks and give each task an owner.">
        <Task done>Write the brief</Task>
        <Task>Agree on the scope</Task>
        <Task>Set a release date</Task>
      </Pane>
    ),
  },
  {
    id: 'build',
    label: 'Build',
    content: (
      <Pane title="Build it together" text="Follow each part as it moves from design to code.">
        <Bar label="Design" value={80} />
        <Bar label="Code" value={45} />
      </Pane>
    ),
  },
  {
    id: 'review',
    label: 'Review',
    content: (
      <Pane title="Review every change" text="Read what changed and decide what stays.">
        <Task done>Header spacing</Task>
        <Task done>Button colors</Task>
        <Task>Dark mode icons</Task>
        <Task>Empty state copy</Task>
      </Pane>
    ),
  },
  {
    id: 'ship',
    label: 'Ship',
    content: (
      <Pane title="Ship when it is ready" text="Release to everyone, or to a small group first.">
        <div className="flex items-center justify-between text-sm font-medium text-primary">
          Version 2.4
          <span className="rounded-full bg-success-primary px-2 py-0.5 text-xs font-medium text-utility-green-700">
            Live
          </span>
        </div>
      </Pane>
    ),
  },
];

// Replay starts on Plan and lets autoplay move to Build, then clicks Ship (a jump of two tabs) and back on Review.
const SCRIPT: [at: number, id: string][] = [
  [6500, 'ship'],
  [8500, 'review'],
];

export default function FeatureTabsDemo({ replay = 0 }: { replay?: number }) {
  const [value, setValue] = React.useState('plan');

  React.useEffect(() => {
    if (replay === 0) return;
    setValue('plan');
    const timers = SCRIPT.map(([at, id]) => window.setTimeout(() => setValue(id), at));
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay]);

  return (
    <div className="w-full max-w-[560px]">
      <FeatureTabs tabs={TABS} value={value} onValueChange={setValue} autoplay={5000} label="Product steps" />
    </div>
  );
}