import { ShieldCheck } from "lucide-react";

import { cn } from "@/lib/utils";

interface ConditionCopy {
  label: string;
  description: string;
  toneClassName: string;
}

export interface ConditionConfidenceCardProps {
  condition?: string | null;
  flaws?: string[] | string | null;
  inspectionNotes?: string | null;
  className?: string;
}

const CONDITION_COPY: Record<string, ConditionCopy> = {
  NWT: {
    label: "New with tags",
    description: "Unworn item with original retail tags attached.",
    toneClassName: "bg-forest-50 text-forest-800 ring-forest-100",
  },
  NWOT: {
    label: "New without tags",
    description: "New item without retail tags; no expected wear from use.",
    toneClassName: "bg-forest-50 text-forest-800 ring-forest-100",
  },
  EUC: {
    label: "Excellent used condition",
    description: "Lightly used and carefully kept, with no obvious flaws expected.",
    toneClassName: "bg-forest-50 text-forest-800 ring-forest-100",
  },
  GUC: {
    label: "Good used condition",
    description: "Used item with normal signs of wear, still ready for regular use.",
    toneClassName: "bg-amber-50 text-amber-800 ring-amber-100",
  },
  Fair: {
    label: "Fair condition",
    description: "Visible wear is expected; review photos and measurements closely before buying.",
    toneClassName: "bg-orange-50 text-orange-800 ring-orange-100",
  },
  Poor: {
    label: "Poor condition",
    description: "Heavy wear or flaws are expected; best for buyers comfortable with visible issues.",
    toneClassName: "bg-red-50 text-red-700 ring-red-100",
  },
};

const FALLBACK_CONDITION: ConditionCopy = {
  label: "Condition details",
  description: "Review the seller photos, description, and measurements for the best read on this item.",
  toneClassName: "bg-slate-50 text-slate-700 ring-slate-100",
};

function cleanText(value?: string | null): string | null {
  const trimmed = value?.trim();
  return trimmed ? trimmed : null;
}

function normalizeFlaws(flaws?: string[] | string | null): string[] {
  const values = Array.isArray(flaws) ? flaws : flaws ? [flaws] : [];

  return values
    .map((flaw) => cleanText(flaw))
    .filter((flaw): flaw is string => flaw !== null);
}

export function ConditionConfidenceCard({
  condition,
  flaws,
  inspectionNotes,
  className,
}: ConditionConfidenceCardProps) {
  const conditionCode = cleanText(condition);
  const conditionCopy = conditionCode ? CONDITION_COPY[conditionCode] : null;
  const copy = conditionCopy ?? FALLBACK_CONDITION;
  const flawRows = normalizeFlaws(flaws);
  const normalizedInspectionNotes = cleanText(inspectionNotes);

  return (
    <section
      aria-labelledby="condition-confidence-heading"
      className={cn("rounded-lg border border-slate-200 bg-white p-5", className)}
    >
      <div className="flex items-start gap-3">
        <div
          className={cn(
            "flex size-9 shrink-0 items-center justify-center rounded-full ring-1",
            copy.toneClassName,
          )}
        >
          <ShieldCheck aria-hidden="true" className="size-4" />
        </div>
        <div className="min-w-0">
          <h2
            id="condition-confidence-heading"
            className="text-sm font-semibold uppercase tracking-wide text-slate-500"
          >
            Condition confidence
          </h2>
          <p className="mt-2 text-base font-semibold text-slate-900">{copy.label}</p>
          <p className="mt-1 text-sm leading-relaxed text-slate-600">{copy.description}</p>
          {!conditionCopy && conditionCode ? (
            <p className="mt-2 text-xs font-medium text-slate-500">
              Seller condition: {conditionCode}
            </p>
          ) : null}
        </div>
      </div>

      {flawRows.length > 0 ? (
        <div className="mt-5 border-t border-slate-100 pt-4">
          <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Flaws noted
          </h3>
          <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-600">
            {flawRows.map((flaw) => (
              <li key={flaw}>{flaw}</li>
            ))}
          </ul>
        </div>
      ) : null}

      {normalizedInspectionNotes ? (
        <div className="mt-5 border-t border-slate-100 pt-4">
          <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
            Inspection notes
          </h3>
          <p className="mt-2 text-sm leading-relaxed text-slate-600">
            {normalizedInspectionNotes}
          </p>
        </div>
      ) : null}
    </section>
  );
}