"use client";

// "Listen yalnızca bu tarayıcıda" satırları için cihaz ikonları.
//
// - IsletimSistemiLogosu: kullanıcının şu an kullandığı işletim sisteminin
//   logosu (Apple / Windows / Android). UA yalnızca client'ta okunur; ilk
//   boyada nötr Monitor ikonu basılır ki SSR/hydration uyuşmazlığı olmasın.
//   iPad "Mac" olarak görünebilir ama ikisi de Apple logosuna düştüğü için
//   sorun değil; Linux ve bilinmeyenler Monitor'da kalır.
// - CihazCifti: "her cihazdan eriş" vurgusu için telefon + bilgisayar ikonu.

import { useEffect, useState } from "react";
import { Monitor, Smartphone } from "lucide-react";

type Isletim = "apple" | "windows" | "android" | null;

function isletimSistemi(): Isletim {
  const ua = navigator.userAgent;
  if (/iPhone|iPad|iPod|Mac/i.test(ua)) return "apple";
  if (/Android/i.test(ua)) return "android";
  if (/Win/i.test(ua)) return "windows";
  return null;
}

function AppleLogo({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      className={className}
      aria-hidden
    >
      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
    </svg>
  );
}

function WindowsLogo({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      className={className}
      aria-hidden
    >
      <path d="M3 3h8.6v8.6H3zM12.4 3H21v8.6h-8.6zM3 12.4h8.6V21H3zM12.4 12.4H21V21h-8.6z" />
    </svg>
  );
}

function AndroidLogo({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      className={className}
      aria-hidden
    >
      <path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 0 0-.1521-.5676.416.416 0 0 0-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0989L4.841 5.4467a.4161.4161 0 0 0-.5677-.1521.4157.4157 0 0 0-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3435-4.1021-2.6892-7.5743-6.1185-9.4396" />
    </svg>
  );
}

export function IsletimSistemiLogosu({ className }: { className?: string }) {
  const [os, setOs] = useState<Isletim>(null);
  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setOs(isletimSistemi());
  }, []);

  if (os === "apple") return <AppleLogo className={className} />;
  if (os === "windows") return <WindowsLogo className={className} />;
  if (os === "android") return <AndroidLogo className={className} />;
  return <Monitor className={className} aria-hidden />;
}

export function CihazCifti({ className }: { className?: string }) {
  return (
    <span
      className={`inline-flex items-center gap-1 ${className ?? ""}`}
      aria-hidden
    >
      <Smartphone className="size-3.5" />
      <Monitor className="size-3.5" />
    </span>
  );
}
