"use client";

import Link from "next/link";
import { useState, useCallback } from "react";
import { EditModeProvider, useEditMode } from "@/components/EditModeProvider";
import { EditableText } from "@/components/EditableText";
import { EditModeToggle } from "@/components/EditModeToggle";
import { HeroSlider } from "@/components/HeroSlider";
import { BookingCalendar } from "@/components/BookingCalendar";
import type { HomeContent } from "./page";
import {
  MapPinIcon,
  HomeIcon,
  HomeModernIcon,
  MapIcon,
  DocumentTextIcon,
} from "@heroicons/react/24/outline";
import type { ComponentType, SVGProps } from "react";

const FEATURE_ICON_MAP: Record<string, ComponentType<SVGProps<SVGSVGElement>>> = {
  MapPinIcon,
  HomeIcon,
  MapIcon,
  DocumentTextIcon,
};

function HomeInner({
  content,
  setContent,
  sliderImages,
  isAdmin,
}: {
  content: HomeContent;
  setContent: (c: HomeContent) => void;
  sliderImages: string[];
  isAdmin: boolean;
}) {
  const { setDirty } = useEditMode();

  function updateFeature(i: number, field: keyof HomeContent["features"][0], val: string) {
    const features = content.features.map((f, idx) =>
      idx === i ? { ...f, [field]: val } : f
    );
    setContent({ ...content, features });
    setDirty(true);
  }

  return (
    <>
      <HeroSlider images={sliderImages} />

      <section className="max-w-5xl mx-auto px-4 py-16">
        <div className="flex items-center justify-center gap-3 mb-10">
          <HomeModernIcon className="w-8 h-8 text-sky-600" />
          <span className="text-3xl font-bold text-sky-800">Angolo di Pace</span>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {content.features.map((f, i) => (
            <Link
              key={f.href}
              href={f.href}
              className="group bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-md hover:border-sky-200 transition-all"
            >
              <div className="mb-3">
                {(() => { const Icon = FEATURE_ICON_MAP[f.icon]; return Icon ? <Icon className="w-9 h-9 text-sky-500" /> : null; })()}
              </div>
              <h3 className="text-lg font-semibold text-gray-800 mb-2 group-hover:text-sky-700 transition-colors">
                <EditableText
                  value={f.title}
                  onChange={(val) => updateFeature(i, "title", val)}
                />
              </h3>
              <p className="text-sm text-gray-500">
                <EditableText
                  value={f.desc}
                  onChange={(val) => updateFeature(i, "desc", val)}
                  multiline
                />
              </p>
            </Link>
          ))}
        </div>
      </section>

      <BookingCalendar isAdmin={isAdmin} />
    </>
  );
}

export function HomeClient({
  initialContent,
  isAdmin,
  sliderImages,
}: {
  initialContent: HomeContent;
  isAdmin: boolean;
  sliderImages: string[];
}) {
  const [content, setContent] = useState(initialContent);
  const getContent = useCallback(() => content, [content]);

  return (
    <EditModeProvider>
      <HomeInner content={content} setContent={setContent} sliderImages={sliderImages} isAdmin={isAdmin} />
      {isAdmin && <EditModeToggle page="home" getContent={getContent} />}
    </EditModeProvider>
  );
}
