import { ArrowLeft, MessageSquare, ShieldAlert } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Application } from '@/lib/mock-data';
import { SlaBadge } from '@/components/sla/SlaBadge';
import { SlaStatusSnapshot } from '@/services/sla.service';

interface ApplicationDetailsHeaderProps {
  application: Application;
  slaStatus?: SlaStatusSnapshot | null;
  isNonResponsive: boolean;
  isAdmin: boolean;
  onBack: () => void;
  onOpenWorknotes: () => void;
}

export function ApplicationDetailsHeader({
  application,
  slaStatus,
  isNonResponsive,
  isAdmin,
  onBack,
  onOpenWorknotes,
}: ApplicationDetailsHeaderProps) {
  return (
    <>
      {isNonResponsive && (
        <div 
            className="bg-red-50 border border-red-200 p-4 rounded-2xl flex items-center justify-between animate-in fade-in slide-in-from-top-4 duration-500"
            data-testid="onboarding-details-non-responsive-banner"
        >
          <div className="flex items-center gap-4">
            <div className="bg-red-100 p-2 rounded-xl">
              <ShieldAlert className="w-6 h-6 text-red-600" />
            </div>
            <div>
              <h3 className="text-sm font-black text-red-900 tracking-tight leading-none uppercase">Applicant Flagged Non-Responsive</h3>
              <p className="text-red-700 text-[11px] font-bold uppercase tracking-widest mt-1 opacity-80">Audit process is currently on hold due to missing cooperation</p>
            </div>
          </div>
          {isAdmin && (
            <Button
              variant="outline"
              size="sm"
              className="bg-white border-red-200 text-red-600 hover:bg-red-50 font-black text-[10px] uppercase tracking-widest hidden sm:block h-9"
              data-testid="onboarding-details-review-audit-button"
              onClick={() => {
                const worknotesTab = document.querySelector('[value="worknotes"]') as HTMLElement;
                worknotesTab?.click();
              }}
            >
              Review Audit
            </Button>
          )}
        </div>
      )}

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Button variant="outline" size="icon" onClick={onBack} className="shrink-0" data-testid="onboarding-details-back-button">
            <ArrowLeft className="w-4 h-4" />
          </Button>
          <div className="truncate">
            <h1 className="text-slate-900 truncate leading-tight" data-testid="onboarding-details-application-name">{application.name}</h1>
            <p className="text-slate-600 truncate text-sm" data-testid="onboarding-details-registration-number">{application.registrationNumber}</p>
            {slaStatus && (
              <div className="mt-1">
                <SlaBadge status={slaStatus} />
              </div>
            )}
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            className="relative hover:bg-amber-50 hover:border-amber-300 hover:text-amber-700 transition-all shadow-sm"
            onClick={onOpenWorknotes}
            data-testid="onboarding-details-view-work-notes"
          >
            <MessageSquare className="w-4 h-4 mr-2" />
            View Work Notes
          </Button>
        </div>
      </div>
    </>
  );
}