'use client';

import React, { useState } from 'react';
import { useForm, useFieldArray, Controller } from 'react-hook-form';
import { Upload, Plus, Trash2, FileCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Modal } from '@/components/ui/modal';
import { DOCUMENT_TYPES } from '@/data/document-types';
import { useUploadKycDocuments } from '@/services/kyc/queries';

interface UploadKycModalProps {
  userId: string;
  userFullName: string;
  onClose: () => void;
  onSuccess?: () => void;
}

interface FormValues {
  documents: Array<{
    type: string;
    file: File | null;
  }>;
}

export default function UploadKycModal({
  userId,
  userFullName,
  onClose,
  onSuccess,
}: UploadKycModalProps) {
  const [error, setError] = useState<string | null>(null);
  const uploadMutation = useUploadKycDocuments();

  const { control, register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      documents: [
        { type: 'AADHAAR', file: null },
        { type: 'PAN', file: null },
      ],
    },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'documents',
  });

  const onSubmit = async (values: FormValues) => {
    setError(null);
    const validDocs = values.documents.filter(
      (d): d is { type: string; file: File } => d.file !== null
    );

    if (validDocs.length === 0) {
      setError('Attach at least one document before submitting.');
      return;
    }

    try {
      await uploadMutation.mutateAsync({
        userId,
        documents: validDocs,
      });
      if (onSuccess) onSuccess();
      onClose();
    } catch (err: any) {
      setError(err?.response?.data?.message || 'Failed to process document uploads.');
    }
  };

  return (
    <Modal onClose={onClose} icon={Upload} title="Attach Verification Documents">
      <form onSubmit={handleSubmit(onSubmit)} className="p-4 space-y-4 text-left">
        <div className="p-2.5 rounded-lg bg-muted/30 border border-border/40 text-xs">
          <span className="text-[10px] text-muted-foreground block font-medium">Target Identity</span>
          <span className="font-bold text-foreground">{userFullName}</span>
        </div>

        {error && (
          <div className="p-2.5 rounded-lg border border-destructive/20 bg-destructive/5 text-destructive text-[10px] font-medium">
            {error}
          </div>
        )}

        <div className="space-y-3 max-h-80 overflow-y-auto pr-1">
          {fields.map((field, index) => (
            <div
              key={field.id}
              className="flex items-end gap-2 bg-muted/20 p-3 rounded-lg border border-border/30"
            >
              <div className="w-1/3">
                <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                  Type
                </label>
                <select
                  {...register(`documents.${index}.type` as const)}
                  className="w-full text-xs p-2 border border-border/40 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary cursor-pointer"
                >
                  {DOCUMENT_TYPES.map((dt) => (
                    <option key={dt.value} value={dt.value}>
                      {dt.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="w-2/3">
                <label className="block text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1">
                  File Asset
                </label>
                <Controller
                  control={control}
                  name={`documents.${index}.file` as const}
                  render={({ field: { onChange } }) => (
                    <input
                      type="file"
                      accept=".pdf,.png,.jpg,.jpeg"
                      onChange={(e) => onChange(e.target.files?.[0] || null)}
                      className="w-full text-xs text-muted-foreground file:mr-2 file:py-1 file:px-2.5 file:rounded-md file:border-0 file:text-[10px] file:font-bold file:bg-primary/10 file:text-primary hover:file:bg-primary/20 cursor-pointer"
                    />
                  )}
                />
              </div>

              {fields.length > 1 && (
                <button
                  type="button"
                  onClick={() => remove(index)}
                  className="text-muted-foreground/60 hover:text-destructive p-2 mb-0.5 rounded-lg hover:bg-destructive/10 transition-colors cursor-pointer"
                >
                  <Trash2 className="h-4 w-4" />
                </button>
              )}
            </div>
          ))}
        </div>

        <Button
          type="button"
          variant="outline"
          onClick={() => append({ type: 'OTHER', file: null })}
          className="h-8 text-[10px] gap-1 font-bold border-dashed w-full cursor-pointer"
        >
          <Plus className="h-3 w-3" /> Append Document Slot
        </Button>

        <div className="flex items-center justify-end gap-2 border-t border-border/10 pt-3 mt-4">
          <Button
            type="button"
            variant="ghost"
            onClick={onClose}
            className="h-8 rounded-lg px-3 text-xs font-semibold"
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={uploadMutation.isPending}
            className="h-8 rounded-lg px-3 text-xs font-semibold shadow-sm gap-1.5"
          >
            <FileCheck className="h-3.5 w-3.5 stroke-[2.5]" />
            <span>{uploadMutation.isPending ? 'Uploading...' : 'Submit Documents'}</span>
          </Button>
        </div>
      </form>
    </Modal>
  );
}