'use client';

import { useEffect, useState } from 'react';
import { usePageTitle } from '@/hooks/usePageTitle';

export default function DebugSignaturesPage() {
  usePageTitle("Debug signatures");
  
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const [empRes, salRes] = await Promise.all([
          fetch('/api/signatures-electroniques/contrats?scope=employeur', { cache: 'no-store' }),
          fetch('/api/signatures-electroniques/contrats?scope=salarie', { cache: 'no-store' }),
        ]);

        console.log('Employeur response:', empRes.status, empRes.statusText);
        console.log('Salarié response:', salRes.status, salRes.statusText);

        const empData = await empRes.json();
        const salData = await salRes.json();

        console.log('Employeur data:', empData);
        console.log('Salarié data:', salData);

        setData({
          employeur: empData,
          salarie: salData
        });
      } catch (e: any) {
        console.error('Erreur:', e);
        setError(e.message);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) return <div className="p-4">Chargement...</div>;
  if (error) return <div className="p-4 text-red-600">Erreur: {error}</div>;

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Debug Signatures Électroniques</h1>
      
      <div className="space-y-6">
        <div>
          <h2 className="text-lg font-semibold">Contrats Employeur</h2>
          <div className="bg-gray-100 p-4 rounded overflow-auto max-h-64">
            <pre>{JSON.stringify(data?.employeur, null, 2)}</pre>
          </div>
        </div>

        <div>
          <h2 className="text-lg font-semibold">Contrats Salarié</h2>
          <div className="bg-gray-100 p-4 rounded overflow-auto max-h-64">
            <pre>{JSON.stringify(data?.salarie, null, 2)}</pre>
          </div>
        </div>
      </div>
    </div>
  );
}