"use client";

import React, { useEffect } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';
import Link from 'next/link';
import { Scale, ExternalLink, Drama, Video } from 'lucide-react';
import { useSearchParams } from 'next/navigation';

export default function MinimaCCNPage() {
  usePageTitle("Minima CCN");
  const searchParams = useSearchParams();
  const isEmbed = searchParams.get('embed') === '1';

  // Post height to parent for auto-resizing if embedded
  useEffect(() => {
    if (!isEmbed) return;
    function postHeight() {
      try {
        const h = document.documentElement.scrollHeight;
        window.parent?.postMessage({ type: 'minima-ccn:height', height: h }, '*');
      } catch {}
    }
    postHeight();
    const ro = new ResizeObserver(() => postHeight());
    ro.observe(document.body);
    window.addEventListener('load', postHeight);
    window.addEventListener('resize', postHeight);
    return () => {
      ro.disconnect();
      window.removeEventListener('load', postHeight);
      window.removeEventListener('resize', postHeight);
    };
  }, [isEmbed]);

  return (
    <div className={isEmbed ? "space-y-3" : "space-y-6"}>
      {!isEmbed ? (
        <>
          {/* En-tête */}
          <section className="rounded-2xl border bg-white p-6">
            <div className="flex items-start gap-3">
              <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
                <Scale className="w-6 h-6 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <h1 className="text-2xl font-semibold text-slate-900">Minima des CCN du spectacle</h1>
                <p className="text-sm text-slate-600 mt-2">Accédez aux minima actualisés par convention collective.</p>
              </div>
            </div>
          </section>
          {/* Grille des cartes CCN (desktop) */}
          <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link href="/minima-ccn/ccneac" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1">
              <div className="absolute top-4 right-4">
                <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span>
              </div>
              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-100 to-purple-100 border border-indigo-200 flex items-center justify-center mb-4">
                <Drama className="w-7 h-7 text-indigo-600" strokeWidth={1.6} />
              </div>
              <h2 className="text-xl font-semibold text-slate-900 mb-2">CCNEAC (IDCC 1285)</h2>
              <p className="text-sm text-slate-600 mb-4">Convention Collective Nationale des Entreprises Artistiques et Culturelles</p>
              <div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
            </Link>
            <Link href="/minima-ccn/ccnsvp" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-indigo-300 hover:-translate-y-1">
              <div className="absolute top-4 right-4"><span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span></div>
              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-100 to-cyan-100 border border-blue-200 flex items-center justify-center mb-4">
                <Drama className="w-7 h-7 text-blue-600" strokeWidth={1.6} />
              </div>
              <h2 className="text-xl font-semibold text-slate-900 mb-2">CCNSVP (IDCC 3090)</h2>
              <p className="text-sm text-slate-600 mb-4">Convention Collective Nationale du Spectacle Vivant Privé</p>
              <div className="inline-flex items-center gap-2 text-sm font-semibold text-indigo-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
            </Link>
            <Link href="/minima-ccn/ccnpa" className="group relative rounded-2xl border border-slate-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:border-cyan-300 hover:-translate-y-1">
              <div className="absolute top-4 right-4"><span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-sm">À jour 2025</span></div>
              <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-100 to-blue-100 border border-cyan-200 flex items-center justify-center mb-4">
                <Video className="w-7 h-7 text-cyan-600" strokeWidth={1.6} />
              </div>
              <h2 className="text-xl font-semibold text-slate-900 mb-2">CCNPA (IDCC 2642)</h2>
              <p className="text-sm text-slate-600 mb-4">Convention Collective Nationale de la Production Audiovisuelle</p>
              <div className="inline-flex items-center gap-2 text-sm font-semibold text-cyan-600 group-hover:gap-3 transition-all">Voir les minima<ExternalLink className="w-4 h-4" /></div>
            </Link>
          </section>
        </>
      ) : (
        // UI ultra compacte pour embed: simple liste de liens
        <section className="rounded-lg border bg-white p-2">
          <ul className="text-sm divide-y">
            <li>
              <Link href="/minima-ccn/ccnsvp?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
                <span className="font-semibold text-slate-900">CCNSVP</span>
                <span className="text-xs text-slate-500">Spectacle vivant privé</span>
              </Link>
            </li>
            <li>
              <Link href="/minima-ccn/ccneac?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
                <span className="font-semibold text-slate-900">CCNEAC</span>
                <span className="text-xs text-slate-500">Entreprises artistiques et culturelles</span>
              </Link>
            </li>
            <li>
              <Link href="/minima-ccn/ccnpa?embed=1" className="flex items-center justify-between py-2 px-2 hover:bg-slate-50 rounded">
                <span className="font-semibold text-slate-900">CCNPA</span>
                <span className="text-xs text-slate-500">Production audiovisuelle</span>
              </Link>
            </li>
          </ul>
        </section>
      )}
    </div>
  );
}
