"use client";
import { useEffect, useState } from "react";
import DoctorAvatar from "@/app/component/DoctorAvatar";
import QrImg from "./QrImg";
import SiteLogoBase from "./SiteLogo";
import { getStateInfoClient } from "@/lib/getStateInfoClient";

import StarDI from "@/components/icons/StarDI";
import ClipBoard from "@/components/icons/ClipBoard";
import AddressPoster from "@/components/icons/AddressPoster";
import TelefonPoster from "@/components/icons/TelefonPoster";
import Instagram from "@/components/icons/Instagram";
import Telegram from "@/components/icons/Telegram";
import Whatsapp from "@/components/icons/Whatsapp";

const POSTER_BG =
  "linear-gradient(160deg, #0B2A4A 0%, #16528C 52%, #2E77C4 100%)";

function SiteLogo(props) {
  return <SiteLogoBase stroke="#8FB6FF" {...props} />;
}

function SectionTitle({ icon, children }) {
  return (
    <div className="flex items-center gap-[12px] mb-[20px]">
      <span className="flex items-center justify-center w-[40px] h-[40px] rounded-[12px] bg-white/12">
        {icon}
      </span>
      <span className="text-white text-[26px] font-bold">{children}</span>
    </div>
  );
}

function Poster({ data, onQrReady }) {
  const [city, setCity] = useState(null);

  useEffect(() => {
    const { matchedCity } = getStateInfoClient();
    setCity(matchedCity || null);
  }, []);

  const specialties = (data?.specialties ?? []).filter((s) => s?.name).slice(0, 4);
  const services = (data?.expertise ?? []).filter((s) => s?.name);
  const shownServices = services.slice(0, 8);
  const moreServices = services.length - shownServices.length;
  const rawAddress = data?.address?.[0]?.address;
  const address =
    rawAddress && rawAddress.length > 120
      ? `${rawAddress.slice(0, 120).trimEnd()}…`
      : rawAddress;
  const phones = (data?.address ?? [])
    .map((a) => a?.phone)
    .filter(Boolean)
    .slice(0, 2);

  const social = city?.social_media ?? {};
  const socialItems = [
    social.instagram && <Instagram key="ig" />,
    social.telegram && <Telegram key="tg" />,
    social.whatsapp && <Whatsapp key="wa" />,
  ].filter(Boolean);

  const badges = [
    Number(data?.experience) > 0 && {
      icon: <span className="text-[#F6B93B] text-[20px] leading-none">◆</span>,
      label: `${data.experience} سال تجربه`,
    },
    (data?.point ?? 0) > 0 && {
      icon: <StarDI />,
      label: `امتیاز ${data.point}`,
    },
    (data?.satisfaction ?? 0) > 0 && {
      icon: <span className="text-[#4ADE80] text-[20px] leading-none">♥</span>,
      label: `${data.satisfaction}% رضایت`,
    },
  ].filter(Boolean);

  return (
    <div
      dir="rtl"
      className="relative w-[1080px] h-[1350px] overflow-hidden flex flex-col p-[64px] text-right"
      style={{ background: POSTER_BG }}
    >
      <div className="pointer-events-none absolute -top-[180px] -left-[180px] w-[520px] h-[520px] rounded-full bg-[#57A6FF]/20 blur-[80px]" />
      <div className="pointer-events-none absolute bottom-[120px] -right-[160px] w-[460px] h-[460px] rounded-full bg-[#0B2A4A]/40 blur-[80px]" />

      {/* header */}
      <header className="relative flex items-center justify-between">
        <div className="flex items-center gap-[16px]">
          <SiteLogo city={city} className="h-[64px] w-[64px]" />
          <div className="flex flex-col">
            <span className="text-white text-[30px] font-extrabold leading-tight">
              {city?.site_name || "نوبت ۷۲۴"}
            </span>
            <span className="text-[#9FC1E6] text-[18px] font-medium" dir="ltr">
              {city?.domain || "nobat724.com"}
            </span>
          </div>
        </div>
        <div className="flex items-center rounded-full bg-[#F59E0B] px-[28px] py-[14px]">
          <span className="text-[#1A1200] text-[22px] font-bold leading-none">
            نوبت‌دهی آنلاین
          </span>
        </div>
      </header>

      {city?.slogan && (
        <p className="relative mt-[20px] text-[#C7DBF2] text-[22px] font-medium">
          {city.slogan}
        </p>
      )}

      {/* hero */}
      <section className="relative mt-[40px] rounded-[32px] bg-white/8 border border-white/12 p-[40px] flex items-center gap-[36px]">
        <div className="shrink-0 rounded-full p-[8px] bg-gradient-to-br from-[#5AA6FF] to-[#F59E0B]">
          <div className="rounded-full p-[6px] bg-[#0B2A4A]">
            <DoctorAvatar
              doctor={data}
              size={220}
              priority
              className="rounded-full !object-cover w-[220px] h-[220px]"
            />
          </div>
        </div>
        <div className="flex-1 min-w-0">
          <h1 className="text-white text-[46px] font-extrabold leading-tight">
            {data?.name}
          </h1>
          <div className="flex flex-wrap gap-[10px] mt-[16px]">
            {specialties.map((s, i) => (
              <span
                key={i}
                className="flex items-center rounded-full bg-[#F59E0B]/18 border border-[#F59E0B]/40 px-[18px] py-[9px]"
              >
                <span className="text-[#FCD9A0] text-[22px] font-semibold leading-none">
                  {s.name}
                </span>
              </span>
            ))}
          </div>
          <div className="flex flex-wrap gap-[12px] mt-[18px]">
            {badges.map((b, i) => (
              <span
                key={i}
                className="flex items-center gap-[8px] rounded-full bg-white/10 border border-white/15 px-[18px] py-[11px]"
              >
                {b.icon}
                <span className="text-[#EAF2FB] text-[22px] font-semibold leading-none whitespace-nowrap">
                  {b.label}
                </span>
              </span>
            ))}
          </div>
          {data?.medical_system_code && (
            <p className="mt-[16px] text-[#9FC1E6] text-[20px]">
              کد نظام پزشکی:{" "}
              <span dir="ltr" className="font-semibold text-[#E7EEF6]">
                {data.medical_system_code}
              </span>
            </p>
          )}
        </div>
      </section>

      {/* body */}
      <section className="relative mt-[36px] flex-1">
        {shownServices.length > 0 && (
          <div className="rounded-[28px] bg-white/6 border border-white/10 p-[32px] mb-[28px]">
            <SectionTitle icon={<ClipBoard />}>خدمات</SectionTitle>
            <div className="flex flex-wrap items-center gap-x-[12px] gap-y-[14px]">
              {shownServices.map((s, i) => (
                <span
                  key={i}
                  className="flex items-center gap-[10px] rounded-full bg-white/8 border border-white/10 px-[18px] py-[10px]"
                >
                  <span className="w-[10px] h-[10px] rounded-full bg-[#F59E0B] shrink-0" />
                  <span className="text-[#E7EEF6] text-[22px] font-normal leading-none whitespace-nowrap">
                    {s.name}
                  </span>
                </span>
              ))}
              {moreServices > 0 && (
                <span className="text-[#9FC1E6] text-[22px]">
                  + {moreServices} خدمت دیگر
                </span>
              )}
            </div>
          </div>
        )}

        {(address || phones.length > 0) && (
          <div className="rounded-[28px] bg-white/6 border border-white/10 p-[32px]">
            {address && (
              <div className="mb-[24px]">
                <SectionTitle icon={<AddressPoster />}>آدرس</SectionTitle>
                <p className="text-[#E7EEF6] text-[23px] font-normal leading-[1.7] line-clamp-2">
                  {address}
                </p>
              </div>
            )}
            {phones.length > 0 && (
              <div>
                <SectionTitle icon={<TelefonPoster />}>تلفن</SectionTitle>
                <div className="flex flex-wrap gap-[16px]">
                  {phones.map((p, i) => (
                    <span
                      key={i}
                      dir="ltr"
                      className="flex items-center rounded-[14px] bg-white/10 px-[20px] py-[12px]"
                    >
                      <span className="text-[#E7EEF6] text-[24px] font-semibold leading-none">
                        {p}
                      </span>
                    </span>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </section>

      {/* footer */}
      <footer className="relative mt-[36px] rounded-[28px] bg-white/8 border border-white/12 p-[32px] flex items-center justify-between">
        <div className="flex items-center gap-[24px]">
          <div className="rounded-[20px] bg-white p-[16px]">
            <QrImg onReady={onQrReady} size={168} />
          </div>
          <div className="flex flex-col">
            <span className="text-white text-[28px] font-bold">
              برای رزرو نوبت اسکن کنید
            </span>
            <span className="text-[#9FC1E6] text-[22px] mt-[8px]" dir="ltr">
              {city?.domain || "nobat724.com"}
            </span>
          </div>
        </div>

        <div className="flex flex-col items-end gap-[14px]">
          <SiteLogo city={city} className="h-[48px] w-[48px]" />
          {socialItems.length > 0 && (
            <div className="flex items-center gap-[10px]">
              {socialItems.map((icon, i) => (
                <span
                  key={i}
                  className="flex items-center justify-center w-[44px] h-[44px] rounded-full bg-white"
                >
                  {icon}
                </span>
              ))}
            </div>
          )}
        </div>
      </footer>
    </div>
  );
}

export default Poster;