import { AlertTriangle, ExternalLink } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useSearchManualIntervention } from '@/contexts/SearchManualInterventionContext';

function alertKindLabel(kind: string) {
  return kind === 'sms_verification' ? '手机短信验证码' : '验证码';
}

export function SearchManualInterventionBar() {
  const { latestAlert, openAlert, openingTaskId } = useSearchManualIntervention();

  if (!latestAlert) {
    return null;
  }

  const alertMessage = latestAlert.message || '检测到验证码，等待人工处理';

  return (
    <div className="shrink-0 px-6 pb-1">
      <div className="rounded-[22px] border border-orange-200 bg-orange-50/95 px-4 py-3 shadow-sm backdrop-blur">
        <div className="flex flex-wrap items-center gap-2">
          <Badge className="gap-1 bg-orange-600 text-white hover:bg-orange-600">
            <AlertTriangle className="h-3.5 w-3.5" />
            等待处理{alertKindLabel(latestAlert.kind)}
          </Badge>
          <span className="text-sm font-medium text-orange-950">{alertMessage}</span>
          <Button
            size="sm"
            variant="outline"
            className="ml-auto border-orange-300 bg-white/80 text-orange-900 hover:bg-white"
            onClick={() => { void openAlert(latestAlert); }}
            disabled={openingTaskId === latestAlert.taskId}
          >
              去处理
              <ExternalLink className="h-3.5 w-3.5" />
          </Button>
        </div>

        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-orange-900/80">
          <span>任务：{latestAlert.taskId.slice(0, 8)}</span>
          {latestAlert.batchId ? <span>批次：{latestAlert.batchId}</span> : null}
          {latestAlert.materialName ? <span>材料：{latestAlert.materialName}</span> : null}
          {latestAlert.pageUrl ? <span className="max-w-full truncate">页面：{latestAlert.pageUrl}</span> : null}
        </div>
      </div>
    </div>
  );
}
