'use client';
import React from 'react';
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
import {ChevronRight, MapPin, Navigation} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import DetailHeroSection from '@/components/ui/DetailHeroSection';

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 */}
            <DetailHeroSection icon={MapPin} title={section.name}>
                <p className="text-text-secondary mt-2">
                    {t("locationComponent.elementsCount", {count: section.elements.length})}
                </p>
            </DetailHeroSection>
            
            {/* Éléments en grille */}
            {section.elements.length === 0 ? (
                <div
                    className="text-center py-12 text-text-secondary">
                    <MapPin className="w-8 h-8 mb-3 opacity-50" strokeWidth={1.75}/>
                    <p>{t("locationComponent.noElementAvailable")}</p>
                    <p className="text-sm mt-2 text-text-dimmed">{t("locationComponent.editToAdd")}</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-tertiary rounded-xl">
                                {/* 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">
                                        <MapPin className="w-5 h-5 text-primary" strokeWidth={1.75}/>
                                    </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-dimmed italic'}`}>
                                    {element.description || '—'}
                                </p>
                                
                                {/* Sub-elements */}
                                {element.subElements.length > 0 && (
                                    <div className="pt-4 border-t border-secondary">
                                        <h4 className="text-text-secondary text-xs uppercase tracking-wide mb-3 flex items-center gap-2">
                                            <Navigation className="w-3 h-3" strokeWidth={1.75}/>
                                            {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-secondary rounded-lg">
                                                        <ChevronRight className="w-3 h-3 text-primary mt-1 shrink-0"
                                                                      strokeWidth={1.75}/>
                                                        <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>
    );
}
