"use client";

import VerifyButton from "@/components/common/VerifyButton";
import { Card } from "@/components/ui/card";
import Image from "next/image";
import { socialIcons } from "@/dummyData/data";

import {
  User,
  Calendar,
  Ruler,
  Heart,
  Sparkles,
  BookOpen,
  Globe,
  MapPin,
  PhoneCall
} from "lucide-react";

import { useState } from "react";
import { MdImageNotSupported } from "react-icons/md";
import CustomButton from "@/components/common/CustomButton";
import CustomDialog from "@/components/common/CustomDialog";
import ShareBoxContent from "@/components/constend/shareBox";
import SharedProfileNavSection from "./ShareProfileNev";
import {
  PublicProfileData,
} from "@/app/(CV)/type/shareProfileType";
import { sections } from "@/components/common/ProfileEditNevSection";

interface Props {
  data: PublicProfileData; // replace with ProfileDataType once types are fixed
}

const SharedProfileClient = ({ data }: Props) => {
  const [selectedSection, setSelectedSection] = useState(sections[0]);
  const [shareOpen, setShareOpen] = useState(false);

  
  const linkColumn = Math.min(data?.links?.length || 1, 4);

  const column1 = [
    {
      id: 1,
      title: "Experience",
      value: data?.years_of_experience || "—",
      icon: <User className="h-4 w-4 text-blue-500" />,
    },
    {
      id: 2,
      title: "Current Role Duration",
      value: data?.current_role_duration || "—",
      icon: <Calendar className="h-4 w-4 text-indigo-500" />,
    },
    {
      id: 3,
      title: "Hourly Charged",
      value: data?.hourly_charged || "—",
      icon: <Ruler className="h-4 w-4 text-emerald-500" />,
    },
    {
      id: 4,
      title: "Monthly Expected",
      value: data?.monthly_expected || "—",
      icon: <Heart className="h-4 w-4 text-rose-500" />,
    },
    {
      id: 5,
      title: "Worked With",
      value: `${data.experiences?.length.toString()} Companies`,
      icon: <Sparkles className="h-4 w-4 text-amber-500" />,
    },
    {
      id: 6,
      title: "Higher Education",
      value: data?.higher_education?.degree_name || "—",
      icon: <BookOpen className="h-4 w-4 text-purple-500" />,
    },
    {
      id: 7,
      title: "Certificates Course",
      value: `${data.certificates?.length.toString()} Certificates`,
      icon: <Globe className="h-4 w-4 text-sky-500" />,
    },
    {
      id: 8,
      title: "Awards",
      value: `${data.awards?.length.toString()} Awards`,
      icon: <MapPin className="h-4 w-4 text-cyan-500" />,
    },
    {
      id: 9,
      title: "Professional Skills",
      value: data?.emergency_contact || "—",
      icon: <PhoneCall className="h-4 w-4 text-teal-500" />,
    },
    {
      id: 10,
      title: "Portfolio Links",
      value: `${data.links?.length.toString()} Links`,
    },
  ];

  const getSocialIcon = (platform?: string) =>
    socialIcons[platform?.toLowerCase() ?? ""] || (
      <MdImageNotSupported className="h-8 w-8" />);

  return (
    <div className="bg-expertise-box-bg font-bricolage mt-15 h-full w-full pt-2">
      <div className="m-auto h-full w-[99%] rounded-xl  bg-expertise-box-bg py-5">
        <div className="mx-auto grid w-[95vw] grid-cols-1 gap-5 lg:grid-cols-[.3fr_1fr] xl:w-[90vw]">
          {/* first  */}
          <div className="font-bricolage flex flex-col gap-5">
            {/* profile image */}
            <div className="">
              <Card className="relative flex aspect-square flex-col items-center justify-center overflow-hidden rounded-xl border-none p-0">
                <div className="">
                  <Image
                    src={data?.image?.toString() || ""}
                    alt="Default profile"
                    fill
                    className="object-cover"
                  />
                </div>
              </Card>
            </div>
            {/* intro details */}
            <div>
              <Card className="flex min-h-100 w-full max-w-[400px] flex-col gap-3 border-none pt-3">
  
                <div className="font-poppins flex w-full flex-1 flex-col">
                  <div className="border-border flex items-center gap-2 px-4 py-4 text-[16px]">
                    <span className="font-medium">{data.name}</span>
                  </div>
                  <div className="border-border flex gap-1 border-t px-4 py-4 text-[16px]">
                    I am a
                    <div className="font-semibold">
                      {data?.profession?.name || "N/A"}
                    </div>
                  </div>
                  <div className="border-border flex gap-1 border-t px-4 py-4 text-[16px] font-semibold">
                    {data?.years_of_experience || "0"} of Experience
                  </div>
                  <div className="border-border flex gap-1 border-t px-4 py-4 text-[16px] font-semibold">
                    {data.phone ||
                      //data?.phone
                      "N/A" ||
                      "N/A"}
                  </div>
                  <div className="border-border flex gap-1 border-t px-4 py-4 text-[16px] font-semibold">
                    {data.email ||
                      // data?.email
                      "N/A" ||
                      "N/A"}
                    <div>
                      <VerifyButton isVerify={true} />
                    </div>
                  </div>
                  <div className="border-border flex gap-1 border-t px-4 py-4 text-[16px] font-semibold">
                    {data?.location || "N/A"}
                  </div>
                </div>
              </Card>
            </div>
            {/* Social Media */}
           {/* <div>
              <Card className="w-full max-w-[400px] border-none p-0">
                 <div className="w-full overflow-hidden rounded-xl border border-gray-300">
                  <ul
                      className="grid border-l border-t border-gray-300"
                      style={{ gridTemplateColumns: `repeat(${linkColumn}, minmax(0, 1fr))` }}
                    >
                      {data?.links?.map((item) => (
                        <li
                          key={item.uuid}
                          className="flex justify-center border-r border-b border-gray-300 py-5"
                        >
                          <a
                            href={item.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            title={item.platform}
                            className="text-gray-600 transition-all duration-200 hover:scale-110 hover:text-primary"
                          >
                            {getSocialIcon(item.platform)}
                          </a>
                        </li>
                      ))}
                    </ul>
                </div>
              </Card>
            </div> */}
          </div>
          {/* second */}
          <div className="flex w-full flex-col gap-2">
            <div className="bg-white flex flex-col rounded-xl">
              <div className="flex flex-col p-5">
                <div className="flex w-full items-center justify-between">
                   <div className="font-manrope text-[30px] font-extrabold">
                    {data.profession?.name}
                  </div>

                  <div className="flex gap-2">
                    <div>
                      <CustomButton
                        variant="download"
                        btnText="Download Resume"
                        addAnimation={false}
                      />
                    </div>
                    <div>
                      <CustomButton
                        btnText="share"
                        variant="share"
                        addAnimation={false}
                        onClick={() => setShareOpen(true)}
                      />
                    </div>
                  </div>
                </div>
               
              </div>

              <Card className="bg-light-box w-full border-none m-4 w-[calc(100%-2rem)]">
                <div className="grid grid-cols-1 sm:grid-cols-5">
                  {column1.map((item, index) => {
                    const isLastRow =
                      index >= column1.length - (column1.length % 5 || 5);
                    return (
                      <div
                        key={item.id}
                        className={`flex w-full items-center gap-3.5 ${index === 4 ? "" : "border-r"} border-gray-200 p-3.5 sm:last:border-r-0 ${!isLastRow ? "border-b border-gray-200" : ""}`}
                      >
                        <div className="flex flex-col">
                          <span className="mb-2 text-[14px] text-gray-500">
                            {item.title}
                          </span>
                          <span className="text-[14px] font-semibold text-gray-800 dark:text-zinc-200">
                            {item.value}
                          </span>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </Card>
            </div>
            <div>
              <SharedProfileNavSection data={data} linkColumn={linkColumn} />
            </div>
          </div>
        </div>
      </div>

      <CustomDialog
        variant="custom"
        title="Share Profile"
        open={shareOpen}
        onClose={() => setShareOpen(false)}
        onSubmit={() => {}}
      >
        <ShareBoxContent
          profileSlug={data.username}
          profileName={data.name}
          shareUrl={typeof window !== "undefined" ? window.location.href : undefined}
        />
      </CustomDialog>
    </div>
  );
};

export default SharedProfileClient;