'use client';
import React from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faMapMarkerAlt, faMapPin, faLocationDot, faChevronRight} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

interface LocationSettingsDetailProps {
    section: LocationProps;
}

export default function LocationSettingsDetail({
    section,
}: LocationSettingsDetailProps): React.JSX.Element {
    const t = useTranslations();

    return (
        <div className="space-y-6 px-2 pb-4">
            {/* Hero Section */}
            <div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
                <div className="flex items-start gap-4">
                    <div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
                        <FontAwesomeIcon icon={faMapMarkerAlt} className="w-8 h-8 text-primary"/>
                    </div>
                    <div className="flex-1 min-w-0">
                        <h2 className="text-2xl font-bold text-text-primary">{section.name}</h2>
                        <p className="text-text-secondary mt-2">
                            {t("locationComponent.elementsCount", {count: section.elements.length})}
                        </p>
                    </div>
                </div>
            </div>

            {/* Éléments en grille */}
            {section.elements.length === 0 ? (
                <div className="text-center py-12 text-text-secondary bg-secondary/10 rounded-xl border border-secondary/20">
                    <FontAwesomeIcon icon={faMapPin} className="w-8 h-8 mb-3 opacity-50"/>
                    <p>{t("locationComponent.noElementAvailable")}</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {section.elements.map(function (element: Element): React.JSX.Element {
                        return (
                            <div key={element.id} className="p-5 bg-secondary/20 rounded-xl border border-secondary/30 hover:border-primary/30 transition-colors">
                                {/* Element header */}
                                <div className="flex items-center gap-3 mb-3">
                                    <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
                                        <FontAwesomeIcon icon={faMapPin} className="w-5 h-5 text-primary"/>
                                    </div>
                                    <h3 className="text-text-primary font-semibold text-lg">{element.name}</h3>
                                </div>

                                {/* Description */}
                                <p className={`mb-4 ${element.description ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
                                    {element.description || '—'}
                                </p>

                                {/* Sub-elements */}
                                {element.subElements.length > 0 && (
                                    <div className="pt-4 border-t border-secondary/30">
                                        <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-3 flex items-center gap-2">
                                            <FontAwesomeIcon icon={faLocationDot} className="w-3 h-3"/>
                                            {t("locationComponent.subElementsHeading")} ({element.subElements.length})
                                        </h4>
                                        <div className="space-y-2">
                                            {element.subElements.map(function (subElement: SubElement): React.JSX.Element {
                                                return (
                                                    <div key={subElement.id} className="flex items-start gap-2 p-2 bg-dark-background/30 rounded-lg">
                                                        <FontAwesomeIcon icon={faChevronRight} className="w-3 h-3 text-primary mt-1 shrink-0"/>
                                                        <div className="min-w-0">
                                                            <p className="text-text-primary font-medium">{subElement.name}</p>
                                                            {subElement.description && (
                                                                <p className="text-text-secondary text-sm mt-1">{subElement.description}</p>
                                                            )}
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}
