"use client";

import { useState } from "react";
import Image from "next/image";
import { FiMessageSquare, FiPhone } from "react-icons/fi";
import { FaStar } from "react-icons/fa";
import StickyHeader from "@/components/Componentes/sticky-header";
import NavigationButton from "@/components/Componentes/navigation-button";
import { PageBackground } from "@/components/Componentes/page-background";
import SupportSheet from "@/components/Componentes/support-sheet";
import { useI18n } from "@/translations/provider";

export default function MarriageAdvisorsPage() {
  const { dictionary: t } = useI18n();
  const [isSupportOpen, setIsSupportOpen] = useState(false);

  const mainStyle = {
    backgroundImage: `url("/assets/images/islamic_pattern_2_2892_3864.svg")`,
    backgroundColor: "#F5F5F5",
    backgroundRepeat: "repeat-y",
    backgroundSize: "100% auto",
  };

  const advisors = [
    {
      id: "hasti-masoudi",
      name: t["Dr. Hasti Masoudi"] || "Dr. Hasti Masoudi",
      specialty:
        t["Specialist in clinical psychology"] ||
        "Specialist in clinical psychology",
      avatar: "/assets/images/female_avatar.svg",
      rating: "3.2",
      tagsRow1: [
        t["Personal Development"] || "Personal Development",
        t["Team Manager"] || "Team Manager",
        t["Science"] || "Science",
      ],
      tagsRow2: [
        t["Manager"] || "Manager",
        t["Team Manager"] || "Team Manager",
        t["Science"] || "Science",
      ],
      online: true,
    },
    {
      id: "ali-rezaei",
      name: t["Dr. Ali Rezaei"] || "Dr. Ali Rezaei",
      specialty:
        t["Family & marriage counselor"] || "Family & marriage counselor",
      avatar: "/assets/images/Avatar Image.png",
      rating: "4.9",
      tagsRow1: [
        t["Premarital Counselling"] || "Premarital Counselling",
        t["Conflict Resolution"] || "Conflict Resolution",
      ],
      tagsRow2: [
        t["Behavioral Therapy"] || "Behavioral Therapy",
        t["Self-Awareness"] || "Self-Awareness",
      ],
      online: true,
    },
    {
      id: "sara-alavi",
      name: t["Dr. Sara Alavi"] || "Dr. Sara Alavi",
      specialty:
        t["Relationship & intimacy coach"] || "Relationship & intimacy coach",
      avatar: "/assets/images/Ellipse 370.png",
      rating: "4.7",
      tagsRow1: [
        t["Emotional Health"] || "Emotional Health",
        t["Communication Skills"] || "Communication Skills",
      ],
      tagsRow2: [
        t["Relationship Coach"] || "Relationship Coach",
        t["Personal Development"] || "Personal Development",
      ],
      online: false,
    },
  ];

  return (
    <>
      <PageBackground />
      <main
        className="-mx-[17px] flex min-h-screen flex-col pb-10"
        style={mainStyle}
      >
        <StickyHeader>
          <div className="flex items-center justify-between gap-3">
            <NavigationButton
              variant="transparent"
              icon="back"
              iconLabel={t["Go back"]}
            />
            <h1
              className="min-w-0 flex-1 text-center font-semibold text-[14px] leading-[16px] text-white"
              style={{ fontFamily: "'Segoe UI', sans-serif" }}
            >
              {t["Marriage advisors"]}
            </h1>
            <div className="size-10 shrink-0" />
          </div>
        </StickyHeader>

        <section className="px-[17px] pb-32 pt-5 flex flex-col items-center gap-4">
          {advisors.map((advisor) => (
            <div
              key={advisor.id}
              className="flex flex-col items-center py-[13px] gap-[13px] w-[343px] bg-white rounded-[15px] shadow-[0px_4px_12px_rgba(0,0,0,0.05)] border border-[#EBEBEB]"
            >
              {/* Top Frame containing Left (Avatar + Info) and Right (Rating) and Actions */}
              <div className="flex flex-col items-start p-0 gap-[11px] w-[317px]">
                {/* Header Row */}
                <div className="flex flex-row items-start justify-between w-full h-[45px]">
                  {/* Left part: Avatar + Info */}
                  <div className="flex flex-row items-center gap-2.5 h-[45px]">
                    {/* Avatar Container */}
                    <div className="relative w-[45px] h-[45px] shrink-0">
                      <Image
                        src={advisor.avatar}
                        alt={advisor.name}
                        width={45}
                        height={45}
                        className="w-full h-full rounded-full object-cover"
                      />
                      {/* Status indicator dot */}
                      {advisor.online && (
                        <div className="absolute top-0 right-0 w-[12px] h-[12px] rounded-full bg-white flex items-center justify-center select-none pointer-events-none">
                          <span className="absolute w-[10px] h-[10px] rounded-full bg-[#31CB2E] opacity-20 animate-ping" />
                          <span className="w-[6px] h-[6px] rounded-full bg-[#31CB2E]" />
                        </div>
                      )}
                    </div>

                    {/* Name + Title Info */}
                    <div className="flex flex-col items-start gap-[2px] h-[35px]">
                      <h3
                        className="font-bold text-[16px] leading-[20px] text-[#111111] text-start font-sans truncate w-[170px]"
                        style={{ fontFamily: "'Segoe UI', sans-serif" }}
                      >
                        {advisor.name}
                      </h3>
                      <p
                        className="font-semibold text-[10px] leading-[13px] text-[#8B8B8B] text-start font-sans truncate w-[170px]"
                        style={{ fontFamily: "'Segoe UI', sans-serif" }}
                      >
                        {advisor.specialty}
                      </p>
                    </div>
                  </div>

                  {/* Right part: Rating */}
                  <div className="flex flex-row justify-center items-center gap-[4px] h-[20px] shrink-0">
                    <FaStar className="size-[14px] text-[#ECA533] shrink-0" />
                    <span
                      className="font-semibold text-[10px] leading-[13px] text-[#ECA533] font-sans text-center"
                      style={{ fontFamily: "'Segoe UI', sans-serif" }}
                    >
                      {advisor.rating}
                    </span>
                  </div>
                </div>

                {/* Actions Row */}
                <div className="flex flex-row items-center gap-[7px] h-[22px]">
                  {/* Text Contact Button */}
                  <button
                    type="button"
                    onClick={() => setIsSupportOpen(true)}
                    className="flex flex-row justify-center items-center px-2 py-0.5 gap-1.5 h-[22px] bg-[rgba(14,177,60,0.1)] rounded-[20px] text-[#0EB13C] font-semibold text-[10px] leading-[13px] transition-transform active:scale-95 cursor-pointer border-none"
                  >
                    <FiMessageSquare className="size-3 text-[#0EB13C] shrink-0" />
                    <span style={{ fontFamily: "'Segoe UI', sans-serif" }}>
                      {t["Text"] || "Text"}
                    </span>
                  </button>

                  {/* Voice Call Contact Button */}
                  <button
                    type="button"
                    onClick={() => setIsSupportOpen(true)}
                    className="flex flex-row justify-center items-center px-2 py-0.5 gap-1.5 h-[22px] bg-[rgba(14,177,60,0.1)] rounded-[20px] text-[#0EB13C] font-semibold text-[10px] leading-[13px] transition-transform active:scale-95 cursor-pointer border-none"
                  >
                    <FiPhone className="size-3 text-[#0EB13C] shrink-0" />
                    <span style={{ fontFamily: "'Segoe UI', sans-serif" }}>
                      {t["Voice Call"] || "Voice Call"}
                    </span>
                  </button>
                </div>
              </div>

              {/* Divider */}
              <div className="w-[343px] h-[1px] bg-[#EBEBEB]" />

              {/* Tags Section */}
              <div className="flex flex-col items-start gap-[9px] w-[317px]">
                {/* Row 1 tags */}
                <div className="flex flex-row items-center gap-[9px] w-full flex-wrap">
                  {advisor.tagsRow1.map((tag, index) => (
                    <span
                      key={index}
                      className="flex flex-row justify-center items-center py-[2px] px-[8px] bg-[#F5F5F5] rounded-[15px] text-[#8B8B8B] font-semibold text-[10px] leading-[13px] shrink-0 font-sans"
                      style={{ fontFamily: "'Segoe UI', sans-serif" }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>

                {/* Row 2 tags */}
                <div className="flex flex-row items-center gap-[9px] w-full flex-wrap">
                  {advisor.tagsRow2.map((tag, index) => (
                    <span
                      key={index}
                      className="flex flex-row justify-center items-center py-[2px] px-[8px] bg-[#F5F5F5] rounded-[15px] text-[#8B8B8B] font-semibold text-[10px] leading-[13px] shrink-0 font-sans"
                      style={{ fontFamily: "'Segoe UI', sans-serif" }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </section>
      </main>

      <SupportSheet
        isOpen={isSupportOpen}
        onClose={() => setIsSupportOpen(false)}
      />
    </>
  );
}