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

const SplitView = ({ functionalities }) => {
  const [selected, setSelected] = useState(functionalities[0]?.id ?? null);

  useEffect(() => {
    if (!selected && functionalities.length) {
      setSelected(functionalities[0].id);
    }
  }, [functionalities, selected]);

  const selectedFunc = functionalities.find(f => f.id === selected);

  if (!selectedFunc) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-slate-500">
        No functionality data available.
      </div>
    );
  }

  return (
    <div className="flex gap-0 h-full border border-slate-200 rounded-xl overflow-hidden shadow-sm">
      <div className="w-72 border-r border-slate-200 bg-slate-50 overflow-y-auto flex-shrink-0">
        <div className="px-4 py-3 border-b border-slate-200 bg-white">
          <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Functionalities</h3>
        </div>
        {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 = req + rec || 1;

          return (
            <button
              key={func.id}
              onClick={() => setSelected(func.id)}
              className={`w-full text-left px-4 py-3 border-b border-slate-100 transition-all group ${
                isActive ? "bg-indigo-600 border-indigo-600" : "hover:bg-white"
              }`}
            >
              <div className="flex items-center gap-2 mb-2">
                <span className="text-base">{func.icon}</span>
                <span className={`font-semibold text-sm ${isActive ? "text-white" : "text-slate-700"}`}>
                  {func.name}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="flex-1 h-1 rounded-full overflow-hidden bg-slate-200">
                  <div
                    className={`h-full ${isActive ? "bg-indigo-300" : "bg-rose-400"}`}
                    style={{ width: `${Math.round((req / total) * 100)}%` }}
                  />
                </div>
                <span className={`text-[10px] font-medium ${isActive ? "text-indigo-200" : "text-slate-400"}`}>
                  {req + rec} req
                </span>
              </div>
              <div className={`flex gap-2 mt-1.5 text-[10px] font-medium ${isActive ? "text-indigo-200" : "text-slate-400"}`}>
                <span>● {req} required</span>
                <span>◆ {rec} recommended</span>
              </div>
            </button>
          );
        })}
      </div>

      <div className="flex-1 overflow-y-auto bg-white">
        <div className="px-6 py-4 border-b border-slate-100 bg-slate-50 sticky top-0">
          <div className="flex items-center gap-3 mb-1">
            <span className="text-2xl">{selectedFunc.icon}</span>
            <div>
              <h2 className="font-bold text-slate-800">{selectedFunc.name}</h2>
              <p className="text-xs text-slate-500">{selectedFunc.description}</p>
            </div>
          </div>
          <div className="mt-3">
            <StatPill
              req={selectedFunc.requirements.filter(r => r.level === "required").length}
              rec={selectedFunc.requirements.filter(r => r.level === "recommended").length}
            />
          </div>
        </div>

        <div className="p-6 space-y-3">
          {["required", "recommended"].map(level => {
            const group = selectedFunc.requirements.filter(r => r.level === level);
            if (!group.length) return null;
            return (
              <div key={level}>
                <div className={`text-[10px] font-bold uppercase tracking-widest mb-2 ${level === "required" ? "text-rose-500" : "text-amber-500"}`}>
                  {level === "required" ? "● Required" : "◆ Recommended"}
                </div>
                <div className="space-y-2">
                  {group.map(req => (
                    <div key={req.id} className={`rounded-lg p-4 border-l-4 ${level === "required" ? "border-rose-400 bg-rose-50" : "border-amber-400 bg-amber-50"}`}>
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-[10px] font-mono text-slate-400">{req.id}</span>
                        <Badge level={req.level} />
                      </div>
                      <p className="text-sm font-semibold text-slate-800 mb-1">{req.title}</p>
                      <p className="text-xs text-slate-600 leading-relaxed">{req.detail}</p>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

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