"use client";

import { useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { PHASES as PHASE_GROUPS } from "@/lib/api/case-status";
import { STATUS_LABELS, STATUS_ICONS, STATUS_DESCRIPTIONS, STATUS_TONE } from "@/components/cases/status-badge";

/*
 * Collapsible guide showing the core statuses grouped by phase,
 * each with its icon, Hebrew label, color badge, and description.
 * Phases come from the SSoT (@/lib/api/case-status).
 * Intended to sit below the WorkflowTimeline in the case sidebar.
 */

export function StatusGuide() {
  const [open, setOpen] = useState(false);

  return (
    <div className="mt-4 border-t border-rule pt-3">
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1.5 text-[0.72rem] text-ink-muted hover:text-navy transition-colors w-full"
      >
        {open ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
        מפת סטטוסים
      </button>

      {open && (
        <div className="mt-3 space-y-3">
          {PHASE_GROUPS.map((group) => (
            <div key={group.label}>
              <h4 className="text-[0.7rem] font-semibold text-navy mb-1.5">
                {group.label}
              </h4>
              <ul className="space-y-1.5">
                {group.statuses.map((s) => {
                  const Icon = STATUS_ICONS[s];
                  return (
                    <li key={s} className="flex items-start gap-2">
                      <span
                        className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[0.65rem] font-medium shrink-0 ${STATUS_TONE[s]}`}
                      >
                        <Icon className="w-2.5 h-2.5" />
                        {STATUS_LABELS[s]}
                      </span>
                      <span className="text-[0.65rem] text-ink-muted leading-snug">
                        {STATUS_DESCRIPTIONS[s]}
                      </span>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}