import Image from "next/image";
import { MessageCircle, NotebookTabs } from "lucide-react";
import LiquidGlass from "liquid-glass-react";
import { cn } from "@/lib/utils";

type WorkspaceEmptyStateProps = {
  className?: string;
};

export function WorkspaceEmptyState({ className }: WorkspaceEmptyStateProps) {
  return (
    <LiquidGlass
      blurAmount={0.05}
      saturation={130}
      elasticity={0.2}
      displacementScale={35}
      aberrationIntensity={1.8}
      cornerRadius={24}
      mode="standard"
      className={cn(
        "relative isolate flex min-h-[370px] items-center justify-center overflow-hidden rounded-[24px] border border-white/[0.075] bg-[radial-gradient(circle_at_50%_18%,rgba(124,58,237,0.24),transparent_30%),radial-gradient(circle_at_16%_78%,rgba(76,29,149,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.018))] px-5 py-9 shadow-[0_24px_90px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.055)] md:h-full md:min-h-0",
        className,
      )}
    >
      <div className="pointer-events-none absolute left-1/2 top-10 h-52 w-52 -translate-x-1/2 rounded-full bg-violet-500/18 blur-[76px]" aria-hidden="true" />
      <div className="pointer-events-none absolute inset-x-8 top-12 h-px bg-gradient-to-r from-transparent via-violet-300/26 to-transparent" aria-hidden="true" />
      <div className="pointer-events-none absolute inset-x-10 bottom-10 h-px bg-gradient-to-r from-transparent via-white/8 to-transparent" aria-hidden="true" />

      <div className="relative z-10 mx-auto max-w-[560px] text-center">
        <div className="relative mx-auto grid size-[78px] place-items-center">
          <span className="absolute inset-[-18px] rounded-full border border-violet-300/10" aria-hidden="true" />
          <span className="absolute inset-[-9px] rounded-full border border-violet-400/18 shadow-[0_0_30px_rgba(124,58,237,0.28)]" aria-hidden="true" />
          <span className="absolute h-[2px] w-[116px] rounded-full bg-gradient-to-r from-transparent via-violet-300/55 to-transparent" aria-hidden="true" />
          <div className="relative grid size-[74px] place-items-center rounded-[26px] border border-violet-300/18 bg-violet-400/[0.055] shadow-[0_0_54px_rgba(124,58,237,0.34),inset_0_1px_0_rgba(255,255,255,0.06)]">
            <Image
              src="/docdoe-logo-mark.png"
              alt=""
              width={46}
              height={46}
              className="object-contain mix-blend-screen"
              priority
            />
          </div>
        </div>

        <h1 className="mt-7 text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white sm:text-[30px]">
          Electromagnetic Induction selected.
        </h1>
        <p className="mx-auto mt-3 max-w-[500px] text-[14px] leading-6 text-white/55">
          Ask DocDoe about this source or unlock Studio tools to generate notes, quizzes, flashcards and exam answers.
        </p>

        <div className="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
          <button
            type="button"
            className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl border border-violet-200/25 bg-gradient-to-r from-violet-600 via-purple-500 to-fuchsia-500 px-5 text-[13px] font-bold text-white shadow-[0_0_34px_rgba(124,58,237,0.36)] transition hover:brightness-110 sm:w-auto"
          >
            <MessageCircle className="size-4" strokeWidth={1.9} aria-hidden="true" />
            Ask DocDoe
          </button>
          <button
            type="button"
            className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl border border-violet-300/18 bg-violet-400/[0.08] px-5 text-[13px] font-semibold text-violet-100 transition hover:border-violet-300/32 hover:bg-violet-400/[0.12] sm:w-auto"
          >
            <NotebookTabs className="size-4" strokeWidth={1.9} aria-hidden="true" />
            Generate Smart Notes
          </button>
        </div>
      </div>
    </LiquidGlass>
  );
}