J-Board-Lite/src/app/(user)/store/streaming-plan-card.tsx

"use client";

import { useState } from "react";
import { Film, Search, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { StorePlanHeader } from "./plan-card-parts";
import { PlanAvailabilityBadges } from "./plan-availability-badges";
import { StreamingDetailDialog } from "./streaming-detail-dialog";
import type { StreamingPlan } from "./streaming-plan-types";

interface Props {
  plan: StreamingPlan;
}

export function StreamingPlanCard({ plan }: Props) {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <>
      <article
        id={`plan-${plan.id}`}
        className="surface-card surface-lift group relative scroll-mt-24 flex flex-col overflow-hidden rounded-xl text-left"
      >

        <StorePlanHeader
          eyebrow={
            <span className="inline-flex items-center gap-2 text-amber-700 dark:text-amber-300">
              <Film className="size-3.5" /> STREAMING
            </span>
          }
          name={plan.name}
          meta={plan.serviceName ? `${plan.serviceName} · ${plan.durationDays} 天` : `${plan.durationDays} 天`}
          price={`¥${plan.price.toFixed(0)}`}
          priceSuffix={`/${plan.durationDays}天`}
        />

        <div className="relative px-6">
          <div className="grid gap-2 sm:grid-cols-2">
            <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5">
              <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                <Film className="size-3.5 text-amber-600" /> 服务类型
              </p>
              <p className="mt-1 text-sm font-medium">{plan.serviceName ?? "精选流媒体"}</p>
            </div>
            <div className="rounded-lg border border-border bg-muted/40 px-3 py-2.5">
              <p className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                <Sparkles className="size-3.5 text-amber-600" /> 交付方式
              </p>
              <p className="mt-1 text-sm font-medium">支付后在订阅页查看</p>
            </div>
          </div>
        </div>

        <div className="mt-auto space-y-4 px-6 pb-6 pt-4">
          <PlanAvailabilityBadges
            totalLimit={plan.totalLimit}
            perUserLimit={plan.perUserLimit}
            remainingCount={plan.remainingCount}
            isAvailable={plan.isAvailable}
            unavailableLabel="暂时售罄"
          />

          <Button
            type="button"
            className="w-full"
            size="lg"
            onClick={() => setDialogOpen(true)}
          >
            <Search className="size-4" />
            查看详情与购买
          </Button>
        </div>
      </article>

      <StreamingDetailDialog open={dialogOpen} onOpenChange={setDialogOpen} plan={plan} />
    </>
  );
}