'use client';

import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { useRouter } from 'next/navigation';

import { MessageRaw } from '@/lib/db/types';
import { useRef, useState } from 'react';
import Composer, { ComposerRef } from '@/components/chat/Composer';
import { dbPostCreateChat } from '@/lib/db/functions';
import { nanoid } from '@/lib/utils';
import Chip from '@/components/ui/Chip';
import { IconArrowUpRight, IconImage } from '@/components/ui/Icons';

const EXAMPLES = [
  {
    title: 'Counting flowers',
    mediaUrl:
      'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png',
    prompt: 'Count the number of flowers in this image.',
  },
  // {
  //   heading: 'Detecting',
  //   url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
  //   subheading: 'number of cereals in an image',
  //   message: `How many cereals are there in the image?`,
  // },
];

export default function Page() {
  const router = useRouter();
  const composerRef = useRef<ComposerRef>(null);
  return (
    <div className="h-screen w-screen homepage">
      <div className="mx-auto w-[42rem] max-w-full px-4 mt-[200px]">
        <h1 className="mb-4 text-center relative">
          Vision Agent
          <Chip className="absolute bg-green-100 text-green-500">BETA</Chip>
        </h1>
        <h4 className="text-center">
          Generate code to solve your vision problem with simple prompts.
        </h4>
        <div className="my-8">
          <Composer
            ref={composerRef}
            onSubmit={async ({ input, mediaUrl }) => {
              const newId = nanoid();
              const resp = await dbPostCreateChat({
                id: newId,
                mediaUrl: mediaUrl,
                title: `conversation-${newId}`,
                initMessages: [
                  {
                    role: 'user',
                    content:
                      input +
                      (mediaUrl
                        ? '\n\n' + generateInputImageMarkdown(mediaUrl)
                        : ''),
                    result: null,
                  },
                ],
              });
              if (resp) {
                router.push(`/chat/${newId}`);
              }
            }}
          />
        </div>
        <>
          {EXAMPLES.map((example, index) => {
            return (
              <Chip
                key={index}
                className="bg-transparent border border-zinc-500 cursor-pointer px-4"
                onClick={() => {
                  composerRef.current?.setInput(example.prompt);
                  composerRef.current?.setMediaUrl(example.mediaUrl);
                }}
              >
                <div className="flex flex-row items-center space-x-2">
                  <p className="text-primary text-sm">{example.title}</p>
                  <IconArrowUpRight className="text-primary" />
                </div>
              </Chip>
            );
          })}
        </>
      </div>
    </div>
  );
}