nextcraft/apps/web/components/employer/defense-accordion.tsx

'use client';

import { useState } from 'react';
import { ChevronDown, ChevronRight, ShieldCheck } from 'lucide-react';
import { Badge } from '@nextcraft/ui';
import { matchBadgeClasses } from '../../lib/format';

/* -------------------------------------------------------------------------- */
/*  Types + mock transcript data                                              */
/* -------------------------------------------------------------------------- */

export interface DefenseSession {
  id: string;
  competencyName: string;
  score: number;
  date: string;
  transcript: Array<{ question: string; answer: string }>;
}

interface DefenseAccordionProps {
  sessions: DefenseSession[];
}

/* -------------------------------------------------------------------------- */
/*  Component                                                                 */
/* -------------------------------------------------------------------------- */

export function DefenseAccordion({ sessions }: DefenseAccordionProps) {
  const [openId, setOpenId] = useState<string | null>(sessions[0]?.id ?? null);

  return (
    <div className="flex flex-col gap-3">
      {sessions.map((session) => {
        const open = openId === session.id;
        return (
          <div
            key={session.id}
            className="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800"
          >
            <button
              type="button"
              onClick={() => setOpenId(open ? null : session.id)}
              className="flex w-full items-center gap-3 bg-white p-4 text-left transition-colors hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800"
              aria-expanded={open}
            >
              <ShieldCheck className="h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
              <div className="flex min-w-0 flex-1 flex-col">
                <span className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
                  {session.competencyName}
                </span>
                <span className="text-xs text-slate-500 dark:text-slate-400">
                  {new Date(session.date).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                  })}{' '}
                  · Defense session
                </span>
              </div>
              <span
                className={`inline-flex h-8 w-11 shrink-0 items-center justify-center rounded-full text-xs font-bold ring-2 ${matchBadgeClasses(
                  session.score,
                )}`}
              >
                {session.score}
              </span>
              {open ? (
                <ChevronDown className="h-4 w-4 shrink-0 text-slate-400" />
              ) : (
                <ChevronRight className="h-4 w-4 shrink-0 text-slate-400" />
              )}
            </button>
            {open && (
              <div className="border-t border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/60">
                <div className="flex flex-col gap-4">
                  {session.transcript.map((qa, idx) => (
                    <div key={idx} className="flex flex-col gap-1.5">
                      <div className="flex items-start gap-2">
                        <Badge variant="info">Q{idx + 1}</Badge>
                        <p className="text-sm font-medium text-slate-800 dark:text-slate-200">
                          {qa.question}
                        </p>
                      </div>
                      <div className="flex items-start gap-2 pl-1">
                        <span className="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded bg-slate-200 text-[10px] font-bold text-slate-600 dark:bg-slate-700 dark:text-slate-200">
                          A
                        </span>
                        <p className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                          {qa.answer}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}