"use client";

import { type FC } from "react";

const STARTERS = [
  {
    icon: "/icons/magnifying-glass.svg",
    description: "What legal data can the agent find?",
  },
  {
    icon: "/icons/ban.svg",
  description: "What are the agent's limitations?",
  },
  {
    icon: "/icons/hexagon.svg",
    description: "What are the details of your AI model?",
  },
  {
    icon: "/icons/database.svg",
    description: "What are your data sources?",
  },
];

const ThreadSuggestions: FC = () => {
  const handleClick = (prompt: string) => {
    const input = document.querySelector(
      'textarea[aria-label="Message input"]'
    ) as HTMLTextAreaElement;
    if (input) {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLTextAreaElement.prototype,
        "value"
      )?.set;
      nativeInputValueSetter?.call(input, prompt);
      input.dispatchEvent(new Event("input", { bubbles: true }));
      input.focus();
    }
  };

  return (
    <div className="grid w-full grid-cols-2 @lg:grid-cols-4 gap-2 pb-4 px-2">
      {STARTERS.map((s) => (
        <button
          key={s.description}
          onClick={() => handleClick(s.description)}
          className="flex flex-row items-center gap-1 rounded-xl border border-blue-500/20 bg-card px-4 py-3 text-left text-sm transition-colors hover:bg-blue-600/10 hover:border-blue-500/40 cursor-pointer"
        >
          <div className="size-5 flex-shrink-0">
            <img
              src={s.icon}
              alt=""
              className="size-full object-contain group-hover:scale-110 transition-transform"
            />   
          </div>
          <span className="text-muted-foreground group-hover:text-foreground transition-colors leading-tight">
            {s.description}
          </span>
        </button>
      ))}
    </div>
  );
};

export const ThreadWelcome: FC = () => {
  return (
    <div className="mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col items-center justify-end gap-6">
      <div className="flex flex-col items-center gap-4">
        <div className=" rounded-full overflow-hidden ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/20">
          <img
            src="/logo.png"
            alt="Legal AI"
            className="w-50 h-50 object-cover"
          />
        </div>
        <div className="flex flex-col items-center gap-1 text-center">
          <h1 className="fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200">
            Legal AI Assistant
          </h1>
        </div>
      </div>
      <ThreadSuggestions />
    </div>
  );
};