"use client";

import Link from "next/link";
import { AlertTriangle, BadgeCheck, ShieldCheck } from "lucide-react";
import type { ApiProfile } from "@/lib/api/types";

export default function KycStatusBanner({ profile }: { profile: ApiProfile }) {
  const status =
    profile.type === "seller"
      ? profile.seller_kyc?.status ?? null
      : profile.kyc_status;

  if (!status) {
    return (
      <div className="flex items-start gap-3 rounded-xl bg-amber-50 p-4 ring-1 ring-amber-200">
        <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
        <div className="flex-1 text-sm">
          <p className="font-medium text-amber-900">Complete your KYC</p>
          <p className="text-amber-800">
            Add your company details, GST and PAN below to start placing orders.
          </p>
        </div>
      </div>
    );
  }

  const v = status.toLowerCase();

  if (v === "approved") {
    return (
      <div className="flex items-start gap-3 rounded-xl bg-emerald-50 p-4 ring-1 ring-emerald-200">
        <BadgeCheck className="mt-0.5 h-5 w-5 shrink-0 text-emerald-600" />
        <div className="flex-1 text-sm">
          <p className="font-medium text-emerald-900">KYC verified</p>
          <p className="text-emerald-800">Your account is fully verified.</p>
        </div>
      </div>
    );
  }

  if (v === "rejected") {
    return (
      <div className="flex items-start gap-3 rounded-xl bg-red-50 p-4 ring-1 ring-red-200">
        <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
        <div className="flex-1 text-sm">
          <p className="font-medium text-red-900">KYC rejected</p>
          <p className="text-red-800">
            Please review your details and resubmit. Contact{" "}
            <Link href="/contact" className="underline">
              support
            </Link>{" "}
            if you need help.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="flex items-start gap-3 rounded-xl bg-blue-50 p-4 ring-1 ring-blue-200">
      <ShieldCheck className="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
      <div className="flex-1 text-sm">
        <p className="font-medium capitalize text-blue-900">KYC {v}</p>
        <p className="text-blue-800">
          We&apos;re reviewing your documents. You&apos;ll be notified once approved.
        </p>
      </div>
    </div>
  );
}