"use client"

import Link from "next/link"
import { Lightbulb, PackageCheck } from "lucide-react"

import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { SalesFreeIssueSuggestion } from "@/types/sales"

export function FreeIssuePromotionSuggestions({ suggestion }: { suggestion: SalesFreeIssueSuggestion | null }) {
  if (!suggestion || suggestion.lines.length === 0) {
    return (
      <div className="rounded-2xl border border-dashed p-6 text-sm text-muted-foreground">
        No free-issue suggestions were generated for this slip yet.
      </div>
    )
  }

  return (
    <div className="rounded-2xl border p-4">
      <div className="mb-4 flex items-center justify-between gap-3">
        <div>
          <div className="inline-flex items-center gap-2 rounded-full bg-amber-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-amber-700">
            <Lightbulb className="size-3.5" />
            Suggestion only
          </div>
          <h2 className="mt-2 text-lg font-semibold text-foreground">Free-issue promotions</h2>
          <p className="text-sm text-muted-foreground">These are suggestions only. You can review them before creating a free issue.</p>
        </div>
        <Link href="/dashboard/sales/free-issues/new" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
          Create free issue
        </Link>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        {suggestion.lines.map((line) => (
          <div key={line.salesSlipLineId} className="rounded-xl border bg-muted/20 p-4">
            <div className="flex items-start justify-between gap-3">
              <div>
                <div className="font-medium text-foreground">{line.itemName}</div>
                <div className="text-sm text-muted-foreground">{line.itemSku} • Qty {line.qty}</div>
              </div>
              <div className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Free issue</div>
            </div>

            <div className="mt-3 flex flex-wrap gap-2 text-sm">
              {line.rewardOptions.map((option, index) => (
                <span key={option.itemId} className={cn("inline-flex items-center gap-1 rounded-full border px-3 py-1", index === 0 && "border-primary bg-primary/5 text-primary")}>
                  {index === 0 ? <PackageCheck className="size-3.5" /> : null}
                  {option.name}
                </span>
              ))}
            </div>

            <div className="mt-3 text-sm text-muted-foreground">
              Free qty: <span className="font-medium text-foreground">{line.suggestedFreeQty.toFixed(2)}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
