import React from 'react';
import type {Metadata} from 'next';
import Link from 'next/link';
import {notFound} from 'next/navigation';
import {Col, Container, Row} from 'react-bootstrap';
import {FaInfoCircle} from 'react-icons/fa';

import http, {HttpError} from '@/http';
import initTranslations from '@/i18n';
import ArticleBody from '@/components/Articles/ArticleBody';
import PropositionEvenementForm from '@/components/PropositionEvenement/PropositionEvenementForm';
import {getMediaPage} from '@/services/mediaPageService';
import {initialValuesFromEvenement} from '@/services/propositionService';
import {evenementHref} from '@/utils/evenementHref';
import {evenementLibelle, ficheMetadata} from '@/utils/ficheTitle';

export const dynamic = 'force-dynamic';
export const revalidate = 0;

/** Slug de la page Kasour (« Pages du site ») qui porte le texte de présentation. */
export const SLUG_TEXTE_MODIFICATION = 'modification-evenement';

type RouteProps = {params: Promise<{locale: string; eveId: string}>};

/** L'événement publié, ou null s'il n'existe pas / n'est plus visible sur le site. */
async function chargerEvenement(eveId: string): Promise<any | null> {
  try {
    const response = await http.get(`/evenements/${eveId}`);
    return response.data?.eveValide === 1 ? response.data : null;
  } catch (error) {
    if (error instanceof HttpError && error.status === 404) {
      return null;
    }
    throw error;
  }
}

async function chargerTypes(): Promise<any[]> {
  const response = await http.get('/evenement_type_evenements?page=1&itemsPerPage=80&order%5BtevDpr.dprId%5D=asc');
  return response.data['hydra:member'] ?? [];
}

function dateLongue(locale: string, iso: string): string {
  return new Intl.DateTimeFormat(locale, {dateStyle: 'full'}).format(new Date(iso));
}

export async function generateMetadata({params}: RouteProps): Promise<Metadata> {
  return ficheMetadata(async () => {
    const {locale, eveId} = await params;
    const [event, {messages}] = await Promise.all([chargerEvenement(eveId), initTranslations({locale})]);
    if (!event) {
      return null;
    }
    const titre = messages?.PropositionEvenementPage?.modification_title ?? 'Modifier un événement';
    return `${titre} : ${evenementLibelle(event, dateLongue(locale, event.eveDate))}`;
  });
}

/**
 * Formulaire de modification d'un événement (spec L58-L64) : le formulaire de proposition
 * pré-rempli avec la fiche, rattaché à l'événement, avec le texte administré en Kasour.
 */
export default async function Page({params}: RouteProps) {
  const {locale, eveId} = await params;
  const [event, typeEvents, {messages}, texte] = await Promise.all([
    chargerEvenement(eveId),
    chargerTypes(),
    initTranslations({locale}),
    getMediaPage(SLUG_TEXTE_MODIFICATION, locale),
  ]);
  if (!event) {
    notFound();
  }

  const t = (messages?.PropositionEvenementPage ?? {}) as Record<string, string>;
  const libelle = evenementLibelle(event, dateLongue(locale, event.eveDate));
  const href = evenementHref(locale, event.eveId, `${event.eveTev?.tevLibelle ?? ''} ${event.eveVil?.vilNom ?? ''}`);

  return (
    <section className="tk-section tk-bg-light tk-proposition tk-modification">
      <Container>
        <Row className="justify-content-center">
          <Col lg={8}>
            <div className="tk-section-head mb-4" data-ghost="Kemm">
              <div>
                <h1 className="tk-proposition__title">{t.modification_title ?? 'Proposer une modification'}</h1>
                <p className="tk-proposition__lead">
                  {t.modification_for ?? "Modification de l'événement"}{' '}
                  <Link href={href} className="tk-modification__evenement">{libelle}</Link>
                </p>
              </div>
            </div>
          </Col>
        </Row>
        <Row className="justify-content-center">
          <Col lg={8}>
            <div className="tk-info-banner mb-5">
              <div className="tk-info-banner-icon">
                <FaInfoCircle />
              </div>
              <div className="tk-info-banner-content">
                {texte ? <ArticleBody html={texte.contenu} /> : <p className="mb-0">{t.modification_lead}</p>}
              </div>
            </div>
            <div className="tk-form-card">
              <PropositionEvenementForm
                typeEvents={typeEvents}
                mode="modification"
                evenementId={event.eveId}
                evenementHref={href}
                initialValues={initialValuesFromEvenement(event)}
              />
            </div>
          </Col>
        </Row>
      </Container>
    </section>
  );
}