import { useId, useMemo, useState } from 'react';
import apiFetch from '@wordpress/api-fetch';
import { ExternalLinkIcon, PlusIcon, Trash2Icon } from 'lucide-react';

import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import { Input } from '../../components/ui/input';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { Textarea } from '../../components/ui/textarea';
import { FieldHeader } from '../components/fields';

import {
  DETAIL_TYPES,
  FROM_POST_TYPES,
  isRequired,
  missingRequired,
  parseEntries,
  SCHEMA_TYPES,
  serializeEntries,
  type SchemaEntry,
  type SchemaField,
} from './types';

const GROUPS = ['Content', 'Business', 'Media', 'Other'] as const;

const TYPE_ITEMS = Object.entries(SCHEMA_TYPES).map(([value, type]) => ({
  value,
  label: type.label,
}));

/** The label shown for a value like "https://schema.org/EventScheduled" or "FULL_TIME". */
const optionLabel = (option: string): string =>
  option
    .replace(/^https?:\/\/schema\.org\//, '')
    .replace(/([a-z])([A-Z])/g, '$1 $2')
    .replace(/_/g, ' ')
    .toLowerCase()
    .replace(/^./, first => first.toUpperCase());

const Field = ({
  field,
  value,
  onChange,
}: {
  field: SchemaField;
  value: string;
  onChange: (value: string) => void;
}): JSX.Element => {
  const id = useId();
  const input = (): JSX.Element => {
    switch (field.type) {
      case 'textarea':
        return (
          <Textarea
            id={id}
            rows={3}
            value={value}
            placeholder={field.placeholder}
            onChange={event => onChange(event.target.value)}
          />
        );
      case 'select': {
        const items = (field.options ?? []).map(option => ({
          value: option,
          label: optionLabel(option),
        }));
        return (
          <Select
            items={[{ value: '', label: 'Not set' }, ...items]}
            value={value}
            onValueChange={next => onChange(String(next ?? ''))}
          >
            <SelectTrigger id={id} size="sm" className="w-full">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="">Not set</SelectItem>
              {items.map(item => (
                <SelectItem key={item.value} value={item.value}>
                  {item.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        );
      }
      case 'date':
      case 'datetime':
        return (
          <Input
            id={id}
            type={field.type === 'date' ? 'date' : 'datetime-local'}
            value={value}
            onChange={event => onChange(event.target.value)}
          />
        );
      case 'number':
        return (
          <Input
            id={id}
            inputMode="decimal"
            value={value}
            placeholder={field.placeholder}
            onChange={event => onChange(event.target.value)}
          />
        );
      default:
        return (
          <Input
            id={id}
            type={field.type === 'url' ? 'url' : 'text'}
            value={value}
            placeholder={field.placeholder}
            onChange={event => onChange(event.target.value)}
          />
        );
    }
  };
  return (
    <div className="flex flex-col gap-1">
      <FieldHeader label={field.label} tip={field.tip} htmlFor={id} />
      {input()}
    </div>
  );
};

const Entry = ({
  entry,
  index,
  onChange,
  onRemove,
  businessTypes,
}: {
  entry: SchemaEntry;
  index: number;
  onChange: (entry: SchemaEntry) => void;
  onRemove: () => void;
  businessTypes: string[];
}): JSX.Element => {
  const type = SCHEMA_TYPES[entry.type];
  const lists: Record<string, string[]> = { businessTypes };
  const missing = missingRequired(entry);
  return (
    <div className="flex flex-col gap-3 rounded-lg border border-border bg-card p-3">
      <div className="flex items-start justify-between gap-2">
        <div className="flex flex-col gap-0.5">
          <span className="text-xs font-semibold text-foreground">
            {index + 1}. {type?.label ?? entry.type}
          </span>
          {type && (
            <span className="text-[11px] text-muted-foreground">
              {type.description}
            </span>
          )}
        </div>
        <Button
          type="button"
          variant="ghost"
          size="icon-xs"
          aria-label={`Remove ${type?.label ?? entry.type}`}
          onClick={onRemove}
        >
          <Trash2Icon />
        </Button>
      </div>
      {missing.length > 0 && (
        <Callout tone="warning" className="text-xs">
          Google shows this as a rich result only with {missing.join(', ')}.
          Printed without, Search Console reports it as invalid.
        </Callout>
      )}
      {type ? (
        type.fields.map(field => (
          <Field
            key={field.key}
            field={{
              ...(field.optionsFrom
                ? { ...field, options: lists[field.optionsFrom] }
                : field),
              label: isRequired(entry.type, field.key)
                ? `${field.label} (required)`
                : field.label,
            }}
            value={entry.fields[field.key] ?? ''}
            onChange={value =>
              onChange({
                ...entry,
                fields: { ...entry.fields, [field.key]: value },
              })
            }
          />
        ))
      ) : (
        <p className="text-xs text-muted-foreground">
          This type has no form here; its fields print as saved.
        </p>
      )}
    </div>
  );
};

const validJson = (text: string): string | null => {
  if (text.trim() === '') {
    return null;
  }
  try {
    const decoded = JSON.parse(text);
    if (!decoded || typeof decoded !== 'object') {
      return 'JSON-LD is an object, or a list of objects.';
    }
    const items = Array.isArray(decoded)
      ? decoded
      : Array.isArray(decoded['@graph'])
        ? decoded['@graph']
        : [decoded];
    return items.every(item => item && typeof item['@type'] === 'string')
      ? null
      : 'Every object needs an @type.';
  } catch (error) {
    return error instanceof Error ? error.message : 'Not valid JSON.';
  }
};

/**
 * The Schema tab: the type the post gets by default, the entries added by
 * hand with a form per type, free JSON-LD, an import from another page's
 * markup, and the link to Google's Rich Results Test.
 */
export const SchemaTab = ({
  value,
  custom,
  defaultType,
  typeLabel,
  postLink,
  isProduct,
  businessTypes,
  onChange,
  onCustomChange,
}: {
  value: string;
  custom: string;
  defaultType: string;
  typeLabel: string;
  postLink: string;
  isProduct: boolean;
  businessTypes: string[];
  onChange: (value: string) => void;
  onCustomChange: (value: string) => void;
}): JSX.Element => {
  const entries = useMemo(() => parseEntries(value), [value]);
  const [adding, setAdding] = useState('');
  const [importUrl, setImportUrl] = useState('');
  const [importing, setImporting] = useState(false);
  const [importNote, setImportNote] = useState<{
    tone: 'info' | 'danger';
    text: string;
  } | null>(null);
  const customError = validJson(custom);
  const hasArticle = entries.some(entry =>
    ['Article', 'BlogPosting', 'NewsArticle'].includes(entry.type)
  );
  const hasProduct = entries.some(entry => entry.type === 'Product');

  const write = (next: SchemaEntry[]): void => onChange(serializeEntries(next));
  const add = (type: string): void => {
    if (type !== '' && SCHEMA_TYPES[type]) {
      write([...entries, { type, fields: {} }]);
    }
    setAdding('');
  };

  const importFrom = async (): Promise<void> => {
    setImporting(true);
    setImportNote(null);
    try {
      const answer = await apiFetch<{ nodes: Record<string, unknown>[] }>({
        path: '/recomaze/v1/seo/schema/import',
        method: 'POST',
        data: { url: importUrl },
      });
      // The server keeps only content (a product, an event, a recipe…),
      // without the page and the site it came from.
      const kept = answer.nodes;
      if (kept.length === 0) {
        setImportNote({
          tone: 'info',
          text: 'That page carries no schema worth copying.',
        });
      } else {
        const merged = custom.trim() === '' ? [] : [JSON.parse(custom)].flat();
        onCustomChange(JSON.stringify([...merged, ...kept], null, 2));
        setImportNote({
          tone: 'info',
          text: `${kept.length} object${kept.length === 1 ? '' : 's'} added to the custom JSON-LD below. Check them before publishing.`,
        });
      }
    } catch (error) {
      setImportNote({
        tone: 'danger',
        text:
          error instanceof Error && error.message
            ? error.message
            : 'That page could not be read.',
      });
    } finally {
      setImporting(false);
    }
  };

  const defaultLabel = SCHEMA_TYPES[defaultType]?.label ?? defaultType;
  const fromPost = FROM_POST_TYPES.includes(defaultType);
  const needsDetails = DETAIL_TYPES.includes(defaultType);
  const hasDefault = entries.some(entry => entry.type === defaultType);
  const baseline = isProduct
    ? 'Product, from the product data and the Product tab.'
    : defaultType === 'none' || defaultType === ''
      ? `WebPage only. Change the schema type of ${typeLabel.toLowerCase()} pages in Titles & meta.`
      : fromPost
        ? `${defaultLabel}, from Titles & meta, named and described by this page: its title, meta description and featured image.`
        : needsDetails
          ? `${defaultLabel}, from Titles & meta. It prints once this page has its details: add it below and fill what Google asks for.`
          : `${defaultLabel}, from Titles & meta, with the author, dates and featured image of the post.`;

  return (
    <>
      <div className="flex flex-col gap-1.5">
        <FieldHeader
          label="Default schema"
          tip="Every page prints the site, the page and the breadcrumbs. This is what this page is on top of that, unless you add one of the article types below."
        />
        <p className="text-xs text-muted-foreground">
          {baseline}
          {hasArticle && !isProduct && !fromPost && !needsDetails && (
            <> An article added below replaces the default.</>
          )}
          {fromPost && hasDefault && (
            <> The {defaultLabel} added below replaces it.</>
          )}
          {hasProduct && isProduct && (
            <> The Product added below replaces it.</>
          )}
        </p>
        {needsDetails && !hasDefault && !isProduct && (
          <div>
            <button
              type="button"
              onClick={() => add(defaultType)}
              className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-semibold text-foreground hover:bg-muted"
            >
              Add the {defaultLabel.toLowerCase()} details
            </button>
          </div>
        )}
      </div>

      <div className="flex flex-col gap-2">
        <FieldHeader
          label="Schema on this page"
          tip="Each entry becomes one object in the JSON-LD graph, linked to the page. Fill only what you know; empty fields are left out."
        />
        {entries.map((entry, index) => (
          <Entry
            // eslint-disable-next-line react/no-array-index-key
            key={index}
            entry={entry}
            index={index}
            onChange={next =>
              write(entries.map((item, at) => (at === index ? next : item)))
            }
            onRemove={() => write(entries.filter((item, at) => at !== index))}
            businessTypes={businessTypes}
          />
        ))}
        <Select
          items={[{ value: '', label: 'Add schema' }, ...TYPE_ITEMS]}
          value={adding}
          onValueChange={next => add(String(next ?? ''))}
        >
          <SelectTrigger size="sm" className="w-full" aria-label="Add schema">
            <PlusIcon className="size-3.5" />
            <SelectValue placeholder="Add schema" />
          </SelectTrigger>
          <SelectContent>
            {GROUPS.map(group => (
              <SelectGroup key={group}>
                <SelectLabel>{group}</SelectLabel>
                {Object.entries(SCHEMA_TYPES)
                  .filter(([, type]) => type.group === group)
                  .map(([slug, type]) => (
                    <SelectItem key={slug} value={slug}>
                      {type.label}
                    </SelectItem>
                  ))}
              </SelectGroup>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="flex flex-col gap-1.5">
        <FieldHeader
          label="Custom JSON-LD"
          tip="Any schema.org objects, pasted as JSON: one object, a list, or a @graph. They print as they are, without @context."
        />
        <Textarea
          rows={6}
          value={custom}
          spellCheck={false}
          className="font-mono text-xs"
          placeholder='{ "@type": "Recipe", "name": "…" }'
          onChange={event => onCustomChange(event.target.value)}
        />
        {customError && (
          <p className="text-xs text-red-600">
            {customError} Invalid JSON is saved but not printed.
          </p>
        )}
      </div>

      <div className="flex flex-col gap-1.5">
        <FieldHeader
          label="Import from a URL"
          tip="Copies the JSON-LD another page prints into the custom field above, so you can start from a competitor or from your old site."
        />
        <div className="flex gap-2">
          <Input
            type="url"
            value={importUrl}
            placeholder="https://example.com/page"
            onChange={event => setImportUrl(event.target.value)}
          />
          <Button
            type="button"
            variant="outline"
            size="sm"
            disabled={importing || !/^https?:\/\//.test(importUrl)}
            onClick={importFrom}
          >
            {importing ? 'Reading…' : 'Import'}
          </Button>
        </div>
        {importNote && (
          <Callout tone={importNote.tone} className="text-xs">
            {importNote.text}
          </Callout>
        )}
      </div>

      {postLink && (
        <Button
          nativeButton={false}
          type="button"
          variant="link"
          size="xs"
          className="self-start px-0"
          render={
            <a
              href={`https://search.google.com/test/rich-results?url=${encodeURIComponent(
                postLink
              )}`}
              target="_blank"
              rel="noreferrer"
            />
          }
        >
          Test in Google Rich Results Test
          <ExternalLinkIcon />
        </Button>
      )}
    </>
  );
};