'use client';

import { useForm, Resolver } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Checkbox } from '@/components/ui/checkbox';
import { FileUploadZone } from '@/components/custom/file-upload-zone';
import { useRouter } from 'next/navigation';
import { Loader2 } from 'lucide-react';
import { useCreateCorrespondence, useUpdateCorrespondence } from '@/hooks/use-correspondence';
import { Organization } from '@/types/organization';
import { useOrganizations, useProjects, useCorrespondenceTypes, useDisciplines, useContracts } from '@/hooks/use-master-data';
import { CreateCorrespondenceDto } from '@/types/dto/correspondence/create-correspondence.dto';
import { useState, useEffect, useRef, useMemo } from 'react';
import { numberingApi } from '@/lib/api/numbering';
import { filesApi } from '@/lib/api/files';
import { toast } from 'sonner';

// Updated Zod Schema with all required fields
const correspondenceSchema = z.object({
  projectId: z.string().min(1, 'Please select a Project'),
  // [FIX v1.8.1] contractId optional เพราะ correspondences ไม่มี contract_id โดยตรง
  // จะ auto-populate จาก discipline เฉพาะ UI เท่านั้น
  contractId: z.string().optional(),
  documentTypeId: z.number().min(1, 'Please select a Document Type'),
  disciplineId: z.number().optional(),
  subject: z.string().min(5, 'Subject must be at least 5 characters'),
  description: z.string().optional(),
  body: z.string().optional(),
  remarks: z.string().optional(),
  dueDate: z.string().optional(), // ISO Date string
  documentDate: z.string().optional(),
  issuedDate: z.string().optional(),
  receivedDate: z.string().optional(),
  fromOrganizationId: z.string().min(1, 'Please select From Organization'),
  toOrganizationId: z.string().min(1, 'Please select To Organization'),
  ccOrganizationIds: z.array(z.string()).optional(), // CC organizations support
  importance: z.enum(['NORMAL', 'HIGH', 'URGENT']),
  attachments: z.array(z.instanceof(File)).optional(),
});

type FormData = z.infer<typeof correspondenceSchema>;

type ProjectOption = {
  publicId: string;
  projectName: string;
  projectCode: string;
};

type ContractOption = {
  publicId?: string;
  contractName?: string;
  contractCode?: string;
};

type CorrespondenceTypeOption = {
  id: number;
  typeName: string;
  typeCode: string;
};

interface DisciplineOption {
  id: number;
  disciplineCode: string;
  codeNameEn?: string;
  // [FIX v1.8.1] บาง API ส่ง contract relation มาด้วย → ใช้ resolve contractId
  contract?: {
    publicId?: string;
    contractName?: string;
    contractCode?: string;
  };
}

interface InitialCorrespondenceData {
  projectId?: number | string;
  project?: { publicId?: string };
  contract?: { publicId?: string };
  correspondenceTypeId?: number;
  type?: { id?: number; publicId?: string };
  disciplineId?: number;
  discipline?: {
    id?: number;
    publicId?: string;
    contract?: { publicId?: string };
  };
  revisions?: Array<{
    publicId?: string;
    isCurrent?: boolean;
    subject?: string;
    title?: string;
    description?: string;
    body?: string;
    remarks?: string;
    dueDate?: string;
    documentDate?: string;
    issuedDate?: string;
    receivedDate?: string;
    details?: { importance: 'NORMAL' | 'HIGH' | 'URGENT' };
  }>;
  originatorId?: number;
  originator?: { publicId?: string };
  recipients?: Array<{
    recipientType: string;
    recipientOrganizationId: number;
    recipientOrganization?: { publicId?: string };
  }>;
  correspondenceNumber?: string;
}

const extractArrayData = <T,>(value: unknown): T[] => {
  let current: unknown = value;

  for (let i = 0; i < 5; i += 1) {
    if (Array.isArray(current)) {
      return current as T[];
    }

    if (!current || typeof current !== 'object' || !('data' in current)) {
      return [];
    }

    current = (current as { data?: unknown }).data;
  }

  return Array.isArray(current) ? (current as T[]) : [];
};

const normalizePublicId = (value: unknown): string | undefined => {
  if (typeof value !== 'string') {
    return undefined;
  }

  const trimmed = value.trim();
  return trimmed.length > 0 ? trimmed : undefined;
};

const normalizeUuid = (value: unknown): string | undefined => {
  const normalized = normalizePublicId(value);
  return normalized ? normalized.toLowerCase() : undefined;
};

export function CorrespondenceForm({
  initialData,
  uuid,
  selectedRevisionId,
}: {
  initialData?: InitialCorrespondenceData;
  uuid?: string;
  selectedRevisionId?: string;
}) {
  const router = useRouter();
  const createMutation = useCreateCorrespondence();
  const updateMutation = useUpdateCorrespondence();

  // Fetch master data for dropdowns
  const { data: projectsData, isLoading: isLoadingProjects } = useProjects();
  const { data: organizations, isLoading: isLoadingOrgs } = useOrganizations();
  const { data: correspondenceTypesData, isLoading: isLoadingTypes } = useCorrespondenceTypes();
  const projects = (projectsData as ProjectOption[]) ?? [];
  const organizationOptions = extractArrayData<Organization>(organizations);
  const correspondenceTypes = extractArrayData<CorrespondenceTypeOption>(correspondenceTypesData);

  // Extract initial values if editing
  const normalizedSelectedRevisionId = normalizeUuid(selectedRevisionId);
  const selectedRevision = normalizedSelectedRevisionId
    ? initialData?.revisions?.find((r) => normalizeUuid(r.publicId) === normalizedSelectedRevisionId)
    : undefined;
  const defaultValues = useMemo<Partial<FormData>>(() => {
    const currentRevision = selectedRevision || initialData?.revisions?.find((r) => r.isCurrent) || initialData?.revisions?.[0];
    const initialToRecipient = initialData?.recipients?.find((r) => r.recipientType === 'TO');
    const initialCcRecipientIds =
      initialData?.recipients
        ?.filter((r) => r.recipientType === 'CC')
        .map((r) => normalizePublicId(r.recipientOrganization?.publicId))
        .filter((value): value is string => Boolean(value)) ?? [];

    return {
      projectId:
        normalizePublicId(initialData?.project?.publicId) ??
        normalizePublicId((initialData as Record<string, unknown>)?.projectId),
      contractId:
        normalizePublicId(initialData?.contract?.publicId) ??
        normalizePublicId(initialData?.discipline?.contract?.publicId) ??
        normalizePublicId((initialData as Record<string, unknown>)?.contractId as string),
      documentTypeId: initialData?.type?.id ?? initialData?.correspondenceTypeId,
      disciplineId: initialData?.discipline?.id ?? initialData?.disciplineId,
      subject: currentRevision?.subject || currentRevision?.title || '',
      description: currentRevision?.description || '',
      body: currentRevision?.body || '',
      remarks: currentRevision?.remarks || '',
      dueDate: currentRevision?.dueDate ? new Date(currentRevision.dueDate).toISOString().split('T')[0] : undefined,
      documentDate: currentRevision?.documentDate ? new Date(currentRevision.documentDate).toISOString().split('T')[0] : undefined,
      issuedDate: currentRevision?.issuedDate ? new Date(currentRevision.issuedDate).toISOString().split('T')[0] : undefined,
      receivedDate: currentRevision?.receivedDate ? new Date(currentRevision.receivedDate).toISOString().split('T')[0] : undefined,
      fromOrganizationId:
        normalizePublicId(initialData?.originator?.publicId) ??
        normalizePublicId((initialData as Record<string, unknown>)?.originatorId as string),
      toOrganizationId: normalizePublicId(initialToRecipient?.recipientOrganization?.publicId),
      ccOrganizationIds: initialCcRecipientIds,
      importance: currentRevision?.details?.importance || 'NORMAL',
    } as Partial<FormData>;
  }, [initialData, selectedRevision]);

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(correspondenceSchema) as Resolver<FormData>,
    defaultValues: defaultValues as FormData,
  });

  // Watch for dynamic updates of initialData to ensure form correctly populates
  useEffect(() => {
    if (initialData) {
      reset(defaultValues as FormData);
    }
  }, [initialData, selectedRevisionId, reset, defaultValues]);

  // Watch for controlled inputs
  const projectId = watch('projectId');
  const contractId = watch('contractId');
  const documentTypeId = watch('documentTypeId');
  const disciplineId = watch('disciplineId');
  const fromOrgId = watch('fromOrganizationId');
  const toOrgId = watch('toOrganizationId');

  // Fetch contracts based on selected project
  const { data: contractsData, isLoading: isLoadingContracts } = useContracts(projectId);
  const contracts = extractArrayData<ContractOption>(contractsData);

  // Fetch disciplines based on selected contract
  const { data: disciplinesData, isLoading: isLoadingDisciplines } = useDisciplines(contractId);
  const disciplines = extractArrayData<DisciplineOption>(disciplinesData);

  const didInitProjectReset = useRef(false);
  const didInitContractReset = useRef(false);

  // Reset dependent fields when project changes
  useEffect(() => {
    if (!didInitProjectReset.current) {
      didInitProjectReset.current = true;
      return;
    }

    if (projectId) {
      setValue('contractId', '');
      setValue('disciplineId', undefined);
    }
  }, [projectId, setValue]);

  // Reset discipline when contract changes
  useEffect(() => {
    if (!didInitContractReset.current) {
      didInitContractReset.current = true;
      return;
    }

    if (contractId) {
      setValue('disciplineId', undefined);
    }
  }, [contractId, setValue]);

  // [FIX v1.8.1] Auto-populate contractId จาก discipline เมื่อ edit mode
  // disciplines API ส่ง contract relation มาด้วย ถ้ามี discipline
  useEffect(() => {
    if (!initialData?.disciplineId) return;
    if (disciplines.length === 0) return;
    // ถ้ามี contractId ใน form แล้ว ไม่ต้อง override
    const currentContractId = watch('contractId');
    if (currentContractId) return;

    const matched = disciplines.find((d) => d.id === initialData.disciplineId);
    if (matched?.contract?.publicId) {
      setValue('contractId', matched.contract.publicId);
    }
  }, [initialData?.disciplineId, disciplines, setValue, watch]);

  const [isUploading, setIsUploading] = useState(false);

  const onSubmit = async (data: FormData) => {
    // Build recipients array with TO and CC
    const recipients = [
      { organizationId: data.toOrganizationId, type: 'TO' as const },
      ...(data.ccOrganizationIds?.map(orgId => ({ organizationId: orgId, type: 'CC' as const })) || [])
    ];

    // Phase 1: Upload attachments to temp storage
    let attachmentTempIds: string[] | undefined;
    const validFiles = (data.attachments || []).filter((f): f is File => f instanceof File && !('validationError' in f && (f as { validationError?: string }).validationError));
    if (validFiles.length > 0) {
      setIsUploading(true);
      try {
        const uploaded = await filesApi.uploadMany(validFiles);
        attachmentTempIds = uploaded.map((u) => u.tempId);
      } catch (error) {
        const message = error instanceof Error ? error.message : 'Failed to upload attachments';
        toast.error('Attachment upload failed', {
          description: message,
        });
        setIsUploading(false);
        return;
      }
      setIsUploading(false);
    }

    const payload: CreateCorrespondenceDto = {
      projectId: data.projectId,
      typeId: data.documentTypeId,
      disciplineId: data.disciplineId,
      subject: data.subject,
      description: data.description,
      body: data.body,
      remarks: data.remarks,
      dueDate: data.dueDate ? new Date(data.dueDate).toISOString() : undefined,
      documentDate: data.documentDate ? new Date(data.documentDate).toISOString() : undefined,
      issuedDate: data.issuedDate ? new Date(data.issuedDate).toISOString() : undefined,
      receivedDate: data.receivedDate ? new Date(data.receivedDate).toISOString() : undefined,
      originatorId: data.fromOrganizationId,
      attachmentTempIds,
      recipients,
      details: {
        importance: data.importance,
      },
    };

    if (uuid && initialData) {
      updateMutation.mutate(
        { uuid, data: payload },
        { onSuccess: () => router.push(`/correspondences/${uuid}`) }
      );
    } else {
      createMutation.mutate(payload, {
        onSuccess: () => router.push('/correspondences'),
      });
    }
  };

  const isPending = createMutation.isPending || updateMutation.isPending || isUploading;

  // -- Preview Logic --
  const [preview, setPreview] = useState<{ number: string; isDefaultTemplate: boolean } | null>(null);

  useEffect(() => {
    if (!projectId || !documentTypeId || !fromOrgId || !toOrgId) {
      setPreview(null);
      return;
    }

    const fetchPreview = async () => {
      // Don't preview or change number in edit mode
      if (uuid) {
        setPreview(null);
        return;
      }

      try {
        const res = await numberingApi.previewNumber({
          projectId,
          correspondenceTypeId: documentTypeId,
          disciplineId,
          originatorOrganizationId: fromOrgId,
          recipientOrganizationId: toOrgId,
        });
        setPreview({ number: res.previewNumber, isDefaultTemplate: res.isDefault });
      } catch (_err) {
        setPreview(null);
      }
    };

    const timer = setTimeout(fetchPreview, 500);
    return () => clearTimeout(timer);
  }, [projectId, documentTypeId, disciplineId, fromOrgId, toOrgId]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="max-w-3xl space-y-6">
      {/* Existing Document Number (Read Only) */}
      {initialData?.correspondenceNumber && (
        <div className="space-y-2">
          <Label>Current Document Number</Label>
          <div className="flex items-center gap-2">
            <Input
              value={initialData.correspondenceNumber}
              disabled
              readOnly
              className="bg-muted font-mono font-bold text-lg w-full"
            />
          </div>
        </div>
      )}

      {/* Preview Section - Only for New Documents */}
      {preview && !uuid && (
        <div
          className="p-4 rounded-md border bg-muted border-border"
        >
          <p className="text-sm font-semibold mb-1 flex items-center gap-2">
            Document Number Preview
          </p>
          <div className="flex items-center gap-3">
            <span
              className="text-xl font-bold font-mono tracking-wide text-primary"
            >
              {preview.number}
            </span>
            {preview.isDefaultTemplate && (
              <span className="text-[10px] uppercase font-semibold px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800 border border-yellow-200">
                Default Template
              </span>
            )}
          </div>
        </div>
      )}

      {/* Document Metadata Section */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Project Dropdown */}
        <div className="space-y-2">
          <Label>Project *</Label>
          <Select
            onValueChange={(v) => setValue('projectId', v)}
            value={projectId || undefined}
            disabled={isLoadingProjects}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingProjects ? 'Loading...' : 'Select Project'} />
            </SelectTrigger>
            <SelectContent>
              {projects.map((p) => (
                <SelectItem key={p.publicId} value={p.publicId}>
                  {p.projectName} ({p.projectCode})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.projectId && <p className="text-sm text-destructive">{errors.projectId.message}</p>}
        </div>

        {/* Contract Dropdown */}
        <div className="space-y-2">
          <Label>Contract *</Label>
          <Select
            onValueChange={(v) => setValue('contractId', v)}
            value={contractId || undefined}
            disabled={!projectId || isLoadingContracts}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingContracts ? 'Loading...' : 'Select Contract'} />
            </SelectTrigger>
            <SelectContent>
              {contracts.map((c) => {
                const contractValue = c.publicId;

                if (!contractValue) {
                  return null;
                }

                return (
                  <SelectItem key={contractValue} value={contractValue}>
                    {c.contractName || c.contractCode}
                  </SelectItem>
                );
              })}
              {!isLoadingContracts && contracts.length === 0 && (
                <SelectItem value="__no_contract_available__" disabled>
                  No contracts found for this project
                </SelectItem>
              )}
            </SelectContent>
          </Select>
          {errors.contractId && <p className="text-sm text-destructive">{errors.contractId.message}</p>}
        </div>

        {/* Document Type Dropdown */}
        <div className="space-y-2">
          <Label>Document Type *</Label>
          <Select
            onValueChange={(v) => setValue('documentTypeId', Number(v))}
            value={documentTypeId ? String(documentTypeId) : undefined}
            disabled={isLoadingTypes}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingTypes ? 'Loading...' : 'Select Type'} />
            </SelectTrigger>
            <SelectContent>
              {correspondenceTypes.map((t) => (
                <SelectItem key={t.id} value={String(t.id)}>
                  {t.typeName} ({t.typeCode})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.documentTypeId && <p className="text-sm text-destructive">{errors.documentTypeId.message}</p>}
        </div>

        {/* Discipline Dropdown (Optional) */}
        <div className="space-y-2">
          <Label>Discipline</Label>
          <Select
            onValueChange={(v) => setValue('disciplineId', v ? Number(v) : undefined)}
            value={disciplineId ? String(disciplineId) : undefined}
            disabled={!contractId || isLoadingDisciplines}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingDisciplines ? 'Loading...' : 'Select Discipline (Optional)'} />
            </SelectTrigger>
            <SelectContent>
              {disciplines.map((d) => (
                <SelectItem key={d.id} value={String(d.id)}>
                  {d.codeNameEn || d.disciplineCode}
                </SelectItem>
              ))}
              {!isLoadingDisciplines && disciplines.length === 0 && (
                <SelectItem value="__no_discipline_available__" disabled>
                  No disciplines found for this contract
                </SelectItem>
              )}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Organizations */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-2">
          <Label>From Organization *</Label>
          <Select
            onValueChange={(v) => setValue('fromOrganizationId', v)}
            value={fromOrgId || undefined}
            disabled={isLoadingOrgs}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingOrgs ? 'Loading...' : 'Select Organization'} />
            </SelectTrigger>
            <SelectContent>
              {organizationOptions.map((org) => (
                <SelectItem key={org.publicId} value={org.publicId}>
                  {org.organizationName} ({org.organizationCode})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.fromOrganizationId && <p className="text-sm text-destructive">{errors.fromOrganizationId.message}</p>}
        </div>

        <div className="space-y-2">
          <Label>To Organization *</Label>
          <Select
            onValueChange={(v) => setValue('toOrganizationId', v)}
            value={toOrgId || undefined}
            disabled={isLoadingOrgs}
          >
            <SelectTrigger>
              <SelectValue placeholder={isLoadingOrgs ? 'Loading...' : 'Select Organization'} />
            </SelectTrigger>
            <SelectContent>
              {organizationOptions.map((org) => (
                <SelectItem key={org.publicId} value={org.publicId}>
                  {org.organizationName} ({org.organizationCode})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {errors.toOrganizationId && <p className="text-sm text-destructive">{errors.toOrganizationId.message}</p>}
        </div>

        <div className="space-y-2">
          <Label>CC Organizations (Optional)</Label>
          <div className="space-y-2 max-h-32 overflow-y-auto border rounded-md p-3">
            {organizationOptions
              .filter(org => org.publicId !== toOrgId) // Exclude TO organization
              .map((org) => (
                <div key={org.publicId} className="flex items-center space-x-2">
                  <Checkbox
                    id={`cc-${org.publicId}`}
                    checked={watch('ccOrganizationIds')?.includes(org.publicId) || false}
                    onCheckedChange={(checked) => {
                      const currentCC = watch('ccOrganizationIds') || [];
                      if (checked) {
                        setValue('ccOrganizationIds', [...currentCC, org.publicId]);
                      } else {
                        setValue('ccOrganizationIds', currentCC.filter(id => id !== org.publicId));
                      }
                    }}
                  />
                  <Label htmlFor={`cc-${org.publicId}`} className="text-sm">
                    {org.organizationName} ({org.organizationCode})
                  </Label>
                </div>
              ))}
          </div>
          <p className="text-xs text-muted-foreground">
            Select organizations to receive a copy of this correspondence
          </p>
        </div>
      </div>

      {/* Subject */}
      <div className="space-y-2">
        <Label htmlFor="subject">Subject *</Label>
        <Input id="subject" {...register('subject')} placeholder="Enter subject" />
        {errors.subject && <p className="text-sm text-destructive">{errors.subject.message}</p>}
      </div>

      {/* Body */}
      <div className="space-y-2">
        <Label htmlFor="body">Body (Content)</Label>
        <Textarea id="body" {...register('body')} rows={6} placeholder="Enter letter content..." />
      </div>

      {/* Date Fields */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="space-y-2">
          <Label htmlFor="documentDate">Document Date</Label>
          <Input
            id="documentDate"
            type="date"
            {...register('documentDate')}
            onChange={(e) => {
              const val = e.target.value;
              setValue('documentDate', val, { shouldValidate: true, shouldDirty: true });
              if (val) {
                setValue('issuedDate', val, { shouldValidate: true, shouldDirty: true });
                setValue('receivedDate', val, { shouldValidate: true, shouldDirty: true });
                const d = new Date(val);
                d.setDate(d.getDate() + 7);
                setValue('dueDate', d.toISOString().split('T')[0], { shouldValidate: true, shouldDirty: true });
              }
            }}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="issuedDate">Issued Date</Label>
          <Input id="issuedDate" type="date" {...register('issuedDate')} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="receivedDate">Received Date</Label>
          <Input
            id="receivedDate"
            type="date"
            {...register('receivedDate')}
            onChange={(e) => {
              const val = e.target.value;
              setValue('receivedDate', val, { shouldValidate: true, shouldDirty: true });
              if (val) {
                const d = new Date(val);
                d.setDate(d.getDate() + 7);
                setValue('dueDate', d.toISOString().split('T')[0], { shouldValidate: true, shouldDirty: true });
              }
            }}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="dueDate">Due Date</Label>
          <Input id="dueDate" type="date" {...register('dueDate')} />
        </div>
      </div>

      {/* Remarks */}
      <div className="grid grid-cols-1 gap-4">
        <div className="space-y-2">
          <Label htmlFor="remarks">Remarks</Label>
          <Input id="remarks" {...register('remarks')} placeholder="Optional remarks" />
        </div>
      </div>

      {/* Description */}
      <div className="space-y-2">
        <Label htmlFor="description">Description (Internal Note)</Label>
        <Textarea id="description" {...register('description')} rows={2} placeholder="Enter description..." />
      </div>

      {/* Importance */}
      <div className="space-y-2">
        <Label>Importance</Label>
        <div className="flex gap-6 mt-2">
          <label className="flex items-center space-x-2 cursor-pointer">
            <input type="radio" value="NORMAL" {...register('importance')} className="accent-primary" />
            <span>Normal</span>
          </label>
          <label className="flex items-center space-x-2 cursor-pointer">
            <input type="radio" value="HIGH" {...register('importance')} className="accent-primary" />
            <span>High</span>
          </label>
          <label className="flex items-center space-x-2 cursor-pointer">
            <input type="radio" value="URGENT" {...register('importance')} className="accent-primary" />
            <span>Urgent</span>
          </label>
        </div>
      </div>

      {/* Attachments (only for new documents) */}
      {!initialData && (
        <div className="space-y-2">
          <Label>Attachments</Label>
          <FileUploadZone
            onFilesChanged={(files) => setValue('attachments', files)}
            multiple
            accept={['.pdf', '.dwg', '.docx', '.xlsx', '.zip']}
          />
        </div>
      )}

      {/* Actions */}
      <div className="flex justify-end gap-4 pt-6 border-t">
        <Button type="button" variant="outline" onClick={() => router.back()}>
          Cancel
        </Button>
        <Button type="submit" disabled={isPending}>
          {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {isUploading ? 'Uploading files...' : uuid ? 'Update Correspondence' : 'Create Correspondence'}
        </Button>
      </div>
    </form>
  );
}