import { formatCount, formatRate, formatWindow, funnelStateLabel } from "./format";
import { Section } from "./section";
import type { FunnelData, StatusNotice, ThemeName, ViewState } from "./types";

export type CauseWiseFunnelProps = {
  funnel?: FunnelData | null;
  theme?: ThemeName;
  state?: ViewState;
  error?: StatusNotice | null;
  className?: string;
  headingLevel?: 2 | 3;
};

export function CauseWiseFunnel({
  funnel,
  theme,
  state = "ready",
  error,
  className,
  headingLevel,
}: CauseWiseFunnelProps) {
  const stateLabel = funnelStateLabel(funnel?.displayState);
  const windowLabel = formatWindow(funnel?.conversionWindow);
  const steps = funnel?.steps?.filter(isStep) ?? [];
  const entry = funnel?.entryVisitors ?? 0;

  return (
    <Section
      title={funnel?.name ?? "Funnel"}
      description={funnel?.overallConversionRateDefinition}
      theme={theme}
      state={state}
      error={error}
      empty={!funnel}
      emptyMessage="No funnel was included."
      className={className}
      headingLevel={headingLevel}
    >
      {funnel ? (
        <>
          <dl className="cw-inline-metrics">
            <div>
              <dt>Entered</dt>
              <dd>{formatCount(funnel.entryVisitors)}</dd>
            </div>
            <div>
              <dt>Completed</dt>
              <dd>{formatCount(funnel.completionCount)}</dd>
            </div>
            <div>
              <dt>Completion rate</dt>
              <dd>{formatRate(funnel.overallConversionRate)}</dd>
            </div>
          </dl>
          <ul className="cw-meta">
            {stateLabel ? <li>Status: {stateLabel}</li> : null}
            {funnel.isActive === false ? <li>Inactive</li> : null}
            {windowLabel ? <li>Window: {windowLabel}</li> : null}
            {funnel.medianConversionTime ? <li>Median time: {funnel.medianConversionTime}</li> : null}
            {funnel.largestDropOff ? (
              <li>
                Largest drop-off: {funnel.largestDropOff.name}
                {funnel.largestDropOff.dropoffCount != null
                  ? ` (${formatCount(funnel.largestDropOff.dropoffCount)})`
                  : ""}
              </li>
            ) : null}
          </ul>
          {steps.length > 0 ? (
            <ol className="cw-steps">
              {steps.map((step) => {
                const width = entry > 0 ? Math.max(4, Math.round((step.visitors / entry) * 100)) : 4;
                return (
                  <li key={step.stepId}>
                    <div className="cw-step-head">
                      <span>{step.name}</span>
                      <span>
                        {formatCount(step.visitors)} visitors
                        {step.continuedPct == null ? "" : `, ${formatRate(step.continuedPct)} from previous`}
                      </span>
                    </div>
                    <div className="cw-step-track" aria-hidden="true">
                      <span className="cw-step-fill" style={{ width: `${width}%` }} />
                    </div>
                  </li>
                );
              })}
            </ol>
          ) : (
            <p className="cw-note">Step detail was not included. Pass funnel analytics steps to show each stage.</p>
          )}
        </>
      ) : null}
    </Section>
  );
}

function isStep(value: unknown): value is NonNullable<FunnelData["steps"]>[number] {
  if (!value || typeof value !== "object") return false;
  const step = value as Record<string, unknown>;
  return typeof step.stepId === "string" && typeof step.name === "string" && typeof step.visitors === "number";
}