import React, { useEffect, useState } from 'react';
import { LayoutTemplateIcon, LoaderCircleIcon } from 'lucide-react';

import { useCopilot } from '../../../context/copilot.context';
import type { PageTemplatePreset } from '../../../service/visibility/visibility.interface';
import { listPageTemplatePresets } from '../../../service/visibility/visibility.service';

/**
 * The page templates beside the conversation: the kinds of page Recomaze
 * knows how to write. Picking one asks for it in the chat rather than
 * starting a generation from a card - writing a page costs credits, and the
 * merchant should see what they are agreeing to in the answer above the
 * button.
 *
 * @param props - Component props.
 * @param props.onAsk - Put the request to the copilot.
 * @return The gallery.
 */
export function TemplatesPanel({
  onAsk,
}: {
  onAsk: (prompt: string) => void;
}): React.ReactElement {
  const copilot = useCopilot();
  const token: string = copilot.token;
  const clientId: string = copilot.clientId;
  const [presets, setPresets] = useState<PageTemplatePreset[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    if (!token || !clientId) return undefined;
    let stale = false;
    void listPageTemplatePresets(clientId, token)
      .then(list => {
        if (!stale) setPresets(list);
      })
      .catch(() => undefined)
      .finally(() => {
        if (!stale) setIsLoading(false);
      });

    return () => {
      stale = true;
    };
  }, [token, clientId]);

  if (isLoading) {
    return (
      <div className="flex items-center gap-2 p-4 text-xs text-muted-foreground">
        <LoaderCircleIcon className="h-3.5 w-3.5 animate-spin text-brand" />
        Reading the templates...
      </div>
    );
  }

  if (presets.length === 0) {
    return (
      <p className="p-4 text-sm text-muted-foreground">
        No templates to show right now.
      </p>
    );
  }

  return (
    <ul className="flex flex-col">
      {presets.map((preset: PageTemplatePreset) => (
        <li
          key={preset.preset_id}
          className="border-t border-border first:border-t-0"
        >
          <button
            type="button"
            onClick={() =>
              onAsk(
                `Write me a "${preset.name}" page for my site, and tell me which prompts it targets.`
              )
            }
            className="flex w-full items-start gap-3 px-4 py-3 text-left transition hover:bg-muted"
          >
            <LayoutTemplateIcon className="mt-0.5 h-4 w-4 shrink-0 text-brand" />
            <span className="min-w-0 flex-1">
              <span className="block text-sm font-medium text-foreground">
                {preset.name}
              </span>
              <span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
                {preset.description}
              </span>
            </span>
          </button>
        </li>
      ))}
    </ul>
  );
}