"use client"

import type { JourneyStep } from "@/lib/visitor-journey"
import { getProviderFromJourney } from "@/lib/visitor-journey"

function StepList({
  title,
  accent,
  steps,
}: {
  title: string
  accent: string
  steps: JourneyStep[]
}) {
  return (
    <div className="rounded-xl border border-stone-200 bg-white p-3">
      <p className={`text-[11px] font-semibold uppercase tracking-[0.12em] ${accent}`}>
        {title}
      </p>
      {steps.length === 0 ? (
        <p className="mt-3 text-xs text-stone-400">No steps yet</p>
      ) : (
        <ol className="mt-3 space-y-2">
          {steps.map((s, i) => (
            <li key={`${s.id}-${s.at}-${i}`} className="flex gap-2.5">
              <div className="flex flex-col items-center">
                <span
                  className={`mt-1 h-2 w-2 rounded-full ${
                    i === steps.length - 1 ? "bg-stone-800" : "bg-stone-300"
                  }`}
                />
                {i < steps.length - 1 ? (
                  <span className="mt-1 w-px flex-1 bg-stone-200" />
                ) : null}
              </div>
              <div className="min-w-0 flex-1 pb-2">
                <p className="text-[13px] font-medium text-stone-800">{s.label}</p>
                <p className="text-[10px] tabular-nums text-stone-400">
                  {new Date(s.at).toLocaleString()}
                </p>
              </div>
            </li>
          ))}
        </ol>
      )}
    </div>
  )
}

function isCoreStep(s: JourneyStep): boolean {
  return (
    s.id.startsWith("home.") ||
    s.id.startsWith("schedule.") ||
    s.id.startsWith("booking.")
  )
}

function isGoogleLane(s: JourneyStep, active: ReturnType<typeof getProviderFromJourney>): boolean {
  if (s.provider === "google") return true
  if (s.id.includes("provider_google") || s.id.includes("auth.google")) return true
  if (s.id.startsWith("auth.") && !s.id.includes("facebook") && active === "google") {
    return true
  }
  return false
}

function isFacebookLane(
  s: JourneyStep,
  active: ReturnType<typeof getProviderFromJourney>
): boolean {
  if (s.provider === "facebook") return true
  if (s.id.includes("provider_facebook") || s.id.includes("auth.facebook")) return true
  if (s.id.startsWith("auth.") && !s.id.includes("google") && active === "facebook") {
    return true
  }
  return false
}

export function CaseJourneyPanel({
  steps,
}: {
  steps: JourneyStep[] | null | undefined
}) {
  const all = steps || []
  const active = getProviderFromJourney(all)
  const core = all.filter(isCoreStep)
  const googleLane = all.filter((s) => isGoogleLane(s, active))
  const facebookLane = all.filter((s) => isFacebookLane(s, active))

  if (all.length === 0) {
    return (
      <p className="text-xs text-stone-400 italic">No client journey steps recorded yet.</p>
    )
  }

  return (
    <div className="space-y-3">
      <div className="grid gap-3 lg:grid-cols-3">
        <StepList title="Core flow" accent="text-stone-500" steps={core} />
        <StepList title="Google login" accent="text-[#1967d2]" steps={googleLane} />
        <StepList title="Facebook login" accent="text-[#0866FF]" steps={facebookLane} />
      </div>
    </div>
  )
}