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

const CardGrid = ({ functionalities }) => {
  const [selected, setSelected] = useState(null);
  const selectedFunc = functionalities.find(f => f.id === selected);

  return (
    <div className="flex gap-6 h-full">
      <div className="flex-1 overflow-y-auto">
        <div className="grid grid-cols-2 gap-4 pr-2" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))" }}>
          {functionalities.map(func => {
            const req = func.requirements.filter(r => r.level === "required").length;
            const rec = func.requirements.filter(r => r.level === "recommended").length;
            const isActive = selected === func.id;
            const total = func.requirements.length;
            const reqPct = total ? Math.round((req / total) * 100) : 0;

            return (
              <button
                key={func.id}
                onClick={() => setSelected(isActive ? null : func.id)}
                className={`text-left rounded-xl border-2 p-4 transition-all duration-200 hover:shadow-md group ${
                  isActive
                    ? "border-indigo-500 bg-indigo-50 shadow-md shadow-indigo-100"
                    : "border-slate-200 bg-white hover:border-indigo-300"
                }`}
              >
                <div className="flex items-start justify-between mb-3">
                  <span className="text-2xl">{func.icon}</span>
                  <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${isActive ? "bg-indigo-500 text-white" : "bg-slate-100 text-slate-500"}`}>
                    {func.requirements.length} total
                  </span>
                </div>
                <h3 className="font-bold text-slate-800 text-sm mb-1">{func.name}</h3>
                <p className="text-xs text-slate-500 mb-3 leading-relaxed">{func.description}</p>

                <div className="flex rounded-full overflow-hidden h-1.5 mb-3 bg-slate-100">
                  <div className="bg-rose-400 transition-all" style={{ width: `${reqPct}%` }} />
                  <div className="bg-amber-300 transition-all" style={{ width: `${100 - reqPct}%` }} />
                </div>

                <StatPill req={req} rec={rec} />
              </button>
            );
          })}
        </div>
      </div>

      <div
        className={`transition-all duration-300 overflow-hidden ${selectedFunc ? "w-80 opacity-100" : "w-0 opacity-0"}`}
        style={{ minWidth: selectedFunc ? 320 : 0 }}
      >
        {selectedFunc && (
          <div className="w-80 bg-white border border-slate-200 rounded-xl overflow-y-auto h-full shadow-lg">
            <div className="p-4 border-b border-slate-100 bg-slate-50 sticky top-0">
              <div className="flex items-center justify-between mb-1">
                <div className="flex items-center gap-2">
                  <span className="text-xl">{selectedFunc.icon}</span>
                  <h3 className="font-bold text-slate-800">{selectedFunc.name}</h3>
                </div>
                <button onClick={() => setSelected(null)} className="text-slate-400 hover:text-slate-700 text-lg leading-none">✕</button>
              </div>
              <p className="text-xs text-slate-500">{selectedFunc.description}</p>
            </div>
            <div className="p-4 space-y-3">
              {selectedFunc.requirements.map(req => (
                <div key={req.id} className="rounded-lg border border-slate-100 p-3 bg-slate-50 hover:bg-white transition-colors">
                  <div className="flex items-center justify-between mb-1.5">
                    <span className="text-[10px] font-mono text-slate-400">{req.id}</span>
                    <Badge level={req.level} />
                  </div>
                  <p className="text-xs font-semibold text-slate-700 mb-1">{req.title}</p>
                  <p className="text-[11px] text-slate-500 leading-relaxed">{req.detail}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

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