"use client";

import { type FC } from "react";

const SUGGESTIONS = [
  {
    icon: "🔍",
    title: "Aké právne dáta",
    description: "môže agent nájsť?",
    prompt: "Aké právne dáta môžeš vyhľadať?",
  },
  {
    icon: "🚫",
    title: "Čo agent nesmie",
    description: "robiť alebo používať?",
    prompt: "Čo nie si oprávnený robiť alebo použiť?",
  },
  {
    icon: "🤖",
    title: "Detaily AI modelu",
    description: "aký model používaš?",
    prompt: "Aké sú detaily tvojho AI modelu?",
  },
  {
    icon: "📊",
    title: "Zdroje dát",
    description: "odkiaľ čerpáš informácie?",
    prompt: "Aké dátové zdroje agent využíva?",
  },
];

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">
      {SUGGESTIONS.map((s) => (
        <button
          key={s.title}
          onClick={() => handleClick(s.prompt)}
          className="flex flex-col items-start 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"
        >
          <span className="font-medium text-foreground">
            {s.icon} {s.title}
          </span>
          <span className="text-muted-foreground text-xs">{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-center gap-6">
      <div className="flex flex-col items-center gap-4">
        <div className="size-24 rounded-full overflow-hidden ring-2 ring-blue-500/30 shadow-lg shadow-blue-500/20">
          <img
            src="/logo.png"
            alt="Legal AI"
            className="size-full object-cover"
            onError={(e) => {
              e.currentTarget.style.display = "none";
              e.currentTarget.parentElement!.innerHTML = `<div class="size-full bg-blue-600/20 flex items-center justify-center text-4xl">⚖️</div>`;
            }}
          />
        </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>
  );
};