'use client';

import { useRef } from 'react';
import { FileImage, Upload, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { VERIFICATION_DOC_TYPES, type VerificationDocType } from '@/lib/verificationDocs';

export type PendingDocUploads = Partial<Record<VerificationDocType, File>>;

interface WorkerDocUploadStepProps {
  files: PendingDocUploads;
  onChange: (files: PendingDocUploads) => void;
}

export function WorkerDocUploadStep({ files, onChange }: WorkerDocUploadStepProps) {
  const fileRefs = useRef<Partial<Record<VerificationDocType, HTMLInputElement | null>>>({});

  function setFile(type: VerificationDocType, file: File | null) {
    const next = { ...files };
    if (file) next[type] = file;
    else delete next[type];
    onChange(next);
  }

  return (
    <div className="space-y-4 md:space-y-5">
      <div>
        <p className="text-sm md:text-base font-medium text-slate-700">Verification documents</p>
        <p className="text-xs md:text-sm text-muted mt-0.5 leading-relaxed max-w-3xl">
          Upload now to get verified faster, or skip and add them later from your dashboard.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {VERIFICATION_DOC_TYPES.map((item) => {
        const selected = files[item.type];

        return (
          <div key={item.type} className="rounded-xl border border-border bg-slate-50 p-4 space-y-3">
            <div>
              <h3 className="text-sm font-semibold text-slate-900">
                {item.label}
                {item.required && <span className="text-red-500"> *</span>}
              </h3>
              <p className="text-xs text-muted mt-0.5">{item.description}</p>
            </div>

            {selected ? (
              <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-white px-3 py-2">
                <div className="flex items-center gap-2 min-w-0">
                  <FileImage className="h-4 w-4 text-primary shrink-0" />
                  <span className="text-sm text-slate-700 truncate">{selected.name}</span>
                </div>
                <button
                  type="button"
                  onClick={() => setFile(item.type, null)}
                  className="text-muted hover:text-red-500 shrink-0"
                  aria-label={`Remove ${item.label}`}
                >
                  <X className="h-4 w-4" />
                </button>
              </div>
            ) : null}

            <input
              ref={(el) => {
                fileRefs.current[item.type] = el;
              }}
              type="file"
              accept="image/*"
              className="hidden"
              onChange={(e) => {
                const file = e.target.files?.[0];
                e.target.value = '';
                if (!file) return;
                if (!file.type.startsWith('image/')) return;
                setFile(item.type, file);
              }}
            />

            <Button
              type="button"
              variant="outline"
              size="sm"
              className="gap-2"
              onClick={() => fileRefs.current[item.type]?.click()}
            >
              <Upload className="h-4 w-4" />
              {selected ? 'Replace file' : 'Choose file'}
            </Button>
          </div>
        );
      })}
      </div>
    </div>
  );
}

export async function uploadPendingVerificationDocs(files: PendingDocUploads) {
  const { uploadForm } = await import('@/lib/api');

  for (const [type, file] of Object.entries(files)) {
    if (!file) continue;
    const formData = new FormData();
    formData.append('document', file);
    formData.append('type', type);
    await uploadForm('/verifications', formData);
  }
}