import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { User as UserIcon } from "lucide-react";
import Fal from "@/public/main-page/fal.png";

interface UserDetailsSidebarProps {
  client: any;
  id: string;
}

const UserDetailsSidebar = ({ client, id }: UserDetailsSidebarProps) => {
  if (!client) return null;

  // Determine if the user is a company type
  const isCompany = ['company', 'real-estate-company', 'real_estate_company', 'شركة عقارية', 'developer', 'مطور عقاري'].includes(
    (client.client_type || '').toLowerCase().trim()
  );

  return (
    <div className="md:w-100 bg-[#F1F5F9] p-3 rounded-xl sticky top-24">
      <div>
        {/* Avatar */}
        <div className="w-fit mx-auto">
          {client.avatar ? (
            <img
              src={client.avatar}
              alt={client.name}
              width={80}
              height={80}
              className="rounded-full object-cover w-20 h-20"
            />
          ) : (
            <div className="w-20 h-20 rounded-full bg-white border-2 border-slate-200 flex items-center justify-center">
              <UserIcon className="size-10 text-slate-300" />
            </div>
          )}
        </div>

        {/* Name + verified badge + type */}
        <div className="mt-2 text-center">
          <div className="flex justify-center items-center gap-1">
            <p>{client.name}</p>
            {client.verified && (
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.12484 10.5833L7.9165 9.39583C7.76373 9.24305 7.57289 9.16666 7.344 9.16666C7.11512 9.16666 6.91706 9.25 6.74984 9.41667C6.59706 9.56944 6.52067 9.76389 6.52067 10C6.52067 10.2361 6.59706 10.4306 6.74984 10.5833L8.5415 12.375C8.70817 12.5417 8.90262 12.625 9.12484 12.625C9.34706 12.625 9.5415 12.5417 9.70817 12.375L13.2498 8.83333C13.4165 8.66667 13.4962 8.47222 13.489 8.25C13.4818 8.02778 13.4021 7.83333 13.2498 7.66666C13.0832 7.5 12.8854 7.41333 12.6565 7.40666C12.4276 7.4 12.2296 7.47972 12.0623 7.64583L9.12484 10.5833ZM6.7915 18.125L5.58317 16.0833L3.2915 15.5833C3.08317 15.5417 2.9165 15.4342 2.7915 15.2608C2.6665 15.0875 2.61789 14.8964 2.64567 14.6875L2.87484 12.3333L1.31234 10.5417C1.17345 10.3889 1.104 10.2083 1.104 10C1.104 9.79167 1.17345 9.61111 1.31234 9.45833L2.87484 7.66666L2.64567 5.3125C2.61789 5.10416 2.6665 4.91305 2.7915 4.73916C2.9165 4.56528 3.08317 4.45778 3.2915 4.41667L5.58317 3.91666L6.7915 1.875C6.90262 1.69444 7.05539 1.57278 7.24984 1.51C7.44428 1.44722 7.63873 1.45778 7.83317 1.54167L9.99984 2.45833L12.1665 1.54167C12.3609 1.45833 12.5554 1.44778 12.7498 1.51C12.9443 1.57222 13.0971 1.69389 13.2082 1.875L14.4165 3.91666L16.7082 4.41667C16.9165 4.45833 17.0832 4.56611 17.2082 4.74C17.3332 4.91389 17.3818 5.10472 17.354 5.3125L17.1248 7.66666L18.6873 9.45833C18.8262 9.61111 18.8957 9.79167 18.8957 10C18.8957 10.2083 18.8262 10.3889 18.6873 10.5417L17.1248 12.3333L17.354 14.6875C17.3818 14.8958 17.3332 15.0869 17.2082 15.2608C17.0832 15.4347 16.9165 15.5422 16.7082 15.5833L14.4165 16.0833L13.2082 18.125C13.0971 18.3056 12.9443 18.4272 12.7498 18.49C12.5554 18.5528 12.3609 18.5422 12.1665 18.4583L9.99984 17.5417L7.83317 18.4583C7.63873 18.5417 7.44428 18.5522 7.24984 18.49C7.05539 18.4278 6.90262 18.3061 6.7915 18.125Z" fill="#2B7FFF" />
              </svg>
            )}
          </div>
          <p className="text-[#62748E] font-light">{client.type_label || "مسوق عقاري"}</p>
          <p className="mt-4 text-[#45556C] font-medium">
            {client.bio || client.notes || ""}
          </p>
        </div>

        {/* Website link if available */}
        {client.website && (
          <a href={client.website} className="flex justify-center items-center gap-2 mb-4 text-[#45556C] underline text-center" target="_blank" rel="noopener noreferrer">
            {client.website}
            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.3335 10.8333C8.69138 11.3118 9.14796 11.7077 9.67229 11.9941C10.1966 12.2806 10.7764 12.4509 11.3724 12.4936C11.9683 12.5363 12.5665 12.4503 13.1263 12.2415C13.6861 12.0327 14.1944 11.7059 14.6168 11.2833L17.1168 8.78335C17.8758 7.9975 18.2958 6.94499 18.2863 5.85251C18.2768 4.76002 17.8386 3.71497 17.0661 2.94243C16.2935 2.1699 15.2485 1.7317 14.156 1.7222C13.0635 1.71271 12.011 2.13269 11.2252 2.89168L9.79183 4.31668M11.6668 9.16668C11.309 8.68824 10.8524 8.29236 10.328 8.0059C9.80371 7.71943 9.22391 7.54908 8.62796 7.5064C8.032 7.46372 7.43384 7.54971 6.87405 7.75853C6.31425 7.96735 5.8059 8.29412 5.3835 8.71668L2.8835 11.2167C2.12451 12.0025 1.70453 13.055 1.71402 14.1475C1.72352 15.24 2.16172 16.2851 2.93426 17.0576C3.70679 17.8301 4.75184 18.2683 5.84433 18.2778C6.93681 18.2873 7.98932 17.8673 8.77517 17.1083L10.2002 15.6833" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        )}

        {/* Send Message Button */}
        <Button className="text-base font-normal w-full rounded-full">
          ارسال رسالة
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 7.66667C14.0023 8.54658 13.7967 9.41459 13.4 10.2C12.9296 11.1412 12.2065 11.9328 11.3116 12.4862C10.4168 13.0396 9.3855 13.3329 8.33333 13.3333C7.45342 13.3356 6.58541 13.1301 5.8 12.7333L2 14L3.26667 10.2C2.86995 9.41459 2.66437 8.54658 2.66667 7.66667C2.66707 6.61451 2.96041 5.58324 3.51381 4.68837C4.06722 3.7935 4.85884 3.07038 5.8 2.6C6.58541 2.20329 7.45342 1.99771 8.33333 2H8.66667C10.0562 2.07666 11.3687 2.66318 12.3528 3.64724C13.3368 4.63131 13.9233 5.94377 14 7.33334V7.66667Z" stroke="white" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Button>

        <hr className="border-[#CAD5E2] my-6" />

        {/* Info Fields — flat layout matching original design */}
        <div className="flex flex-col px-2 gap-3">

          {/* Address — only for company users */}
          {isCompany && client.address && (
            <div className="flex items-center gap-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_5996_16327)">
                  <path d="M14 6.66667C14 11.3333 8 15.3333 8 15.3333C8 15.3333 2 11.3333 2 6.66667C2 5.07537 2.63214 3.54924 3.75736 2.42403C4.88258 1.29881 6.4087 0.666667 8 0.666667C9.5913 0.666667 11.1174 1.29881 12.2426 2.42403C13.3679 3.54924 14 5.07537 14 6.66667Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M8 8.66667C9.10457 8.66667 10 7.77124 10 6.66667C10 5.5621 9.10457 4.66667 8 4.66667C6.89543 4.66667 6 5.5621 6 6.66667C6 7.77124 6.89543 8.66667 8 8.66667Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_5996_16327">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <div>
                <p className="text-[#62748E] text-sm">العنوان</p>
                <p className="text-[#45556C]">{client.address}</p>
              </div>
            </div>
          )}

          {/* Join Date */}
          <div className="flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.667 2.66667H3.33366C2.59728 2.66667 2.00033 3.26362 2.00033 4V12.6667C2.00033 13.403 2.59728 14 3.33366 14H12.667C13.4034 14 14.0003 13.403 14.0003 12.6667V4C14.0003 3.26362 13.4034 2.66667 12.667 2.66667Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M10.6667 1.33333V4" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M5.33301 1.33333V4" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M2 6.66667H14" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            <div>
              <p className="text-[#62748E] text-sm">تاريخ الانضمام</p>
              <p className="text-[#5A6A82] text-sm">{client.created_at_human || "نوفمبر 2024"}</p>
            </div>
          </div>

          {/* Commercial Registry (السجل التجاري) — only for company users */}
          {isCompany && client.registration_number && (
            <div className="flex items-center gap-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_5996_16335)">
                  <path d="M5.47301 9.26L4.66634 15.3333L7.99967 13.3333L11.333 15.3333L10.5263 9.25333M12.6663 5.33333C12.6663 7.91066 10.577 10 7.99967 10C5.42235 10 3.33301 7.91066 3.33301 5.33333C3.33301 2.75601 5.42235 0.666668 7.99967 0.666668C10.577 0.666668 12.6663 2.75601 12.6663 5.33333Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_5996_16335">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <div>
                <p className="text-[#62748E] text-sm">رقم السجل التجاري :</p>
                <p className="text-[#45556C]">{client.registration_number}</p>
              </div>
            </div>
          )}

          {/* FAL License */}
          {client.fal_license && (
            <div className="flex items-center gap-2">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0_5996_16335b)">
                  <path d="M5.47301 9.26L4.66634 15.3333L7.99967 13.3333L11.333 15.3333L10.5263 9.25333M12.6663 5.33333C12.6663 7.91066 10.577 10 7.99967 10C5.42235 10 3.33301 7.91066 3.33301 5.33333C3.33301 2.75601 5.42235 0.666668 7.99967 0.666668C10.577 0.666668 12.6663 2.75601 12.6663 5.33333Z" stroke="#1D293D" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                </g>
                <defs>
                  <clipPath id="clip0_5996_16335b">
                    <rect width="16" height="16" fill="white" />
                  </clipPath>
                </defs>
              </svg>
              <div>
                <p className="text-[#62748E] text-sm">رقم رخصة فال :</p>
                <p className="text-[#45556C]">{client.fal_license}</p>
              </div>
            </div>
          )}
        </div>

        {/* FAL Verified By */}
        <div className="mt-6">
          <p className="mb-2 text-[#62748E] text-sm">موثقة من قبل :</p>
          <Image src={Fal} alt="flag" width={70} height={70} />
        </div>

        <hr className="border-[#CAD5E2] my-6" />

        {/* Social Media Icons — exact SVGs from original code */}
        {/* التواصل الاجتماعي */}
        <div className="flex justify-center gap-2">
          {/* WhatsApp */}
          <Link href={client.whatsapp ? `https://wa.me/${client.whatsapp}` : '#'} className="p-3 bg-[#0525311A] rounded-full" target={client.whatsapp ? "_blank" : undefined}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.6 6.31999C16.8669 5.58141 15.9943 4.99596 15.033 4.59767C14.0716 4.19938 13.0406 3.99622 12 3.99999C10.6089 4.00135 9.24248 4.36819 8.03771 5.06377C6.83294 5.75935 5.83208 6.75926 5.13534 7.96335C4.4386 9.16745 4.07046 10.5335 4.06776 11.9246C4.06507 13.3158 4.42793 14.6832 5.12 15.89L4 20L8.2 18.9C9.35975 19.5452 10.6629 19.8891 11.99 19.9C14.0997 19.9001 16.124 19.0668 17.6222 17.5816C19.1205 16.0965 19.9715 14.0796 19.99 11.97C19.983 10.9173 19.7682 9.87634 19.3581 8.9068C18.948 7.93725 18.3505 7.05819 17.6 6.31999ZM12 18.53C10.8177 18.5308 9.65701 18.213 8.64 17.61L8.4 17.46L5.91 18.12L6.57 15.69L6.41 15.44C5.55925 14.0667 5.24174 12.429 5.51762 10.8372C5.7935 9.24545 6.64361 7.81015 7.9069 6.80322C9.1702 5.79628 10.7589 5.28765 12.3721 5.37368C13.9853 5.4597 15.511 6.13441 16.66 7.26999C17.916 8.49818 18.635 10.1735 18.66 11.93C18.6442 13.6859 17.9355 15.3645 16.6882 16.6006C15.441 17.8366 13.756 18.5301 12 18.53ZM15.61 13.59C15.41 13.49 14.44 13.01 14.26 12.95C14.08 12.89 13.94 12.85 13.81 13.05C13.6144 13.3181 13.404 13.5751 13.18 13.82C13.07 13.96 12.95 13.97 12.75 13.82C11.6097 13.3694 10.6597 12.5394 10.06 11.47C9.85 11.12 10.26 11.14 10.64 10.39C10.6681 10.3359 10.6827 10.2759 10.6827 10.215C10.6827 10.1541 10.6681 10.0941 10.64 10.04C10.64 9.93999 10.19 8.95999 10.03 8.56999C9.87 8.17999 9.71 8.23999 9.58 8.22999H9.19C9.08895 8.23154 8.9894 8.25465 8.898 8.29776C8.8066 8.34087 8.72546 8.403 8.66 8.47999C8.43562 8.69817 8.26061 8.96191 8.14676 9.25343C8.03291 9.54495 7.98287 9.85749 8 10.17C8.0627 10.9181 8.34443 11.6311 8.81 12.22C9.6622 13.4958 10.8301 14.5293 12.2 15.22C12.9185 15.6394 13.7535 15.8148 14.58 15.72C14.8552 15.6654 15.1159 15.5535 15.345 15.3915C15.5742 15.2296 15.7667 15.0212 15.91 14.78C16.0428 14.4856 16.0846 14.1583 16.03 13.84C15.94 13.74 15.81 13.69 15.61 13.59Z" fill="#000000" />
            </svg>
          </Link>

          {/* Facebook */}
          <Link href='#' className="p-3 bg-[#0525311A] rounded-full">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.9997 1.66666H12.4997C11.3946 1.66666 10.3348 2.10564 9.5534 2.88704C8.77199 3.66845 8.33301 4.72825 8.33301 5.83332V8.33332H5.83301V11.6667H8.33301V18.3333H11.6663V11.6667H14.1663L14.9997 8.33332H11.6663V5.83332C11.6663 5.61231 11.7541 5.40035 11.9104 5.24407C12.0667 5.08779 12.2787 4.99999 12.4997 4.99999H14.9997V1.66666Z" stroke="#05222D" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Link>

          {/* YouTube */}
          <Link href='#' className="p-3 bg-[#0525311A] rounded-full">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.7835 5.35001C18.6845 4.95452 18.4829 4.59215 18.199 4.29952C17.9152 4.00688 17.5591 3.79433 17.1668 3.68334C15.7335 3.33334 10.0002 3.33334 10.0002 3.33334C10.0002 3.33334 4.26682 3.33334 2.83348 3.71668C2.44119 3.82766 2.08513 4.04021 1.80127 4.33285C1.51741 4.62549 1.31581 4.98785 1.21682 5.38334C0.954496 6.83797 0.826181 8.3136 0.833484 9.79168C0.824134 11.2809 0.952457 12.7678 1.21682 14.2333C1.32595 14.6165 1.53207 14.9651 1.81527 15.2454C2.09847 15.5257 2.44917 15.7282 2.83348 15.8333C4.26682 16.2167 10.0002 16.2167 10.0002 16.2167C10.0002 16.2167 15.7335 16.2167 17.1668 15.8333C17.5591 15.7224 17.9152 15.5098 18.199 15.2172C18.4829 14.9245 18.6845 14.5622 18.7835 14.1667C19.0438 12.723 19.1721 11.2586 19.1668 9.79168C19.1762 8.30247 19.0478 6.81559 18.7835 5.35001Z" stroke="#05222D" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
              <path d="M8.12515 12.5167L12.9168 9.79168L8.12515 7.06668V12.5167Z" stroke="#05222D" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Link>

          {/* Twitter / X */}
          <Link href='#' className="p-3 bg-[#0525311A] rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg" fill="#05222D" className="bi bi-twitter-x" viewBox="0 0 16 16" id="Twitter-X--Streamline-Bootstrap" height="20" width="20">
              <path d="M12.6 0.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867 -5.07 -4.425 5.07H0.316l5.733 -6.57L0 0.75h5.063l3.495 4.633L12.601 0.75Zm-0.86 13.028h1.36L4.323 2.145H2.865z" strokeWidth="1"></path>
            </svg>
          </Link>
        </div>

        {/* Report Violation Link */}
        <Link className="mt-6 flex items-center justify-center gap-2" href="#">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0003 6.66667V10M10.0003 13.3333H10.0087M18.3337 10C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 10C1.66699 5.39763 5.39795 1.66667 10.0003 1.66667C14.6027 1.66667 18.3337 5.39763 18.3337 10Z" stroke="#45556C" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <p className="text-[#45556C] text-sm underline">
            الابلاغ عن مخالفة
          </p>
        </Link>
      </div>
    </div>
  )
}

export default UserDetailsSidebar;