const { useState } = React;
const { Badge, StatPill } = window.SpecComponents;

const Accordion = ({ functionalities }) => {
  const [open, setOpen] = useState(null);

  return (
    <div className="space-y-2 overflow-y-auto h-full pr-1">
      {functionalities.map(func => {
        const req = func.requirements.filter(r => r.level === "required").length;
        const rec = func.requirements.filter(r => r.level === "recommended").length;
        const isOpen = open === func.id;
        const total = req + rec || 1;

        return (
          <div
            key={func.id}
            className={`rounded-xl border-2 overflow-hidden transition-all duration-200 ${
              isOpen ? "border-indigo-400 shadow-md shadow-indigo-50" : "border-slate-200 hover:border-slate-300"
            }`}
          >
            <button
              onClick={() => setOpen(isOpen ? null : func.id)}
              className={`w-full text-left px-5 py-4 flex items-center gap-4 transition-colors ${
                isOpen ? "bg-indigo-50" : "bg-white hover:bg-slate-50"
              }`}
            >
              <span className="text-xl w-7 text-center">{func.icon}</span>

              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-1">
                  <span className="font-bold text-slate-800 text-sm">{func.name}</span>
                  <span className="text-[10px] font-semibold text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded-full">{total}</span>
                </div>
                <p className="text-xs text-slate-500 truncate">{func.description}</p>
              </div>

              <div className="flex items-center gap-2 flex-shrink-0">
                <StatPill req={req} rec={rec} />
              </div>

              <div className="w-20 h-1.5 rounded-full overflow-hidden bg-slate-100 flex-shrink-0">
                <div className="bg-rose-400 h-full" style={{ width: `${Math.round((req / total) * 100)}%` }} />
              </div>

              <span className={`text-slate-400 transition-transform duration-200 text-sm flex-shrink-0 ${isOpen ? "rotate-180" : ""}`}>▼</span>
            </button>

            {isOpen && (
              <div className="border-t border-indigo-100 bg-white">
                <div className="divide-y divide-slate-100">
                  {func.requirements.map(req => (
                    <div key={req.id} className="flex gap-4 px-5 py-3 hover:bg-slate-50 transition-colors">
                      <div className="flex-shrink-0 pt-0.5">
                        <Badge level={req.level} />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-0.5">
                          <span className="text-[10px] font-mono text-slate-400">{req.id}</span>
                          <span className="font-semibold text-slate-800 text-xs">{req.title}</span>
                        </div>
                        <p className="text-[11px] text-slate-500 leading-relaxed">{req.detail}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

window.SpecComponents = window.SpecComponents || {};
window.SpecComponents.Accordion = Accordion;