"use client";

import { FLOCK_UI } from "@/lib/flock/ui-labels";
import type { FlockDisplayLine } from "@/modules/flock/quote-storage";

export interface FlockQuoteResultProps {
  lines: FlockDisplayLine[];
  reference?: string | null;
  onReset?: () => void;
}

function formatUsd(n: number): string {
  return n.toLocaleString("en-US", {
    style: "currency",
    currency: "USD",
    maximumFractionDigits: 0,
  });
}

/** Flock 两档对比结果卡（中文） */
export function FlockQuoteResult({
  lines,
  reference,
  onReset,
}: FlockQuoteResultProps) {
  const direct = lines.find((l) => l.tier === "flock_direct");
  const standard = lines.find((l) => l.tier === "standard");

  if (!direct && !standard) {
    return (
      <div className="rounded-lg border border-border bg-surface p-5 text-sm text-text-secondary">
        {FLOCK_UI.emptyResult}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-2">
        <div>
          <h2 className="text-lg font-semibold text-text-primary">
            {FLOCK_UI.resultTitle}
          </h2>
          {reference && (
            <p className="mt-1 text-xs text-text-secondary">
              {FLOCK_UI.reference} #{reference}
            </p>
          )}
        </div>
        {onReset && (
          <button
            type="button"
            onClick={onReset}
            className="rounded-md border border-border bg-surface px-3 py-1.5 text-sm text-text-primary"
          >
            {FLOCK_UI.buildAnother}
          </button>
        )}
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        {direct && (
          <article className="rounded-lg border border-primary/30 bg-[#1f2420] p-5 text-white shadow-card">
            <div className="mb-1 text-xs uppercase tracking-wide text-emerald-300">
              {FLOCK_UI.directTag}
            </div>
            <h3 className="text-xl font-semibold">{FLOCK_UI.directName}</h3>
            <p className="mt-3 text-2xl font-bold">
              {FLOCK_UI.pricesFrom} {formatUsd(direct.final_total_usd)}
            </p>
            <p className="mt-1 text-sm text-white/80">
              {FLOCK_UI.transit}：{direct.transitDescription || direct.transitDays}
            </p>
            <ul className="mt-4 space-y-2 text-sm text-white/90">
              {FLOCK_UI.directFeatures.map((f) => (
                <li key={f}>✓ {f}</li>
              ))}
            </ul>
          </article>
        )}

        {standard && (
          <article className="rounded-lg border border-border bg-surface p-5 shadow-card">
            <div className="mb-1 text-xs uppercase tracking-wide text-text-secondary">
              {FLOCK_UI.standardTag}
            </div>
            <h3 className="text-xl font-semibold text-text-primary">
              {FLOCK_UI.standardName}
            </h3>
            <p className="mt-3 text-2xl font-bold text-text-primary">
              {FLOCK_UI.pricesFrom} {formatUsd(standard.final_total_usd)}
            </p>
            <p className="mt-1 text-sm text-text-secondary">
              {FLOCK_UI.transit}：
              {standard.transitDescription || standard.transitDays}
            </p>
            <ul className="mt-4 space-y-2 text-sm text-text-secondary">
              {FLOCK_UI.standardFeatures.map((f, i) => (
                <li key={f}>
                  {i === 0 ? "✓" : "×"} {f}
                </li>
              ))}
            </ul>
            <p className="mt-3 text-xs text-text-secondary">
              {FLOCK_UI.standardNote}
            </p>
          </article>
        )}
      </div>
    </div>
  );
}