"use client";

import { useState } from "react";
import { ArrowUp } from "lucide-react";
import { PiGearSixFill } from "react-icons/pi";
import { TiUserAdd } from "react-icons/ti";

import { Button } from "@/components/ui/button";
import { ChatInterface } from "./chat-interface";

export const AskAi = () => {
  const [isChatMode, setIsChatMode] = useState(false);

  return (
    <>
      <div className="bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent group">
        {isChatMode ? (
          <ChatInterface />
        ) : (
          <>
            <textarea
              rows={3}
              className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none mb-1"
              placeholder="Ask DeepSite anything..."
              onChange={() => {}}
              onKeyDown={() => {}}
            />
            <div className="flex items-center justify-between gap-2 px-4 pb-3">
              <div className="flex-1 flex justify-start">
                <Button
                  size="iconXs"
                  variant="outline"
                  className="!border-neutral-600 !text-neutral-400 !hover:!border-neutral-500 hover:!text-neutral-300"
                  onClick={() => setIsChatMode(true)}
                >
                  <TiUserAdd className="size-4" />
                </Button>
              </div>
              <div className="flex items-center justify-end gap-2">
                <Button variant="black" size="sm">
                  <PiGearSixFill className="size-4" />
                  Settings
                </Button>
                <Button size="iconXs">
                  <ArrowUp className="size-4" />
                </Button>
              </div>
            </div>
          </>
        )}
      </div>
    </>
  );
};