import {
  Card,
  CardContent,
  CardDescription,
  CardEyebrow,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import type { ResourcePickerOption } from "@/features/orders/resource-picker-options";

type ResourcePickerCardProps = {
  description: string;
  disabled?: boolean;
  isLoading?: boolean;
  label: string;
  selectedItem: ResourcePickerOption | null;
  title: string;
  onOpenPicker: () => void;
};

export function ResourcePickerCard({
  description,
  disabled = false,
  isLoading = false,
  label,
  selectedItem,
  title,
  onOpenPicker,
}: ResourcePickerCardProps) {
  return (
    <Card>
      <CardHeader>
        <CardEyebrow>Resource manager</CardEyebrow>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2 text-sm text-[var(--ink-strong)]">
          <span className="font-medium">{label}</span>
          <Button
            aria-label={selectedItem ? `更换${label}` : `选择${label}`}
            className="min-h-12 w-full justify-between rounded-[18px] border-[var(--border-strong)] bg-[var(--surface-muted)] px-4 text-left text-[var(--ink-strong)] shadow-none hover:bg-[var(--surface)]"
            disabled={disabled || isLoading}
            size="lg"
            variant="secondary"
            onClick={onOpenPicker}
          >
            {isLoading
              ? "正在加载资源..."
              : selectedItem
                ? `更换${label}`
                : `选择${label}`}
          </Button>
        </div>

        {selectedItem ? (
          <div className="rounded-[20px] border border-[var(--border-soft)] bg-[var(--surface-muted)] p-4">
            <div className="flex flex-wrap items-start gap-3">
              <div className="h-20 w-16 overflow-hidden rounded-[14px] bg-[rgba(74,64,53,0.08)]">
                {selectedItem.previewUri ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    alt={`${selectedItem.name} 预览图`}
                    className="h-full w-full object-cover"
                    src={selectedItem.previewUri}
                  />
                ) : null}
              </div>
              <div className="space-y-1">
                <p className="text-sm font-semibold text-[var(--ink-strong)]">
                  {selectedItem.name}
                </p>
                <p className="text-sm leading-6 text-[var(--ink-muted)]">
                  {selectedItem.description}
                </p>
              </div>
            </div>
            <div className="mt-3 flex flex-wrap gap-2">
              {selectedItem.tags.map((tag) => (
                <span
                  key={tag}
                  className="rounded-full bg-[rgba(110,98,84,0.08)] px-2.5 py-1 font-[var(--font-mono)] text-[11px] uppercase tracking-[0.18em] text-[var(--ink-muted)]"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>
        ) : (
          <p className="text-sm leading-6 text-[var(--ink-muted)]">
            通过资源管理器弹窗直接点选图片，选择后会在摘要卡中同步显示资源名称与提交 ID。
          </p>
        )}
      </CardContent>
    </Card>
  );
}