import { Users } from 'lucide-react';

import { StatePanel } from '@/components/ui/state-panel';
import { getOptionalErrorMessage } from '@/shared/errors/errorMessages';
import type {
  SafetyQuizCompletionSummary,
  SafetyQuizComplianceRow,
} from '@/business/safety-quiz/types';

interface SafetyQuizCompliancePanelProps {
  readonly rows: readonly SafetyQuizComplianceRow[];
  readonly summary: SafetyQuizCompletionSummary;
  readonly isLoading: boolean;
  readonly error: unknown;
}

export function SafetyQuizCompliancePanel({
  rows,
  summary,
  isLoading,
  error,
}: SafetyQuizCompliancePanelProps) {
  const errorMessage = getOptionalErrorMessage(error);

  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
        <Users size={16} className="text-violet-400" />
        Staff Completion
      </h3>
      {isLoading && (
        <StatePanel tone="indigo" alignment="center" loading className="border-0 bg-transparent py-2">
          Loading completion...
        </StatePanel>
      )}
      {errorMessage && <p className="text-xs text-red-400">{errorMessage}</p>}
      {!isLoading && !errorMessage && rows.length === 0 && (
        <p className="text-xs text-slate-500">No quiz results submitted for this week yet.</p>
      )}
      {rows.length > 0 && (
        <div className="space-y-2">
          {rows.map((staff) => (
            <div key={`${staff.name}-${staff.date}`} className="flex items-center justify-between p-2 rounded-lg bg-slate-700/30 border border-slate-700/30">
              <div>
                <p className="text-xs font-medium text-slate-200">{staff.name}</p>
                <p className="text-[10px] text-slate-500">{staff.role}</p>
              </div>
              <span className="text-[10px] font-semibold px-2 py-0.5 rounded-lg border bg-emerald-500/15 text-emerald-400 border-emerald-500/20">
                {staff.score}
              </span>
            </div>
          ))}
        </div>
      )}
      <div className="mt-3 pt-3 border-t border-slate-700/40">
        <div className="flex justify-between text-xs">
          <span className="text-slate-400">Completion Rate</span>
          <span className="font-bold text-emerald-400">{summary.completionRate}%</span>
        </div>
        <div className="h-2 bg-slate-700/50 rounded-full mt-1">
          <div
            className="h-full bg-emerald-500 rounded-full transition-all"
            style={{ width: `${summary.completionRate}%` }}
          />
        </div>
      </div>
    </div>
  );
}
