import { useQuery } from "@tanstack/react-query";
import { useAuth } from "@/hooks/useAuth";
import { Award, Download, AlertTriangle, CheckCircle2, Clock, RefreshCw } from "lucide-react";
import { format, differenceInDays } from "date-fns";
import { router } from "@inertiajs/react";

interface CertificateWalletProps {
  email?: string | null;
}

const CertificateWallet = ({ email: emailProp }: CertificateWalletProps = {}) => {
  const { user } = useAuth();
  const effectiveEmail = emailProp || user?.email;

  const { data: certificates, isLoading } = useQuery({
    queryKey: ["delegate-certificates", effectiveEmail],
    enabled: !!effectiveEmail,
    queryFn: async () => {
      const res = await fetch(`/api/delegate/certificates?email=${encodeURIComponent(effectiveEmail!)}`);
      if (!res.ok) throw new Error("Failed to load certificates");
      const data = await res.json();
      return data || [];
    },
  });

  if (isLoading) {
    return (
      <div className="space-y-3">
        {[1, 2].map(i => (
          <div key={i} className="rounded-xl p-4 animate-pulse bg-card border border-border">
            <div className="h-4 rounded w-2/3 mb-2 bg-muted" />
            <div className="h-3 rounded w-1/3 bg-muted" />
          </div>
        ))}
      </div>
    );
  }

  if (!certificates?.length) {
    return (
      <div className="rounded-xl p-8 text-center bg-card border border-border">
        <Award className="w-10 h-10 mx-auto mb-3 text-muted-foreground/30" />
        <p className="text-sm text-muted-foreground">No certificates found.</p>
      </div>
    );
  }

  const getExpiryInfo = (cert: any) => {
    if (cert.status === "awaiting_upload") {
      return { label: "Pending", cls: "text-amber-500 bg-amber-500/10", icon: Clock };
    }
    const expiresAt = cert.expires_at;
    if (!expiresAt) return { label: "No Expiry", cls: "text-muted-foreground bg-muted", icon: CheckCircle2 };
    const days = differenceInDays(new Date(expiresAt), new Date());
    if (days < 0) return { label: "Expired", cls: "text-destructive bg-destructive/10", icon: AlertTriangle };
    if (days <= 30) return { label: `${days} day${days !== 1 ? "s" : ""} left`, cls: "text-amber-500 bg-amber-500/10", icon: Clock };
    if (days <= 90) return { label: `${days} day${days !== 1 ? "s" : ""} left`, cls: "text-primary bg-primary/10", icon: Clock };
    return { label: `${days} day${days !== 1 ? "s" : ""} left`, cls: "text-green-500 bg-green-500/10", icon: CheckCircle2 };
  };

  const expired = certificates.filter((c: any) => c.expires_at && differenceInDays(new Date(c.expires_at), new Date()) < 0);
  const expiringSoon = certificates.filter((c: any) => {
    if (!c.expires_at) return false;
    const d = differenceInDays(new Date(c.expires_at), new Date());
    return d >= 0 && d <= 30;
  });

  return (
    <div>
      {(expired.length > 0 || expiringSoon.length > 0) && (
        <div className={`rounded-xl p-4 mb-4 flex items-start gap-3 border ${
          expired.length > 0 ? "bg-destructive/5 border-destructive/30" : "bg-amber-500/5 border-amber-500/30"
        }`}>
          <AlertTriangle className={`w-5 h-5 shrink-0 mt-0.5 ${expired.length > 0 ? "text-destructive" : "text-amber-500"}`} />
          <div>
            <p className={`text-sm font-semibold ${expired.length > 0 ? "text-destructive" : "text-amber-600 dark:text-amber-400"}`}>
              {expired.length > 0 && `${expired.length} certificate${expired.length > 1 ? "s" : ""} expired`}
              {expired.length > 0 && expiringSoon.length > 0 && " · "}
              {expiringSoon.length > 0 && `${expiringSoon.length} expiring within 30 days`}
            </p>
            <p className={`text-xs mt-0.5 ${expired.length > 0 ? "text-destructive/80" : "text-amber-600/80 dark:text-amber-400/80"}`}>
              Book a recertification course to stay compliant.
            </p>
          </div>
        </div>
      )}

      <div className="space-y-3">
        {certificates.map((cert: any) => {
          const info = getExpiryInfo(cert);
          const Icon = info.icon;
          const isExpiredOrExpiring = cert.expires_at && differenceInDays(new Date(cert.expires_at), new Date()) <= 30;

          return (
            <div key={cert.id} className="rounded-xl p-4 bg-card border border-border">
              <div className="flex items-start gap-4">
                <div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${info.cls.split(" ").slice(1).join(" ")}`}>
                  <Award className={`w-5 h-5 ${info.cls.split(" ")[0]}`} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-start justify-between gap-2">
                    <h3 className="text-sm font-semibold text-foreground">
                      {cert.courses?.title || cert.qualification_name || "Certificate"}
                    </h3>
                    <span className={`text-[10px] px-2 py-0.5 rounded-full font-semibold inline-flex items-center gap-1 shrink-0 ${info.cls}`}>
                      <Icon className="w-3 h-3" /> {info.label}
                    </span>
                  </div>
                  {cert.status === "awaiting_upload" ? (
                    <p className="text-xs text-amber-600 dark:text-amber-400 mt-1.5">
                      Awaiting certificate from awarding body — typically 2 weeks from course completion.
                    </p>
                  ) : (
                    <>
                      <div className="flex flex-wrap gap-x-4 gap-y-1 mt-1.5">
                        {cert.certificate_number && (
                          <span className="text-xs font-mono text-muted-foreground">#{cert.certificate_number}</span>
                        )}
                        <span className="text-xs text-muted-foreground">
                          Issued: {format(new Date(cert.issued_at), "d MMM yyyy")}
                        </span>
                        {cert.expires_at && (
                          <span className="text-xs text-muted-foreground">
                            Expires: {format(new Date(cert.expires_at), "d MMM yyyy")}
                          </span>
                        )}
                      </div>
                      <div className="flex gap-2 mt-2">
                        {cert.certificate_url && (
                          <a href={cert.certificate_url} target="_blank" rel="noopener noreferrer"
                            className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-lg bg-primary/10 text-primary">
                            <Download className="w-3 h-3" /> Download
                          </a>
                        )}
                        {isExpiredOrExpiring && cert.courses?.slug && (
                          <button
                            onClick={() => router.visit(`/course/${cert.courses.slug}`)}
                            className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-lg bg-accent text-accent-foreground">
                            <RefreshCw className="w-3 h-3" /> Recertify
                          </button>
                        )}
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CertificateWallet;