"use client";

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

/*
 * Collapsible guide showing all 13 statuses grouped by phase,
 * each with its icon, Hebrew label, color badge, and description.
 * Intended to sit below the WorkflowTimeline in the case sidebar.
 */

type PhaseGroup = {
  label: string;
  statuses: CaseStatus[];
};

const PHASE_GROUPS: PhaseGroup[] = [
  { label: "קליטה ועיבוד",  statuses: ["new", "uploading", "processing"] },
  { label: "הכנת תיק",       statuses: ["documents_ready", "analyst_verified", "research_complete", "outcome_set"] },
  { label: "ניתוח וכיוון",   statuses: ["brainstorming", "direction_approved", "analysis_enriched", "ready_for_writing"] },
  { label: "כתיבת טיוטה",    statuses: ["drafting", "qa_review", "drafted"] },
  { label: "סגירה",          statuses: ["exported", "reviewed", "final"] },
];

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>
  );
}