import { useState } from 'react';
import { ExternalLinkIcon, MonitorSmartphoneIcon } from 'lucide-react';

import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Tabs, TabsList, TabsTrigger } from '../../components/ui/tabs';
import type { ISeoSettings } from '../../service/seo/seo.interface';

/**
 * The plugin's front-end pieces rendered by the theme: a page of the site
 * loads in a frame with its content swapped for one piece, so what shows
 * is exactly what a visitor gets, custom CSS included. Nothing here is
 * drawn by the admin app.
 */
const SeoFrontendPreview = ({
  preview,
}: {
  preview: ISeoSettings['preview'];
}): JSX.Element => {
  const [piece, setPiece] = useState(preview.pieces[0]?.key ?? '');
  const current = preview.pieces.find(item => item.key === piece);

  if (!preview.page || !current) {
    return (
      <Callout tone="warning">
        Nothing to preview yet: publish a page or a post first, and the preview
        loads it with the piece in place of its content.
      </Callout>
    );
  }

  return (
    <div className="flex flex-col gap-3 py-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <Tabs value={piece} onValueChange={next => setPiece(String(next))}>
          <TabsList aria-label="Piece">
            {preview.pieces.map(item => (
              <TabsTrigger key={item.key} value={item.key} className="px-3">
                {item.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <Button
          size="sm"
          variant="outline"
          nativeButton={false}
          render={<a href={current.url} target="_blank" rel="noreferrer" />}
        >
          Open in a new tab <ExternalLinkIcon />
        </Button>
      </div>
      <p className="text-xs text-muted-foreground">
        <code className="rounded bg-muted px-1 py-0.5">
          {current.shortcode}
        </code>{' '}
        as the theme prints it, in place of the content of &ldquo;
        {preview.page.title}&rdquo;.
        {!current.available &&
          ' Its module is off, so the frame says so instead of showing it.'}
      </p>
      <div className="overflow-hidden rounded-xl border border-border bg-muted/30">
        <div className="flex items-center gap-2 border-b border-border px-3 py-1.5 text-xs text-muted-foreground">
          <MonitorSmartphoneIcon className="size-3.5" />
          <span className="truncate">{preview.page.url}</span>
        </div>
        <iframe
          key={current.url}
          title={`${current.label} preview`}
          src={current.url}
          className="h-[36rem] w-full bg-background"
          loading="lazy"
          sandbox="allow-same-origin allow-scripts allow-forms"
        />
      </div>
    </div>
  );
};

export default SeoFrontendPreview;