chajia/components/priority1/feathery-card.tsx

"use client";

import type { ReactNode } from "react";
import { Truck, Van } from "@phosphor-icons/react";
import type { Priority1ShipmentType } from "@/workers/rpa/priority1/shipment-types";

interface FeatheryCardProps {
  label: string;
  description?: string;
  selected: boolean;
  disabled?: boolean;
  onClick: () => void;
}

/** 仿 Priority1 Feathery 卡片：选中黑底白字 */
export function FeatheryCard({
  label,
  description,
  selected,
  disabled,
  onClick,
}: FeatheryCardProps) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onClick}
      className={`flex min-h-[88px] flex-col items-start justify-center rounded-md border-2 px-4 py-3 text-left transition-colors ${
        selected
          ? "border-black bg-black text-white"
          : "border-neutral-300 bg-white text-neutral-900 hover:border-neutral-500"
      } ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
    >
      <span className="text-sm font-semibold">{label}</span>
      {description ? (
        <span
          className={`mt-1 text-xs ${selected ? "text-neutral-300" : "text-neutral-500"}`}
        >
          {description}
        </span>
      ) : null}
    </button>
  );
}

export function FeatheryCardGrid({
  children,
  cols = 3,
}: {
  children: ReactNode;
  cols?: 2 | 3;
}) {
  return (
    <div
      className={`grid gap-3 ${cols === 2 ? "sm:grid-cols-2" : "sm:grid-cols-2 lg:grid-cols-3"}`}
    >
      {children}
    </div>
  );
}

function ShipmentIcon({
  type,
  selected,
}: {
  type: Priority1ShipmentType;
  selected: boolean;
}) {
  const color = selected ? "text-white" : "text-neutral-900";
  const size = 48;
  if (type === "expedited") {
    return <Van size={size} weight="regular" className={color} aria-hidden />;
  }
  return <Truck size={size} weight="regular" className={color} aria-hidden />;
}

/** Step1 运输类型三卡 — 对齐官网布局 */
export function ShipmentTypeCard({
  title,
  description,
  type,
  selected,
  disabled,
  onSelect,
}: {
  title: string;
  description: string;
  type: Priority1ShipmentType;
  selected: boolean;
  disabled?: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      disabled={disabled}
      onClick={onSelect}
      className={`relative flex min-h-[220px] flex-col items-center rounded-sm border px-4 py-5 text-center transition-colors ${
        selected
          ? "border-black bg-black text-white"
          : "border-neutral-300 bg-white text-neutral-900 hover:border-neutral-500"
      } ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}
    >
      <span
        className={`absolute left-3 top-3 h-4 w-4 rounded-full border-2 ${
          selected
            ? "border-[#FFD200] bg-[#FFD200]"
            : "border-neutral-400 bg-white"
        }`}
        aria-hidden
      />
      <div className="mb-3 mt-2">
        <ShipmentIcon type={type} selected={selected} />
      </div>
      <span className="text-base font-semibold">{title}</span>
      <p
        className={`mt-2 text-xs leading-relaxed ${
          selected ? "text-neutral-200" : "text-neutral-600"
        }`}
      >
        {description}
      </p>
    </button>
  );
}

export function P1FieldLabel({
  children,
  required,
  htmlFor,
}: {
  children: ReactNode;
  required?: boolean;
  htmlFor?: string;
}) {
  return (
    <label
      htmlFor={htmlFor}
      className="mb-1 block text-sm italic text-neutral-900"
    >
      {children}
      {required ? <span className="text-[#c41230]"> *</span> : null}
    </label>
  );
}

export function P1SectionTitle({
  step,
  title,
}: {
  step: 1 | 2;
  title: string;
}) {
  return (
    <div className="mb-4 border-b border-neutral-200 pb-3">
      <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
        Step {step}
      </p>
      <h3 className="mt-1 text-lg font-semibold text-neutral-900">{title}</h3>
    </div>
  );
}

/** Step 2 进度条 — 对齐官网「Step 2 of 2」黑条 */
export function P1Step2Progress({ label }: { label: string }) {
  return (
    <div className="mb-4">
      <p className="text-xs font-medium text-neutral-600">{label}</p>
      <div className="mt-2 h-1.5 w-full rounded-sm bg-black" aria-hidden />
    </div>
  );
}

/** 总重量输入 — 右侧「磅」后缀 */
export function P1WeightField({
  id,
  label,
  required,
  value,
  disabled,
  error,
  unitLabel = "磅",
  onChange,
}: {
  id: string;
  label: string;
  required?: boolean;
  value: string;
  disabled?: boolean;
  error?: string;
  unitLabel?: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="space-y-1">
      <P1FieldLabel required={required} htmlFor={id}>
        {label}
      </P1FieldLabel>
      <div className="flex">
        <input
          id={id}
          type="text"
          disabled={disabled}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className={`h-11 min-w-0 flex-1 rounded-l-sm border border-r-0 bg-neutral-100 px-3 text-sm focus:border-neutral-600 focus:outline-none disabled:opacity-60 ${
            error ? "border-red-500" : "border-neutral-400"
          }`}
        />
        <span className="flex h-11 shrink-0 items-center rounded-r-sm bg-neutral-700 px-3 text-sm font-medium text-white">
          {unitLabel}
        </span>
      </div>
      {error ? <p className="text-xs text-red-600">{error}</p> : null}
    </div>
  );
}

/** 官网黄色 GET INSTANT QUOTES 主按钮 */
export function P1InstantQuotesButton({
  loading,
  disabled,
  children,
  onClick,
  type = "button",
  className = "",
}: {
  loading?: boolean;
  disabled?: boolean;
  children: ReactNode;
  onClick?: () => void;
  type?: "button" | "submit";
  className?: string;
}) {
  return (
    <button
      type={type}
      disabled={disabled || loading}
      onClick={onClick}
      className={`w-full rounded-sm bg-[#FFD200] px-6 py-4 text-center text-base font-black uppercase tracking-wide text-black shadow-sm transition-opacity hover:bg-[#f5c800] disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
    >
      {loading ? "处理中…" : children}
    </button>
  );
}

/** @deprecated 使用 P1InstantQuotesButton */
export function P1SubmitButton({
  loading,
  disabled,
  children,
  onClick,
}: {
  loading?: boolean;
  disabled?: boolean;
  children: ReactNode;
  onClick?: () => void;
}) {
  return (
    <P1InstantQuotesButton loading={loading} disabled={disabled} onClick={onClick}>
      {children}
    </P1InstantQuotesButton>
  );
}

/** Step1/2 底部固定 CTA 栏 */
export function P1StickyActionBar({
  children,
  hint,
}: {
  children: ReactNode;
  hint?: string;
}) {
  return (
    <div className="sticky bottom-0 z-10 -mx-4 mt-6 border-t border-neutral-200 bg-neutral-50/95 px-4 py-4 backdrop-blur-sm md:-mx-6 md:px-6">
      {children}
      <p className="mt-2 text-center text-xs text-neutral-500">
        {hint ?? "填写完成后点击按钮进入下一步或提交询价"}
      </p>
    </div>
  );
}