import React from 'react';
import Link from 'next/link';
import {Col, Container, Row} from 'react-bootstrap';
import {FaArrowLeft, FaArrowRight, FaCalendarAlt, FaMap, FaMapMarkerAlt} from 'react-icons/fa';
import CarteLeaflet from '@/components/global/CarteLeafletSingleClient';
import EventCardBootstrap from '@/components/Evenements/EvenementCardBootstrap/EventCardBootstrap';
import ErrorCustomComponent from '@/components/global/ErrorCustomComponent';
import initTranslations from '@/i18n';
import {getCommunesDeSubdivision, getEvenementsDeSubdivision, getSubdivision} from '@/services/subdivisionService';
import {ficheMetadata} from '@/utils/ficheTitle';
import {subdivisionHref} from '@/utils/subdivisionHref';
import {villeHref} from '@/utils/villeHref';
import 'leaflet/dist/leaflet.css';

type RouteProps = {
  params: Promise<{locale: string; subId: string}>;
  searchParams?: Promise<{page?: string}>;
};

export async function generateMetadata({params}: RouteProps) {
  const {subId} = await params;

  return ficheMetadata(async () => (await getSubdivision(subId)).subNom);
}

/**
 * Page d'une région (niveau 1) ou d'un département (niveau 2), spec L156 : en-tête cartographié,
 * départements de la région ou communes du département (paginées), prochains événements et lien
 * vers l'agenda filtré.
 */
export default async function Page({params, searchParams}: RouteProps) {
  const {locale, subId} = await params;
  const pageDemandee = Number((await searchParams)?.page ?? 1);
  const page = Number.isInteger(pageDemandee) && pageDemandee > 0 ? pageDemandee : 1;
  const {messages} = await initTranslations({locale});
  const t = (messages?.SubdivisionPage ?? {}) as Record<string, string>;

  try {
    const sub = await getSubdivision(subId);
    const estRegion = sub.subNiveau === 1;
    const [communes, evenements] = await Promise.all([
      estRegion ? Promise.resolve(null) : getCommunesDeSubdivision(sub, page),
      getEvenementsDeSubdivision(sub),
    ]);
    const departements = estRegion ? [...(sub.subdivisions ?? [])].sort((a, b) => a.subNom.localeCompare(b.subNom, 'fr')) : [];
    const lienAgenda = `/${locale}/evenements?${estRegion ? 'sub1' : 'sub2'}=${sub.subId}`;
    const tousLesEvenements = (t.all_events_of || 'Tous les événements : {nom}').replace('{nom}', sub.subNom);
    const nbPages = communes ? Math.max(1, Math.ceil(communes.total / communes.itemsPerPage)) : 1;
    const hrefPage = (n: number) => `${subdivisionHref(locale, sub)}?page=${n}`;
    const geolocalisee = sub.subGeoX != null && sub.subGeoY != null;

    return (
      <>
        <section className="tk-detail-hero">
          <div className="tk-detail-hero-bg"></div>
          <Container className="tk-detail-hero-content">
            <Row className="align-items-stretch g-4">
              {geolocalisee && (
                <Col lg={6}>
                  <div className="tk-map-wrapper">
                    <CarteLeaflet lieuAdresse="" lieuName={sub.subNom} position={[sub.subGeoX as number, sub.subGeoY as number]} zoom={sub.subGeoZoom ?? (estRegion ? 7 : 9)} />
                  </div>
                </Col>
              )}
              <Col lg={geolocalisee ? 6 : 12}>
                <div className="tk-detail-hero-info">
                  <span className="tk-badge tk-badge-warning mb-3">
                    <FaMap className="me-2" aria-hidden="true" />
                    {estRegion ? (t.region || 'Région') : (t.departement || 'Département')}
                  </span>
                  <h1 className="tk-detail-hero-title">{sub.subNom}</h1>
                  <div className="tk-location-breadcrumb">
                    {sub.subPay && <span>{sub.subPay.payNom}</span>}
                    {sub.subMere && (
                      <>
                        <span className="tk-breadcrumb-separator">›</span>
                        <Link href={subdivisionHref(locale, {subId: sub.subMere.subId, subNom: sub.subMere.subNom, subNiveau: 1})} className="tk-breadcrumb-link">{sub.subMere.subNom}</Link>
                      </>
                    )}
                  </div>
                  {communes && communes.total > 0 && (
                    <div className="tk-stats-row mt-4">
                      <div className="tk-stat">
                        <FaMapMarkerAlt className="tk-stat-icon" />
                        <span className="tk-stat-value">{communes.total}</span>
                        <span className="tk-stat-label">{t.communes_title || 'communes'}</span>
                      </div>
                    </div>
                  )}
                </div>
              </Col>
            </Row>
          </Container>
        </section>

        <section className="tk-section">
          <Container>
            {/* Agenda : toujours présent */}
            <div className="tk-section-card" data-testid="subdivision-agenda">
              <div className="tk-section-card-header">
                <h2 className="tk-section-card-title">
                  <span className="tk-section-card-title-icon tk-section-card-title-icon-orange"><FaCalendarAlt /></span>
                  {t.next_events || 'Prochains événements'}
                </h2>
              </div>
              <div className="tk-section-card-body">
                {evenements.length > 0 ? (
                  <Row className="g-4">
                    {evenements.map((event) => (
                      <Col key={event.eveId} xs={12} md={6}>
                        <EventCardBootstrap eveDate={event.eveDate} eveId={event.eveId} groupes={event.aenParticipants} tevLibelle={event.eveTev.tevLibelle} />
                      </Col>
                    ))}
                  </Row>
                ) : (
                  <p className="text-muted">{t.no_upcoming_events || 'Aucun événement à venir'}</p>
                )}
                <div className={`text-center ${evenements.length > 0 ? 'mt-5' : 'mt-3'}`}>
                  <Link className="tk-btn tk-btn-primary" href={lienAgenda}>
                    {tousLesEvenements}
                    <FaArrowRight className="ms-2" aria-hidden="true" />
                  </Link>
                </div>
              </div>
            </div>

            {/* Région : ses départements */}
            {estRegion && departements.length > 0 && (
              <div className="tk-section-card" data-testid="departements">
                <div className="tk-section-card-header">
                  <h2 className="tk-section-card-title">
                    <span className="tk-section-card-title-icon tk-section-card-title-icon-green"><FaMap /></span>
                    {t.departements_title || 'Départements'}
                    <span className="tk-section-card-count ms-2">({departements.length})</span>
                  </h2>
                </div>
                <div className="tk-section-card-body">
                  <Row className="g-3">
                    {departements.map((departement) => (
                      <Col key={departement.subId} xs={12} sm={6} md={4} lg={3}>
                        <Link href={subdivisionHref(locale, {subId: departement.subId, subNom: departement.subNom, subNiveau: 2})} className="tk-link-card">
                          <FaMapMarkerAlt style={{color: 'var(--tk-green)', flexShrink: 0}} />
                          <span className="tk-link-card-text">{departement.subNom}</span>
                          <FaArrowRight className="tk-link-card-arrow" />
                        </Link>
                      </Col>
                    ))}
                  </Row>
                </div>
              </div>
            )}

            {/* Département : ses communes, paginées */}
            {communes && communes.communes.length > 0 && (
              <div className="tk-section-card" data-testid="communes">
                <div className="tk-section-card-header">
                  <h2 className="tk-section-card-title">
                    <span className="tk-section-card-title-icon tk-section-card-title-icon-green"><FaMapMarkerAlt /></span>
                    {t.communes_title || 'Communes'}
                    <span className="tk-section-card-count ms-2">({communes.total})</span>
                  </h2>
                </div>
                <div className="tk-section-card-body">
                  <Row className="g-3">
                    {communes.communes.map((commune) => (
                      <Col key={commune.vilId} xs={12} sm={6} md={4} lg={3}>
                        <Link href={villeHref(locale, commune.vilId, commune.vilNom)} className="tk-link-card">
                          <FaMapMarkerAlt style={{color: 'var(--tk-green)', flexShrink: 0}} />
                          <span className="tk-link-card-text">
                            {commune.vilNom}
                            {commune.vilCodepostal && <small className="d-block" style={{color: 'var(--tk-gray-500)', fontSize: '0.8em'}}>{commune.vilCodepostal}</small>}
                          </span>
                          <FaArrowRight className="tk-link-card-arrow" />
                        </Link>
                      </Col>
                    ))}
                  </Row>
                  {nbPages > 1 && (
                    <nav className="tk-magpage__pagination" aria-label="pagination">
                      {page > 1 ? (
                        <Link href={hrefPage(page - 1)} className="tk-btn tk-btn-outline"><FaArrowLeft className="me-2" aria-hidden="true" />{t.pagination_prev || 'Communes précédentes'}</Link>
                      ) : <span />}
                      <span className="tk-magpage__pagination-page">{(t.page_of || 'Page {page} sur {total}').replace('{page}', String(page)).replace('{total}', String(nbPages))}</span>
                      {page < nbPages ? (
                        <Link href={hrefPage(page + 1)} className="tk-btn tk-btn-outline">{t.pagination_next || 'Communes suivantes'}<FaArrowRight className="ms-2" aria-hidden="true" /></Link>
                      ) : <span />}
                    </nav>
                  )}
                </div>
              </div>
            )}
          </Container>
        </section>
      </>
    );
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : 'An error occurred';
    return <ErrorCustomComponent message={`Error loading subdivision: ${errorMessage}`} statusCode={errorMessage.includes('not found') ? 404 : 500} />;
  }
}