/**
 * FormSection
 * Renders one atlas category and its trait options, including per-section
 * completion progress for the active annotation.
 */
import React from 'react';
import { AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
import { CheckCircle2, Circle } from "lucide-react";
import FormOption from './FormOption';
import { useLanguage } from '../../context/LanguageContext';

export default function FormSection({ sekce, data, onChange, viewMode, disabled = false }) {
  const { l, t } = useLanguage();
  
  const totalTraits = sekce.znaky.length;
  const filledTraits = sekce.znaky.filter(znak => {
    const value = data?.[znak.id];
    return value !== undefined && value !== null && value !== '';
  }).length;

  const isComplete = filledTraits === totalTraits;
  const isInProgress = filledTraits > 0 && filledTraits < totalTraits;
  const radius = 8;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (filledTraits / totalTraits) * circumference;

  return (
    <AccordionItem
      value={sekce.nazev_cs}
        className={`border rounded-xl px-2 transition-all duration-500 ${isComplete ? "bg-[#f4faf5] border-green-200" :
          isInProgress ? "bg-amber-50/50 border-amber-100" :
            "bg-white border-slate-200"
        }`}
    >
      <div className="sticky top-[36px] z-10 bg-inherit rounded-t-xl border-b border-transparent data-[state=open]:border-slate-100">
        <AccordionTrigger className="hover:no-underline py-4 px-2">
          <div className="flex items-center justify-between w-full pr-4">
            <div className="flex flex-col items-start gap-0.5">
              <span className={`text-sm font-black tracking-widest transition-colors ${isComplete ? "text-green-700" :
                  isInProgress ? "text-amber-700" :
                    "text-slate-500 group-hover:text-blue-600"
                }`}>
                {l(sekce, 'nazev').toUpperCase()}
              </span>
              <span className={`text-[10px] font-bold ${isInProgress ? "text-amber-600" : "text-slate-400"}`}>
                {filledTraits} / {totalTraits} {t('completed')}
              </span>
            </div>

            <div className="relative flex items-center justify-center w-6 h-6">
              {isComplete ? (
                <CheckCircle2 className="w-6 h-6 fill-green-600 text-white animate-in zoom-in duration-300" />
              ) : isInProgress ? (
                <div className="relative w-5 h-5">
                  <svg className="w-full h-full -rotate-90">
                    <circle cx="10" cy="10" r={radius} fill="transparent" stroke="currentColor" strokeWidth="3" className="text-amber-200" />
                    <circle cx="10" cy="10" r={radius} fill="transparent" stroke="currentColor" strokeWidth="3" strokeDasharray={circumference} strokeDashoffset={offset} strokeLinecap="round" className="text-amber-500 transition-all duration-500 ease-in-out" />
                  </svg>
                </div>
              ) : (
                <Circle className="w-5 h-5 text-slate-200" />
              )}
            </div>
          </div>
        </AccordionTrigger>
      </div>

      <AccordionContent className="pt-2 pb-4 space-y-8 px-2">
        {sekce.znaky.map((znak) => (
          <div key={znak.id} className="space-y-4 bg-white/50 p-4 rounded-lg border border-slate-100/50 shadow-sm">
            <div className="space-y-1">
              <label className="text-sm font-black uppercase italic text-blue-900 tracking-wide">
                {l(znak, 'label')}
              </label>
              {l(znak, 'popis') && (
                <p className="text-[13px] text-slate-600 leading-snug font-medium">
                  {l(znak, 'popis')}
                </p>
              )}
            </div>

            <div
              className="grid gap-2 pt-2"
              style={{
                gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
                gridAutoRows: '1fr',
                maxWidth: '920px',
                justifyContent: 'start'
              }}
            >
              {(znak.options || []).map((opt) => (
                <FormOption
                  key={opt.label_cs}
                  opt={opt}
                  isSelected={data?.[znak.id] === opt.label_cs}
                  onChange={(val) => onChange(znak.id, val)}
                  znakLabel={l(znak, 'label')}
                  znakPopis={l(znak, 'popis')}
                  viewMode={viewMode}
                  disabled={disabled}
                />
              ))}
            </div>
          </div>
        ))}
      </AccordionContent>
    </AccordionItem>
  );
}