"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

interface ProfileNudgeProps {
  healthScore: number;
  missingItems: string[];
}

const itemLinks: Record<string, { href: string; label: string }> = {
  "Has Photos": { href: "/manage/photos/photos-profile", label: "Add photos" },
  "Has Description": { href: "/manage/profile/personal-information", label: "Add a description" },
  "Has Rates": { href: "/manage/rates", label: "Set your rates" },
  "Has Services": { href: "/manage/profile/personal-information", label: "Add services" },
  "Is Verified": { href: "/manage/verification", label: "Get verified" },
  "Has Availability": { href: "/manage/availabilities", label: "Set availability" },
};

export default function ProfileNudge({ healthScore, missingItems }: ProfileNudgeProps) {
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const key = "profile-nudge-dismissed";
      if (sessionStorage.getItem(key) === "true") {
        setDismissed(true);
      }
    }
  }, []);

  if (dismissed || healthScore >= 80 || missingItems.length === 0) return null;

  const handleDismiss = () => {
    setDismissed(true);
    if (typeof window !== "undefined") {
      sessionStorage.setItem("profile-nudge-dismissed", "true");
    }
  };

  return (
    <div className="bg-gradient-to-r from-yellow-500/10 to-amber-500/5 border border-yellow-500/30 rounded-xl p-5 relative">
      <button
        onClick={handleDismiss}
        className="absolute top-3 right-3 text-text-muted hover:text-white transition-colors"
        aria-label="Dismiss"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>

      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center">
          <svg className="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="text-sm font-semibold text-yellow-400 mb-1">
            Complete Your Profile ({healthScore}%)
          </h3>
          <p className="text-xs text-text-muted mb-3">
            Complete your profile to rank higher in search results!
          </p>

          {/* Progress bar */}
          <div className="w-full bg-surface-light rounded-full h-2 mb-3">
            <div
              className="bg-gradient-to-r from-yellow-500 to-amber-500 h-2 rounded-full transition-all duration-500"
              style={{ width: `${healthScore}%` }}
            />
          </div>

          <div className="space-y-1.5">
            {missingItems.map((item) => {
              const link = itemLinks[item];
              if (!link) return null;
              return (
                <Link
                  key={item}
                  href={link.href}
                  className="flex items-center gap-2 text-xs text-text-muted hover:text-yellow-400 transition-colors group"
                >
                  <svg className="w-3.5 h-3.5 text-yellow-500/50 group-hover:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  {link.label}
                </Link>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}