import { useEffect, useState } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  Building2Icon,
  CheckIcon,
  ClockIcon,
  TriangleAlertIcon,
  ExternalLinkIcon,
  FileTextIcon,
  LocateFixedIcon,
  MapPinnedIcon,
} from 'lucide-react';
import { useForm, useWatch, type FieldErrors } from 'react-hook-form';
import { Link, useSearchParams } from 'react-router-dom';
import { toast } from 'sonner';
import { z } from 'zod';

import { AddressSearch } from '../../components/seo/address-search';
import {
  OptionRow,
  OptionSection,
  SelectRow,
  TextRow,
  ToggleRow,
} from '../../components/seo/option-row';
import {
  SeoPage,
  SeoPageError,
  SeoPageHeader,
  SeoPageLoading,
} from '../../components/seo/seo-page';
import {
  SettingsPanel,
  SettingsSection,
  SettingsShell,
  type SectionItem,
} from '../../components/seo/settings-shell';
import { ModuleOffNotice } from '../../components/seo/module-off-notice';
import { Button } from '../../components/ui/button';
import { CONTACT_KEYS, localSection } from '../../lib/seo/option-sections';
import { PHONE_ERROR, isPhoneOrEmpty } from '../../lib/seo/phone';
import { resetSectionFields, sectionFields } from '../../lib/seo/reset-section';
import { firstErrorPath, useSeoSettings } from '../../lib/seo/use-seo-settings';
import type {
  ISeoAddress,
  ISeoHoursRead,
  ISeoSettings,
} from '../../service/seo/seo.interface';
import {
  readSeoHours,
  searchSeoAddress,
  updateSeoSettings,
} from '../../service/seo/seo.service';

import { LOCAL, LOCAL_SECTIONS, PAGES } from './settings.copy';

/**
 * How each line of the opening hours reads, as crawlers will get it, and
 * the lines that cannot be read and so never reach them.
 */
const HoursReading = ({ text }: { text: string }): JSX.Element | null => {
  const [lines, setLines] = useState<ISeoHoursRead['lines']>([]);
  useEffect(() => {
    if (text.trim() === '') {
      setLines([]);
      return undefined;
    }
    const timer = window.setTimeout(() => {
      readSeoHours(text)
        .then(result => setLines(result.lines))
        .catch(() => setLines([]));
    }, 400);
    return () => window.clearTimeout(timer);
  }, [text]);
  if (lines.length === 0) {
    return null;
  }
  return (
    <ul className="flex flex-col gap-1">
      {lines.map((line, index) => (
        <li
          // eslint-disable-next-line react/no-array-index-key
          key={index}
          className={
            line.read
              ? 'flex items-start gap-1.5'
              : 'flex items-start gap-1.5 text-amber-700 dark:text-amber-400'
          }
        >
          {line.read ? (
            <CheckIcon className="mt-px size-3.5 shrink-0 text-emerald-600" />
          ) : (
            <TriangleAlertIcon className="mt-px size-3.5 shrink-0" />
          )}
          {line.read
            ? `${line.days}: ${line.time}`
            : `Not understood, so left out: “${line.text}”`}
        </li>
      ))}
    </ul>
  );
};

const coordinate = (limit: number) =>
  z
    .string()
    .trim()
    .refine(
      value =>
        value === '' ||
        (Number.isFinite(Number(value)) && Math.abs(Number(value)) <= limit),
      `A decimal number between -${limit} and ${limit}, or empty.`
    );

const schema = z.object({
  local: z.object({
    business_type: z.string(),
    name: z.string().trim().max(120, 'Too long.'),
    street: z.string().trim().max(200, 'Too long.'),
    locality: z.string().trim().max(120, 'Too long.'),
    region: z.string().trim().max(120, 'Too long.'),
    postal_code: z.string().trim().max(20, 'Too long.'),
    country: z.string().trim().max(60, 'Too long.'),
    phone: z.string().trim().refine(isPhoneOrEmpty, PHONE_ERROR),
    email: z
      .string()
      .trim()
      .refine(
        value => value === '' || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
        'Not an email address.'
      ),
    price_range: z.string().trim().max(30, '30 characters at most.'),
    latitude: coordinate(90),
    longitude: coordinate(180),
    opening_hours: z.string(),
    about_page: z.coerce.number().int().min(0),
    contact_page: z.coerce.number().int().min(0),
    show_map: z.boolean(),
    map_provider: z.enum(['osm', 'google']),
    google_maps_key: z.string().trim().max(80, 'Too long.'),
    multiple_locations: z.boolean(),
  }),
});

type FormValues = z.input<typeof schema>;
type FormOutput = z.output<typeof schema>;

const SECTION_ITEMS: SectionItem[] = [
  {
    key: 'business',
    label: LOCAL_SECTIONS.business.title,
    description: LOCAL_SECTIONS.business.description,
    icon: Building2Icon,
  },
  {
    key: 'contact',
    label: LOCAL_SECTIONS.contact.title,
    description: LOCAL_SECTIONS.contact.description,
    icon: ClockIcon,
  },
  {
    key: 'pages',
    label: LOCAL_SECTIONS.pages.title,
    description: LOCAL_SECTIONS.pages.description,
    icon: FileTextIcon,
  },
  {
    key: 'locations',
    label: LOCAL_SECTIONS.locations.title,
    description: LOCAL_SECTIONS.locations.description,
    icon: MapPinnedIcon,
  },
];

const BUSINESS_KEYS = [
  'name',
  'street',
  'locality',
  'region',
  'postal_code',
  'country',
] as const;

const toFormValues = (settings: ISeoSettings): FormValues => ({
  local: { ...settings.local },
});

/**
 * The coordinates of the address typed in the fields above, for a merchant
 * who filled them by hand. The lookup goes through the site, like the search
 * box: the map services want to know which application is calling.
 */
const GeocodeButton = ({
  address,
  onFound,
}: {
  address: string[];
  onFound: (latitude: string, longitude: string) => void;
}): JSX.Element => {
  const [busy, setBusy] = useState(false);
  const [note, setNote] = useState('');
  const query = address
    .map(part => part.trim())
    .filter(Boolean)
    .join(', ');

  const lookUp = async (): Promise<void> => {
    setBusy(true);
    setNote('');
    try {
      const { items } = await searchSeoAddress(query);
      const found = items.find(item => item.latitude !== '');
      if (!found) {
        setNote('No match; check the address or type the coordinates by hand.');

        return;
      }
      onFound(found.latitude, found.longitude);
      setNote(`Found: ${found.label}`);
    } catch {
      setNote('The lookup failed; try again in a moment.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="flex flex-col gap-1">
      <div>
        <Button
          type="button"
          variant="outline"
          size="sm"
          disabled={busy || query === ''}
          onClick={lookUp}
        >
          <LocateFixedIcon className={busy ? 'animate-pulse' : undefined} />
          Find coordinates from the address
        </Button>
      </div>
      {note && <p className="text-xs text-muted-foreground">{note}</p>}
    </div>
  );
};

/**
 * A small map around the coordinates typed in, from the service the
 * settings name: Google Maps with the key, OpenStreetMap otherwise.
 */
const MapPreview = ({
  latitude,
  longitude,
  provider,
  googleKey,
}: {
  latitude: string;
  longitude: string;
  provider: string;
  googleKey: string;
}): JSX.Element | null => {
  const lat = Number(latitude);
  const lng = Number(longitude);
  // Past the poles or the date line (a latitude still being typed) the map
  // threw "Invalid LngLat" at the page.
  if (
    latitude.trim() === '' ||
    longitude.trim() === '' ||
    !Number.isFinite(lat) ||
    !Number.isFinite(lng) ||
    Math.abs(lat) > 90 ||
    Math.abs(lng) > 180
  ) {
    return null;
  }
  const point = encodeURIComponent(`${lat},${lng}`);
  const bbox = [lng - 0.01, lat - 0.01, lng + 0.01, lat + 0.01].join(',');
  const key = googleKey.trim();
  const src =
    provider === 'google' && key !== ''
      ? `https://www.google.com/maps/embed/v1/place?key=${encodeURIComponent(key)}&q=${point}&zoom=15`
      : `https://www.openstreetmap.org/export/embed.html?bbox=${encodeURIComponent(bbox)}&layer=mapnik&marker=${point}`;
  return (
    <iframe
      key={src}
      title="Map preview"
      className="h-56 w-full rounded-lg border border-border"
      src={src}
      loading="lazy"
    />
  );
};

const SeoLocalSettings = (): JSX.Element => {
  const { settings, setSettings, error } = useSeoSettings();
  const [params, setParams] = useSearchParams();
  const [saving, setSaving] = useState(false);
  const section = params.get('section') ?? 'business';
  const setSection = (next: string): void =>
    setParams(next === 'business' ? {} : { section: next }, { replace: true });

  const form = useForm<FormValues, unknown, FormOutput>({
    resolver: zodResolver(schema),
    defaultValues: { local: {} as FormValues['local'] },
  });
  const {
    control,
    register,
    setValue,
    getValues,
    handleSubmit,
    reset,
    formState: { errors, isDirty },
  } = form;
  const latitude = useWatch({ control, name: 'local.latitude' }) ?? '';
  const openingHours = useWatch({ control, name: 'local.opening_hours' });
  const longitude = useWatch({ control, name: 'local.longitude' }) ?? '';
  const [street, postalCode, locality, region, country] = useWatch({
    control,
    name: [
      'local.street',
      'local.postal_code',
      'local.locality',
      'local.region',
      'local.country',
    ],
  }).map(value => String(value ?? ''));
  const multiple = Boolean(
    useWatch({ control, name: 'local.multiple_locations' })
  );
  const mapProvider =
    useWatch({ control, name: 'local.map_provider' }) ?? 'osm';
  const googleKey = useWatch({ control, name: 'local.google_maps_key' }) ?? '';

  useEffect(() => {
    if (settings) {
      reset(toFormValues(settings));
    }
  }, [settings, reset]);

  const onSubmit = async (values: FormOutput): Promise<void> => {
    setSaving(true);
    try {
      setSettings(await updateSeoSettings(values));
      toast.success('Local SEO settings saved');
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const onInvalid = (invalid: FieldErrors<FormValues>): void => {
    const path = firstErrorPath(invalid);
    if (path) {
      setSection(localSection(path));
    }
    toast.error('Some fields need a fix before saving');
  };

  const belongs = (path: string): boolean => localSection(path) === section;
  const resettable =
    settings !== null &&
    sectionFields(getValues(), settings.defaults, belongs).length > 0;
  const resetSection = (): void => {
    if (settings) {
      resetSectionFields(setValue, getValues(), settings.defaults, belongs);
    }
  };

  if (error) {
    return <SeoPageError message={error} />;
  }
  if (!settings) {
    return <SeoPageLoading />;
  }

  const pageOptions = [
    { value: '0', label: 'None' },
    ...settings.pages.map(page => ({
      value: String(page.id),
      label: page.title || `#${page.id}`,
    })),
  ];

  return (
    <SeoPage>
      <form
        onSubmit={handleSubmit(onSubmit, onInvalid)}
        className="flex flex-col gap-6"
      >
        <SeoPageHeader
          title={PAGES.local.title}
          description={PAGES.local.description}
        />
        <ModuleOffNotice module="local_seo">
          Local SEO is off: the business below is not in the schema, and the
          contact and store locator shortcodes print nothing.
        </ModuleOffNotice>
        <SettingsShell
          sections={SECTION_ITEMS}
          section={section}
          onSectionChange={setSection}
          isDirty={isDirty}
          saving={saving}
          onDiscard={() => reset()}
          onReset={resettable ? resetSection : undefined}
        >
          <SettingsSection value="business">
            <SettingsPanel>
              <OptionSection>
                <SelectRow
                  control={control}
                  name="local.business_type"
                  copy={LOCAL.business_type}
                  options={settings.business_types.map(type => ({
                    value: type,
                    label: type.replace(/([a-z])([A-Z])/g, '$1 $2'),
                  }))}
                />
                <OptionRow copy={LOCAL.address_search}>
                  <AddressSearch
                    onPick={(address: ISeoAddress) => {
                      const found: Array<[keyof FormValues['local'], string]> =
                        [
                          ['street', address.street],
                          ['locality', address.locality],
                          ['region', address.region],
                          ['postal_code', address.postal_code],
                          ['country', address.country],
                          ['latitude', address.latitude],
                          ['longitude', address.longitude],
                        ];
                      found.forEach(([field, value]) => {
                        // A field the service could not fill keeps what the
                        // merchant already typed rather than being emptied.
                        if (value === '') return;
                        setValue(`local.${field}`, value, {
                          shouldDirty: true,
                        });
                      });
                    }}
                  />
                </OptionRow>
                {BUSINESS_KEYS.map(key => (
                  <TextRow
                    key={key}
                    register={register}
                    name={`local.${key}`}
                    copy={LOCAL[key]}
                    error={errors.local?.[key]?.message}
                  />
                ))}
              </OptionSection>
            </SettingsPanel>
          </SettingsSection>
          <SettingsSection value="contact">
            <SettingsPanel>
              <OptionSection>
                {CONTACT_KEYS.map(key => (
                  <TextRow
                    key={key}
                    register={register}
                    name={`local.${key}`}
                    copy={LOCAL[key]}
                    error={errors.local?.[key]?.message}
                  />
                ))}
                <SelectRow
                  control={control}
                  name="local.map_provider"
                  copy={LOCAL.map_provider}
                  options={[
                    { value: 'osm', label: 'OpenStreetMap (free, no key)' },
                    {
                      value: 'google',
                      label: 'Google Maps (needs an API key)',
                    },
                  ]}
                />
                {mapProvider === 'google' && (
                  <TextRow
                    register={register}
                    name="local.google_maps_key"
                    copy={LOCAL.google_maps_key}
                    placeholder="AIza…"
                    error={errors.local?.google_maps_key?.message}
                  />
                )}
                <OptionRow
                  copy={{
                    label: 'Map check',
                    description: 'Where the coordinates above land.',
                    tip: 'Find coordinates asks OpenStreetMap for the address typed above and fills the two fields. Check the pin: a street name that exists twice lands on the wrong one now and then.',
                  }}
                >
                  <GeocodeButton
                    address={[street, postalCode, locality, region, country]}
                    onFound={(lat, lng) => {
                      setValue('local.latitude', lat, { shouldDirty: true });
                      setValue('local.longitude', lng, { shouldDirty: true });
                    }}
                  />
                  {section === 'contact' && (
                    <MapPreview
                      latitude={String(latitude)}
                      longitude={String(longitude)}
                      provider={String(mapProvider)}
                      googleKey={String(googleKey)}
                    />
                  )}
                  {String(latitude).trim() === '' && (
                    <p className="text-sm text-muted-foreground">
                      Type the latitude and longitude to see the spot.
                    </p>
                  )}
                </OptionRow>
                <TextRow
                  register={register}
                  name="local.opening_hours"
                  copy={LOCAL.opening_hours}
                  multiline
                  hint={<HoursReading text={String(openingHours ?? '')} />}
                />
              </OptionSection>
            </SettingsPanel>
          </SettingsSection>
          <SettingsSection value="pages">
            <SettingsPanel>
              <OptionSection>
                <SelectRow
                  control={control}
                  name="local.about_page"
                  copy={LOCAL.about_page}
                  options={pageOptions}
                />
                <SelectRow
                  control={control}
                  name="local.contact_page"
                  copy={LOCAL.contact_page}
                  options={pageOptions}
                />
                <ToggleRow
                  control={control}
                  name="local.show_map"
                  copy={LOCAL.show_map}
                />
              </OptionSection>
              <p className="py-4 text-xs leading-relaxed text-muted-foreground">
                The contact block and the store locator take the theme&rsquo;s
                look. See them as the theme prints them, and add your own CSS,
                under{' '}
                <Link
                  to="/seo/general?section=frontend"
                  className="font-medium text-foreground underline-offset-4 hover:underline"
                >
                  General settings → Front-end
                </Link>
                .
              </p>
            </SettingsPanel>
          </SettingsSection>
          <SettingsSection value="locations">
            <SettingsPanel>
              <OptionSection>
                <ToggleRow
                  control={control}
                  name="local.multiple_locations"
                  copy={LOCAL.multiple_locations}
                />
                <OptionRow
                  copy={{
                    label: 'Manage locations',
                    description: settings.local.multiple_locations
                      ? `${settings.locations.count} published location${
                          settings.locations.count === 1 ? '' : 's'
                        }. Each has its address, hours and coordinates in its own box; the main business above fills what a branch leaves empty.`
                      : 'Save with the switch on, then the Locations menu appears in WordPress.',
                  }}
                >
                  <div className="flex flex-wrap items-center gap-2">
                    <Button
                      nativeButton={false}
                      type="button"
                      variant="outline"
                      size="sm"
                      disabled={!multiple || !settings.local.multiple_locations}
                      render={<a href={settings.locations.admin_url} />}
                    >
                      Open the Locations list
                      <ExternalLinkIcon />
                    </Button>
                    <Button
                      nativeButton={false}
                      type="button"
                      variant="ghost"
                      size="sm"
                      disabled={settings.locations.pins === 0}
                      render={
                        <a
                          href={settings.locations.kml_url}
                          target="_blank"
                          rel="noreferrer"
                        />
                      }
                    >
                      locations.kml
                      <ExternalLinkIcon />
                    </Button>
                  </div>
                </OptionRow>
                <OptionRow
                  copy={{
                    label: 'On the site',
                    description:
                      'Where the locations show up once the switch is on.',
                  }}
                >
                  <ul className="flex flex-col gap-1.5 text-sm text-muted-foreground">
                    <li>
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">
                        [recomaze_store_locator]
                      </code>{' '}
                      lists every location with a search box and a map;
                      attributes category=&quot;slug&quot;, map=&quot;0&quot;,
                      search=&quot;0&quot;, height=&quot;420&quot;.
                    </li>
                    <li>
                      <code className="rounded bg-muted px-1 py-0.5 text-xs">
                        [recomaze_contact_info location=&quot;ID&quot;]
                      </code>{' '}
                      shows one branch the way the shortcode shows the head
                      office.
                    </li>
                    <li>
                      Each location page carries a LocalBusiness entry with
                      parentOrganization pointing at the business above, and the
                      /locations/ archive lists them all.
                    </li>
                  </ul>
                </OptionRow>
              </OptionSection>
            </SettingsPanel>
          </SettingsSection>
        </SettingsShell>
      </form>
    </SeoPage>
  );
};

export default SeoLocalSettings;