/**
 * Form
 * Fetches the active atlas schema and renders the accordion-based annotation
 * form, including the current photo or drawing display mode selector.
 */
import React, { useState } from 'react';
import { Accordion } from "@/components/ui/accordion";
import FormSection from './FormSection';
import { useQuery } from '@tanstack/react-query';
import { getFormSchema } from '@/api/generated';
import { ImageIcon, PenTool } from 'lucide-react';
import { useLanguage } from '../../context/LanguageContext';

function Form({ atlasId, data, onChange, disabled = false }) {
  const { t } = useLanguage();
  const [viewMode, setViewMode] = useState('photo');

  const { data: schemaResponse, isLoading, error } = useQuery({
    queryKey: ['formSchema', atlasId],
    queryFn: () => getFormSchema({ query: { atlasId } }),
    enabled: !!atlasId,
    refetchOnMount: true,
  });

  const sections = schemaResponse?.data || [];

  if (isLoading) return (
    <div className="p-12 text-center">
      <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
      <p className="text-slate-500 text-sm font-medium">{t('loadingSchema')}</p>
    </div>
  );

  if (error || (!atlasId && !isLoading)) return (
    <div className="p-8 text-center text-red-500 bg-red-50 rounded-2xl border border-red-100">
      <p className="font-bold text-sm">{t('errorFormLoad')}</p>
      <p className="text-amber-600 font-bold">{t('errorNoAtlas')}</p>
    </div>
  );

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between bg-slate-100 p-1.5 rounded-2xl border border-slate-200 h-[36px] sticky top-0 z-20 shadow-sm">
        <span className="text-[10px] font-black uppercase text-slate-500 ml-3 tracking-widest">
          {t('viewMode')}:
        </span>
        <div className="flex gap-1">
          <button
            onClick={() => setViewMode('photo')}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-xl text-xs font-bold transition-all ${
              viewMode === 'photo' ? 'bg-white text-blue-600 shadow-md' : 'text-slate-500'
            }`}
          >
            <ImageIcon size={14} /> {t('photos')}
          </button>
          <button
            onClick={() => setViewMode('drawing')}
            className={`flex items-center gap-2 px-4 py-1.5 rounded-xl text-xs font-bold transition-all ${
              viewMode === 'drawing' ? 'bg-white text-blue-600 shadow-md' : 'text-slate-500'
            }`}
          >
            <PenTool size={14} /> {t('drawings')}
          </button>
        </div>
      </div>

      <Accordion type="multiple" className="w-full space-y-4 font-sans text-slate-900">
        {sections.map((sekce, index) => (
          <FormSection
            key={sekce.id || index}
            sekce={sekce}
            data={data || {}}
            onChange={onChange}
            viewMode={viewMode}
            disabled={disabled}
          />
        ))}
      </Accordion>
    </div>
  );
}

export default Form;