"use client";

import { ChevronRight } from "lucide-react";

export type PortalNavTarget = "network" | "services" | "live_youtube" | "live_tiktok" | "android";

type TFn = (zh: string, en: string) => string;

export type PipelineStep = {
  label: string;
  sub?: string;
  gradient: string;
  target?: PortalNavTarget;
};

type Props = {
  t: TFn;
  title: string;
  subtitle: string;
  steps: PipelineStep[];
  onNavigate?: (target: PortalNavTarget) => void;
};

export function LivePipelineStrip({ t, title, subtitle, steps, onNavigate }: Props) {
  return (
    <div className="rounded-2xl border border-violet-500/25 bg-gradient-to-br from-violet-500/10 via-zinc-950/40 to-fuchsia-500/5 p-6 shadow-lg shadow-violet-900/10">
      <h3 className="flex items-center gap-2 text-sm font-semibold text-white">{title}</h3>
      <p className="mt-2 text-xs text-zinc-400">{subtitle}</p>
      <div className="mt-6 flex flex-col items-center gap-4 sm:flex-row sm:flex-wrap sm:justify-center">
        {steps.map((step, i) => (
          <div key={step.label} className="flex items-center gap-4">
            {step.target && onNavigate ? (
              <button
                type="button"
                onClick={() => onNavigate(step.target!)}
                className={`flex min-h-[4rem] min-w-[7rem] flex-col items-center justify-center rounded-2xl bg-gradient-to-br px-4 py-2 text-center text-xs font-bold text-white shadow-lg ring-2 ring-white/10 transition hover:ring-violet-400/50 hover:brightness-110 ${step.gradient}`}
              >
                <span>{step.label}</span>
                {step.sub ? <span className="mt-1 text-[10px] font-normal text-white/80">{step.sub}</span> : null}
              </button>
            ) : (
              <div
                className={`flex min-h-[4rem] min-w-[7rem] flex-col items-center justify-center rounded-2xl bg-gradient-to-br px-4 py-2 text-center text-xs font-bold text-white shadow-lg ${step.gradient}`}
              >
                <span>{step.label}</span>
                {step.sub ? <span className="mt-1 text-[10px] font-normal text-white/80">{step.sub}</span> : null}
              </div>
            )}
            {i < steps.length - 1 ? <ChevronRight className="hidden h-5 w-5 text-zinc-600 sm:block" aria-hidden /> : null}
          </div>
        ))}
      </div>
      <p className="mt-4 text-center text-[10px] text-zinc-600">{t("点击高亮块可跳转到对应功能页", "Tap a highlighted step to open its page")}</p>
    </div>
  );
}