@hed-hog/operations 0.0.300 → 0.0.301

package/hedhog/frontend/app/_components/contract-wizard-sheet.tsx.ejs

@@ -0,0 +1,3520 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import {
+  BadgeDollarSign,
+  BriefcaseBusiness,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  CopyPlus,
+  Download,
+  FileSpreadsheet,
+  FileText,
+  LayoutTemplate,
+  LoaderCircle,
+  NotebookText,
+  Save,
+  Sparkles,
+  Trash2,
+  Upload,
+  UserRound,
+  Users,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { fetchOperations, mutateOperations } from '../_lib/api';
+import type {
+  OperationsCollaborator,
+  OperationsContract,
+  OperationsContractDetails,
+  OperationsContractTemplate,
+} from '../_lib/types';
+import {
+  formatCurrency,
+  formatDate,
+  formatEnumLabel,
+} from '../_lib/utils/format';
+import { parseNumberInput, trimToNull } from '../_lib/utils/forms';
+import { CollaboratorSelectWithCreate } from './collaborator-select-with-create';
+import { ContractContentEditor } from './contract-content-editor';
+import { ContractTemplateSelectWithCreate } from './contract-template-select-with-create';
+import { PersonSelectWithCreate } from './person-select-with-create';
+import { SectionCard } from './section-card';
+
+type CreationMode = 'blank' | 'template' | 'upload' | 'duplicate' | 'ai_prompt';
+
+type PartyFieldMode = 'existing' | 'new';
+
+type PersonValueOption = {
+  id?: number;
+  value: string;
+  label: string;
+  normalizedValue: string;
+  isPrimary: boolean;
+};
+
+type PersonContactRecord = {
+  id?: number;
+  value?: string | null;
+  is_primary?: boolean;
+  contact_type_id?: number;
+  contact_type?: {
+    id?: number;
+    code?: string;
+  } | null;
+};
+
+type PersonDocumentRecord = {
+  id?: number;
+  value?: string | null;
+  document_type_id?: number;
+  document_type?: {
+    id?: number;
+    code?: string;
+  } | null;
+};
+
+type PersonAddressRecord = {
+  id?: number;
+  line1?: string | null;
+  line2?: string | null;
+  city?: string | null;
+  state?: string | null;
+  is_primary?: boolean;
+  address_type?: string | null;
+  postal_code?: string | null;
+  country_code?: string | null;
+};
+
+type PersonDetailsRecord = {
+  id: number;
+  name: string;
+  type?: string | null;
+  status?: string | null;
+  contact?: PersonContactRecord[];
+  document?: PersonDocumentRecord[];
+  address?: PersonAddressRecord[];
+};
+
+type ContactTypeLookup = {
+  code: string;
+  contact_type_id: number;
+};
+
+type DocumentTypeLookup = {
+  code: string;
+  document_type_id: number;
+};
+
+type PartyState = {
+  displayName: string;
+  partyRole: string;
+  partyType: string;
+  documentNumber: string;
+  email: string;
+  phone: string;
+  isPrimary: boolean;
+  personId: number | null;
+  availableDocuments: PersonValueOption[];
+  availableEmails: PersonValueOption[];
+  availablePhones: PersonValueOption[];
+  documentMode: PartyFieldMode;
+  emailMode: PartyFieldMode;
+  phoneMode: PartyFieldMode;
+};
+
+type SignatureState = {
+  signerName: string;
+  signerRole: string;
+  signerEmail: string;
+  status: string;
+  signedAt: string;
+};
+
+type FinancialTermState = {
+  label: string;
+  termType: string;
+  amount: string;
+  recurrence: string;
+  dueDay: string;
+  notes: string;
+};
+
+type RevisionState = {
+  title: string;
+  revisionType: string;
+  effectiveDate: string;
+  status: string;
+  summary: string;
+};
+
+type DocumentState = {
+  id?: number;
+  fileId?: number | null;
+  fileName: string;
+  mimeType: string;
+  extractionStatus?: string | null;
+  extractionSummary?: string | null;
+};
+
+type ContractWizardState = {
+  code: string;
+  name: string;
+  clientName: string;
+  contractTemplateId: string;
+  contractCategory: string;
+  contractType: string;
+  signatureStatus: string;
+  isActive: boolean;
+  billingModel: string;
+  accountManagerCollaboratorId: string;
+  relatedCollaboratorId: string;
+  originType: string;
+  originId: string;
+  startDate: string;
+  endDate: string;
+  signedAt: string;
+  effectiveDate: string;
+  budgetAmount: string;
+  monthlyHourCap: string;
+  status: string;
+  description: string;
+  contentHtml: string;
+  creationMode: CreationMode;
+  wizardStep: number;
+  parties: PartyState[];
+  signatures: SignatureState[];
+  financialTerms: FinancialTermState[];
+  revisions: RevisionState[];
+  sourceDocument: DocumentState | null;
+  generatedPdfDocument: DocumentState | null;
+};
+
+type ExtractedDraft = Partial<ContractWizardState> & {
+  summary?: string;
+  missingFields?: string[];
+  warnings?: string[];
+};
+
+type ContractAiReviewState = {
+  summary?: string;
+  missingFields: string[];
+  warnings: string[];
+  checklist: string[];
+  status?: string;
+  reviewedAt?: string;
+};
+
+type ContractWizardSheetProps = {
+  contractId?: number;
+  duplicateFromId?: number;
+  initialTemplateId?: number;
+  isCreateFlow?: boolean;
+  onCancel?: () => void;
+  onSaved?: (contract: OperationsContractDetails) => void | Promise<void>;
+};
+
+const allSteps = [
+  { key: 'origin', label: 'Origem', icon: Sparkles },
+  { key: 'identification', label: 'Identificacao', icon: BriefcaseBusiness },
+  { key: 'parties', label: 'Partes', icon: Users },
+  { key: 'terms', label: 'Condicoes', icon: BadgeDollarSign },
+  { key: 'content', label: 'Conteudo', icon: NotebookText },
+  { key: 'review', label: 'Revisao', icon: CheckCircle2 },
+] as const;
+
+const createFlowSteps = allSteps.filter((step) => step.key !== 'content');
+
+const contractDateFields: Array<{
+  key: 'startDate' | 'endDate' | 'signedAt' | 'effectiveDate';
+  label: string;
+}> = [
+  { key: 'startDate', label: 'Inicio' },
+  { key: 'endDate', label: 'Fim' },
+  { key: 'signedAt', label: 'Assinado em' },
+  { key: 'effectiveDate', label: 'Vigencia' },
+];
+
+const PERSON_FIELD_NEW_VALUE = '__new__';
+const EMAIL_CONTACT_TYPE_ID = 2;
+const PHONE_CONTACT_TYPE_IDS = new Set([1, 3, 4, 5]);
+const PHONE_CONTACT_TYPE_CODES = new Set([
+  'PHONE',
+  'FAX',
+  'WHATSAPP',
+  'TELEGRAM',
+  'MOBILE',
+]);
+
+function emptyParty(): PartyState {
+  return {
+    displayName: '',
+    partyRole: 'client',
+    partyType: 'company',
+    documentNumber: '',
+    email: '',
+    phone: '',
+    isPrimary: false,
+    personId: null,
+    availableDocuments: [],
+    availableEmails: [],
+    availablePhones: [],
+    documentMode: 'new',
+    emailMode: 'new',
+    phoneMode: 'new',
+  };
+}
+
+function emptySignature(): SignatureState {
+  return {
+    signerName: '',
+    signerRole: '',
+    signerEmail: '',
+    status: 'pending',
+    signedAt: '',
+  };
+}
+
+function emptyFinancialTerm(): FinancialTermState {
+  return {
+    label: '',
+    termType: 'value',
+    amount: '',
+    recurrence: 'one_time',
+    dueDay: '',
+    notes: '',
+  };
+}
+
+function buildEmptyForm(mode: CreationMode = 'blank'): ContractWizardState {
+  return {
+    code: '',
+    name: '',
+    clientName: '',
+    contractTemplateId: 'none',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    signatureStatus: 'not_started',
+    isActive: true,
+    billingModel: 'time_and_material',
+    accountManagerCollaboratorId: 'none',
+    relatedCollaboratorId: 'none',
+    originType: 'manual',
+    originId: '',
+    startDate: '',
+    endDate: '',
+    signedAt: '',
+    effectiveDate: '',
+    budgetAmount: '',
+    monthlyHourCap: '',
+    status: 'draft',
+    description: '',
+    contentHtml: '',
+    creationMode: mode,
+    wizardStep: 0,
+    parties: [emptyParty()],
+    signatures: [emptySignature()],
+    financialTerms: [emptyFinancialTerm()],
+    revisions: [],
+    sourceDocument: null,
+    generatedPdfDocument: null,
+  };
+}
+
+function toTextValue(value: unknown) {
+  return typeof value === 'string' ? value : value == null ? '' : String(value);
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object'
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+function normalizePartyFieldValue(
+  kind: 'document' | 'email' | 'phone',
+  value?: string | null
+) {
+  const normalized = String(value ?? '').trim();
+
+  if (!normalized) {
+    return '';
+  }
+
+  if (kind === 'email') {
+    return normalized.toLowerCase();
+  }
+
+  return normalized.replace(/\D/g, '');
+}
+
+function dedupePersonValueOptions(options: PersonValueOption[]) {
+  const seen = new Set<string>();
+
+  return options.filter((option) => {
+    if (!option.normalizedValue || seen.has(option.normalizedValue)) {
+      return false;
+    }
+
+    seen.add(option.normalizedValue);
+    return true;
+  });
+}
+
+function getDefaultPersonOptionValue(options: PersonValueOption[]) {
+  return (
+    options.find((option) => option.isPrimary)?.value ?? options[0]?.value ?? ''
+  );
+}
+
+function resolvePartyFieldMode(
+  kind: 'document' | 'email' | 'phone',
+  value: string,
+  options: PersonValueOption[]
+): PartyFieldMode {
+  if (!options.length) {
+    return 'new';
+  }
+
+  const normalizedValue = normalizePartyFieldValue(kind, value);
+  return normalizedValue &&
+    options.some((option) => option.normalizedValue === normalizedValue)
+    ? 'existing'
+    : 'new';
+}
+
+function buildPersonValueOptions(person: PersonDetailsRecord) {
+  const documents = dedupePersonValueOptions(
+    (person.document ?? []).flatMap((document) => {
+      const value = String(document.value ?? '').trim();
+      if (!value) {
+        return [];
+      }
+
+      const code = String(document.document_type?.code ?? 'documento').trim();
+      return [
+        {
+          id: document.id,
+          value,
+          label: `${formatEnumLabel(code)} • ${value}`,
+          normalizedValue: normalizePartyFieldValue('document', value),
+          isPrimary: false,
+        },
+      ];
+    })
+  );
+
+  const emails = dedupePersonValueOptions(
+    (person.contact ?? [])
+      .filter((contact) => {
+        const code = String(contact.contact_type?.code ?? '').toUpperCase();
+        const typeId = Number(
+          contact.contact_type?.id ?? contact.contact_type_id ?? 0
+        );
+
+        return code === 'EMAIL' || typeId === EMAIL_CONTACT_TYPE_ID;
+      })
+      .flatMap((contact) => {
+        const value = String(contact.value ?? '').trim();
+        if (!value) {
+          return [];
+        }
+
+        const code = String(contact.contact_type?.code ?? 'email').trim();
+        return [
+          {
+            id: contact.id,
+            value,
+            label: `${contact.is_primary ? 'Principal' : formatEnumLabel(code)} • ${value}`,
+            normalizedValue: normalizePartyFieldValue('email', value),
+            isPrimary: Boolean(contact.is_primary),
+          },
+        ];
+      })
+  );
+
+  const phones = dedupePersonValueOptions(
+    (person.contact ?? [])
+      .filter((contact) => {
+        const code = String(contact.contact_type?.code ?? '').toUpperCase();
+        const typeId = Number(
+          contact.contact_type?.id ?? contact.contact_type_id ?? 0
+        );
+
+        return (
+          PHONE_CONTACT_TYPE_CODES.has(code) ||
+          PHONE_CONTACT_TYPE_IDS.has(typeId)
+        );
+      })
+      .flatMap((contact) => {
+        const value = String(contact.value ?? '').trim();
+        if (!value) {
+          return [];
+        }
+
+        const code = String(contact.contact_type?.code ?? 'telefone').trim();
+        return [
+          {
+            id: contact.id,
+            value,
+            label: `${contact.is_primary ? 'Principal' : formatEnumLabel(code)} • ${value}`,
+            normalizedValue: normalizePartyFieldValue('phone', value),
+            isPrimary: Boolean(contact.is_primary),
+          },
+        ];
+      })
+  );
+
+  return {
+    documents,
+    emails,
+    phones,
+  };
+}
+
+function applyPersonDetailsToParty(
+  party: PartyState,
+  personId: number,
+  personName: string,
+  person: PersonDetailsRecord
+): PartyState {
+  const { documents, emails, phones } = buildPersonValueOptions(person);
+  const nextDocumentValue = getDefaultPersonOptionValue(documents);
+  const nextEmailValue = getDefaultPersonOptionValue(emails);
+  const nextPhoneValue = getDefaultPersonOptionValue(phones);
+
+  return {
+    ...party,
+    displayName: personName || person.name || party.displayName,
+    partyType:
+      person.type === 'individual' || person.type === 'company'
+        ? person.type
+        : party.partyType,
+    personId,
+    availableDocuments: documents,
+    availableEmails: emails,
+    availablePhones: phones,
+    documentNumber: nextDocumentValue || party.documentNumber,
+    email: nextEmailValue || party.email,
+    phone: nextPhoneValue || party.phone,
+    documentMode: documents.length ? 'existing' : 'new',
+    emailMode: emails.length ? 'existing' : 'new',
+    phoneMode: phones.length ? 'existing' : 'new',
+  };
+}
+
+function clearPersonDetailsFromParty(
+  party: PartyState,
+  personName = ''
+): PartyState {
+  return {
+    ...party,
+    displayName: personName,
+    personId: null,
+    availableDocuments: [],
+    availableEmails: [],
+    availablePhones: [],
+    documentMode: 'new',
+    emailMode: 'new',
+    phoneMode: 'new',
+  };
+}
+
+function getPrimaryPartyIndex(parties: PartyState[]) {
+  const primaryIndex = parties.findIndex((party) => party.isPrimary);
+  return primaryIndex >= 0 ? primaryIndex : 0;
+}
+
+function preservePartySelectionMetadata(
+  nextForm: ContractWizardState,
+  currentForm: ContractWizardState
+): ContractWizardState {
+  return {
+    ...nextForm,
+    parties: nextForm.parties.map((party, index) => {
+      const currentParty = currentForm.parties[index];
+      if (!currentParty?.personId) {
+        return party;
+      }
+
+      const availableDocuments = currentParty.availableDocuments ?? [];
+      const availableEmails = currentParty.availableEmails ?? [];
+      const availablePhones = currentParty.availablePhones ?? [];
+
+      return {
+        ...party,
+        personId: currentParty.personId,
+        availableDocuments,
+        availableEmails,
+        availablePhones,
+        documentMode: resolvePartyFieldMode(
+          'document',
+          party.documentNumber,
+          availableDocuments
+        ),
+        emailMode: resolvePartyFieldMode('email', party.email, availableEmails),
+        phoneMode: resolvePartyFieldMode('phone', party.phone, availablePhones),
+      };
+    }),
+  };
+}
+
+function PersonDataChoiceField({
+  label,
+  value,
+  options,
+  mode,
+  kind,
+  inputType = 'text',
+  placeholder,
+  onModeChange,
+  onValueChange,
+}: {
+  label: string;
+  value: string;
+  options: PersonValueOption[];
+  mode: PartyFieldMode;
+  kind: 'document' | 'email' | 'phone';
+  inputType?: 'text' | 'email' | 'tel';
+  placeholder: string;
+  onModeChange: (mode: PartyFieldMode) => void;
+  onValueChange: (value: string) => void;
+}) {
+  const hasOptions = options.length > 0;
+  const normalizedValue = normalizePartyFieldValue(kind, value);
+  const matchesExisting = options.some(
+    (option) => option.normalizedValue === normalizedValue
+  );
+  const selectValue =
+    hasOptions && mode === 'existing' && matchesExisting
+      ? (options.find((option) => option.normalizedValue === normalizedValue)
+          ?.value ?? PERSON_FIELD_NEW_VALUE)
+      : PERSON_FIELD_NEW_VALUE;
+
+  return (
+    <div className="space-y-1.5">
+      <Label className="text-xs">{label}</Label>
+
+      {hasOptions ? (
+        <Select
+          value={selectValue}
+          onValueChange={(selectedValue) => {
+            if (selectedValue === PERSON_FIELD_NEW_VALUE) {
+              onModeChange('new');
+              if (mode !== 'new' && matchesExisting) {
+                onValueChange('');
+              }
+              return;
+            }
+
+            onModeChange('existing');
+            onValueChange(selectedValue);
+          }}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem
+                key={`${option.label}-${option.normalizedValue}`}
+                value={option.value}
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+            <SelectItem value={PERSON_FIELD_NEW_VALUE}>Digitar novo</SelectItem>
+          </SelectContent>
+        </Select>
+      ) : null}
+
+      {!hasOptions || mode === 'new' ? (
+        <Input
+          type={inputType}
+          value={value}
+          placeholder={placeholder}
+          onChange={(event) => onValueChange(event.target.value)}
+        />
+      ) : null}
+
+      <p className="text-[11px] text-muted-foreground">
+        {hasOptions
+          ? mode === 'existing'
+            ? 'Usando um dado já cadastrado na pessoa selecionada.'
+            : 'O novo valor será salvo também no cadastro da pessoa ao salvar o contrato.'
+          : 'Sem dados cadastrados para essa pessoa. O que você digitar será salvo junto ao contrato.'}
+      </p>
+    </div>
+  );
+}
+
+function openStoredFile(fileId?: number | null) {
+  if (!fileId) return;
+  const baseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  window.open(
+    `${baseUrl}/file/open/${fileId}`,
+    '_blank',
+    'noopener,noreferrer'
+  );
+}
+
+function toFormState(contract: OperationsContractDetails): ContractWizardState {
+  const sourceDocument =
+    contract.documents.find(
+      (document) =>
+        document.isCurrent && document.documentType === 'source_upload'
+    ) ?? null;
+  const generatedPdfDocument =
+    contract.documents.find(
+      (document) =>
+        document.isCurrent && document.documentType === 'generated_pdf'
+    ) ?? null;
+
+  return {
+    code: contract.code ?? '',
+    name: contract.name ?? '',
+    clientName: contract.clientName ?? '',
+    contractTemplateId: contract.contractTemplateId
+      ? String(contract.contractTemplateId)
+      : 'none',
+    contractCategory: contract.contractCategory ?? 'client',
+    contractType: contract.contractType ?? 'service_agreement',
+    signatureStatus: contract.signatureStatus ?? 'not_started',
+    isActive: contract.isActive ?? true,
+    billingModel: contract.billingModel ?? 'time_and_material',
+    accountManagerCollaboratorId: contract.accountManagerCollaboratorId
+      ? String(contract.accountManagerCollaboratorId)
+      : 'none',
+    relatedCollaboratorId: contract.relatedCollaboratorId
+      ? String(contract.relatedCollaboratorId)
+      : 'none',
+    originType: contract.originType ?? 'manual',
+    originId:
+      contract.originId !== null && contract.originId !== undefined
+        ? String(contract.originId)
+        : '',
+    startDate: contract.startDate ?? '',
+    endDate: contract.endDate ?? '',
+    signedAt: contract.signedAt ?? '',
+    effectiveDate: contract.effectiveDate ?? '',
+    budgetAmount:
+      contract.budgetAmount !== null && contract.budgetAmount !== undefined
+        ? String(contract.budgetAmount)
+        : '',
+    monthlyHourCap:
+      contract.monthlyHourCap !== null && contract.monthlyHourCap !== undefined
+        ? String(contract.monthlyHourCap)
+        : '',
+    status: contract.status ?? 'draft',
+    description: contract.description ?? '',
+    contentHtml: contract.contentHtml ?? '',
+    creationMode: (contract.creationMode as CreationMode) ?? 'blank',
+    wizardStep: contract.wizardStep ?? 0,
+    parties: contract.parties.length
+      ? contract.parties.map((party) => ({
+          displayName: party.displayName ?? '',
+          partyRole: party.partyRole ?? 'client',
+          partyType: party.partyType ?? 'company',
+          documentNumber: party.documentNumber ?? '',
+          email: party.email ?? '',
+          phone: party.phone ?? '',
+          isPrimary: party.isPrimary ?? false,
+          personId: null,
+          availableDocuments: [],
+          availableEmails: [],
+          availablePhones: [],
+          documentMode: 'new',
+          emailMode: 'new',
+          phoneMode: 'new',
+        }))
+      : [emptyParty()],
+    signatures: contract.signatures.length
+      ? contract.signatures.map((signature) => ({
+          signerName: signature.signerName ?? '',
+          signerRole: signature.signerRole ?? '',
+          signerEmail: signature.signerEmail ?? '',
+          status: signature.status ?? 'pending',
+          signedAt: signature.signedAt ?? '',
+        }))
+      : [emptySignature()],
+    financialTerms: contract.financialTerms.length
+      ? contract.financialTerms.map((term) => ({
+          label: term.label ?? '',
+          termType: term.termType ?? 'value',
+          amount:
+            term.amount !== null && term.amount !== undefined
+              ? String(term.amount)
+              : '',
+          recurrence: term.recurrence ?? 'one_time',
+          dueDay:
+            term.dueDay !== null && term.dueDay !== undefined
+              ? String(term.dueDay)
+              : '',
+          notes: term.notes ?? '',
+        }))
+      : [emptyFinancialTerm()],
+    revisions: contract.revisions.length
+      ? contract.revisions.map((revision) => ({
+          title: revision.title ?? '',
+          revisionType: revision.revisionType ?? 'revision',
+          effectiveDate: revision.effectiveDate ?? '',
+          status: revision.status ?? 'draft',
+          summary: revision.summary ?? '',
+        }))
+      : [],
+    sourceDocument: sourceDocument
+      ? {
+          id: sourceDocument.id,
+          fileId: sourceDocument.fileId ?? null,
+          fileName: sourceDocument.fileName,
+          mimeType: sourceDocument.mimeType,
+          extractionStatus: sourceDocument.extractionStatus ?? null,
+          extractionSummary: sourceDocument.extractionSummary ?? null,
+        }
+      : null,
+    generatedPdfDocument: generatedPdfDocument
+      ? {
+          id: generatedPdfDocument.id,
+          fileId: generatedPdfDocument.fileId ?? null,
+          fileName: generatedPdfDocument.fileName,
+          mimeType: generatedPdfDocument.mimeType,
+          extractionStatus: generatedPdfDocument.extractionStatus ?? null,
+          extractionSummary: generatedPdfDocument.extractionSummary ?? null,
+        }
+      : null,
+  };
+}
+
+function normalizeAiReview(
+  review?: Partial<ContractAiReviewState> | null
+): ContractAiReviewState | null {
+  if (!review) {
+    return null;
+  }
+
+  return {
+    summary: typeof review.summary === 'string' ? review.summary : undefined,
+    missingFields: Array.isArray(review.missingFields)
+      ? review.missingFields.filter(Boolean).map(String)
+      : [],
+    warnings: Array.isArray(review.warnings)
+      ? review.warnings.filter(Boolean).map(String)
+      : [],
+    checklist: Array.isArray(review.checklist)
+      ? review.checklist.filter(Boolean).map(String)
+      : [],
+    status: typeof review.status === 'string' ? review.status : undefined,
+    reviewedAt:
+      typeof review.reviewedAt === 'string' ? review.reviewedAt : undefined,
+  };
+}
+
+function parseStoredAiReview(
+  history?: OperationsContractDetails['history']
+): ContractAiReviewState | null {
+  if (!Array.isArray(history)) {
+    return null;
+  }
+
+  for (const item of history) {
+    if (item.action !== 'legal_reviewed' || !item.metadataJson) {
+      continue;
+    }
+
+    try {
+      const parsed = JSON.parse(
+        item.metadataJson
+      ) as Partial<ContractAiReviewState>;
+      return normalizeAiReview({
+        ...parsed,
+        reviewedAt:
+          typeof parsed.reviewedAt === 'string'
+            ? parsed.reviewedAt
+            : item.createdAt,
+      });
+    } catch {
+      continue;
+    }
+  }
+
+  return null;
+}
+
+function mergeExtractedDraft(
+  current: ContractWizardState,
+  draft: ExtractedDraft
+): ContractWizardState {
+  const next = { ...current };
+  const assignIfEmpty = (
+    key: keyof ContractWizardState,
+    value: unknown,
+    fallback?: string
+  ) => {
+    const normalized = toTextValue(value || fallback).trim();
+    if (!normalized) return;
+    if (!toTextValue(next[key]).trim()) {
+      (next[key] as string) = normalized;
+    }
+  };
+
+  assignIfEmpty('code', draft.code);
+  assignIfEmpty('name', draft.name);
+  assignIfEmpty('clientName', draft.clientName);
+  assignIfEmpty('startDate', draft.startDate);
+  assignIfEmpty('endDate', draft.endDate);
+  assignIfEmpty('signedAt', draft.signedAt);
+  assignIfEmpty('effectiveDate', draft.effectiveDate);
+  assignIfEmpty('budgetAmount', draft.budgetAmount);
+  assignIfEmpty('monthlyHourCap', draft.monthlyHourCap);
+  assignIfEmpty('description', draft.description, draft.summary);
+
+  if (!next.contentHtml.trim() && toTextValue(draft.contentHtml).trim()) {
+    next.contentHtml = toTextValue(draft.contentHtml).trim();
+  }
+
+  next.contractCategory = draft.contractCategory || next.contractCategory;
+  next.contractType = draft.contractType || next.contractType;
+  next.signatureStatus = draft.signatureStatus || next.signatureStatus;
+  next.billingModel = draft.billingModel || next.billingModel;
+  next.status = draft.status || next.status;
+  next.originType = draft.originType || next.originType;
+  next.isActive = draft.isActive ?? next.isActive;
+
+  const extractedParties = Array.isArray(draft.parties)
+    ? draft.parties
+        .map((party) => {
+          const value = asRecord(party);
+          return {
+            displayName: toTextValue(value.displayName),
+            partyRole: toTextValue(value.partyRole || 'client'),
+            partyType: toTextValue(value.partyType || 'company'),
+            documentNumber: toTextValue(value.documentNumber),
+            email: toTextValue(value.email),
+            phone: toTextValue(value.phone),
+            isPrimary: Boolean(value.isPrimary),
+            personId: null,
+            availableDocuments: [],
+            availableEmails: [],
+            availablePhones: [],
+            documentMode: 'new' as const,
+            emailMode: 'new' as const,
+            phoneMode: 'new' as const,
+          };
+        })
+        .filter((party) => party.displayName)
+    : [];
+
+  if (
+    extractedParties.length &&
+    current.parties.every((party) => !party.displayName.trim())
+  ) {
+    next.parties = extractedParties;
+  }
+
+  const extractedSignatures = Array.isArray(draft.signatures)
+    ? draft.signatures
+        .map((signature) => {
+          const value = asRecord(signature);
+          return {
+            signerName: toTextValue(value.signerName),
+            signerRole: toTextValue(value.signerRole),
+            signerEmail: toTextValue(value.signerEmail),
+            status: toTextValue(value.status || 'pending'),
+            signedAt: toTextValue(value.signedAt),
+          };
+        })
+        .filter((signature) => signature.signerName)
+    : [];
+
+  if (
+    extractedSignatures.length &&
+    current.signatures.every((signature) => !signature.signerName.trim())
+  ) {
+    next.signatures = extractedSignatures;
+  }
+
+  const extractedTerms = Array.isArray(draft.financialTerms)
+    ? draft.financialTerms
+        .map((term) => {
+          const value = asRecord(term);
+          return {
+            label: toTextValue(value.label),
+            termType: toTextValue(value.termType || 'value'),
+            amount: toTextValue(value.amount),
+            recurrence: toTextValue(value.recurrence || 'one_time'),
+            dueDay: toTextValue(value.dueDay),
+            notes: toTextValue(value.notes),
+          };
+        })
+        .filter((term) => term.label)
+    : [];
+
+  if (
+    extractedTerms.length &&
+    current.financialTerms.every((term) => !term.label.trim())
+  ) {
+    next.financialTerms = extractedTerms;
+  }
+
+  return next;
+}
+
+export function ContractWizardSheet({
+  contractId,
+  duplicateFromId,
+  initialTemplateId,
+  isCreateFlow = false,
+  onCancel,
+  onSaved,
+}: ContractWizardSheetProps) {
+  const t = useTranslations('operations.ContractFormPage');
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
+  const wizardSteps = isCreateFlow ? createFlowSteps : allSteps;
+  const contentStepIndex = wizardSteps.findIndex(
+    (step) => step.key === 'content'
+  );
+  const reviewStepIndex = wizardSteps.findIndex(
+    (step) => step.key === 'review'
+  );
+  const defaultEditStep =
+    contentStepIndex >= 0 ? contentStepIndex : reviewStepIndex;
+  const [form, setForm] = useState<ContractWizardState>(buildEmptyForm());
+  const [draftId, setDraftId] = useState<number | null>(contractId ?? null);
+  const [activeStep, setActiveStep] = useState(
+    contractId ? defaultEditStep : 0
+  );
+  const [creationMode, setCreationMode] = useState<CreationMode>(
+    duplicateFromId ? 'duplicate' : initialTemplateId ? 'template' : 'blank'
+  );
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(
+    initialTemplateId ?? null
+  );
+  const [selectedDuplicateId, setSelectedDuplicateId] = useState<number | null>(
+    duplicateFromId ?? null
+  );
+  const [sourceFile, setSourceFile] = useState<File | null>(null);
+  const [aiStartPrompt, setAiStartPrompt] = useState('');
+  const [isBusy, setIsBusy] = useState(false);
+  const [isExtracting, setIsExtracting] = useState(false);
+  const [isGeneratingPdf, setIsGeneratingPdf] = useState(false);
+  const [aiReview, setAiReview] = useState<ContractAiReviewState | null>(null);
+  const autoStartedRef = useRef(false);
+
+  const { data: contractTemplates = [] } = useQuery<
+    OperationsContractTemplate[]
+  >({
+    queryKey: ['operations-contract-wizard-templates', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsContractTemplate[]>(
+        request,
+        '/operations/contract-templates'
+      ),
+    placeholderData: (old) => old ?? [],
+  });
+
+  const { data: collaborators = [] } = useQuery<OperationsCollaborator[]>({
+    queryKey: ['operations-contract-wizard-collaborators', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsCollaborator[]>(
+        request,
+        '/operations/collaborators'
+      ),
+    placeholderData: (old) => old ?? [],
+  });
+
+  const { data: contracts = [] } = useQuery<OperationsContract[]>({
+    queryKey: ['operations-contract-wizard-contracts', currentLocaleCode],
+    queryFn: () =>
+      fetchOperations<OperationsContract[]>(request, '/operations/contracts'),
+    placeholderData: (old) => old ?? [],
+  });
+
+  const { data: initialContract } = useQuery<OperationsContractDetails>({
+    queryKey: [
+      'operations-contract-wizard-detail',
+      currentLocaleCode,
+      contractId,
+    ],
+    enabled: Boolean(contractId),
+    queryFn: () =>
+      fetchOperations<OperationsContractDetails>(
+        request,
+        `/operations/contracts/${contractId}`
+      ),
+  });
+
+  const { data: personContactTypes = [] } = useQuery<ContactTypeLookup[]>({
+    queryKey: ['operations-contract-person-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data?: ContactTypeLookup[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return Array.isArray(response?.data?.data) ? response.data.data : [];
+    },
+    placeholderData: (old) => old ?? [],
+  });
+
+  const { data: personDocumentTypes = [] } = useQuery<DocumentTypeLookup[]>({
+    queryKey: ['operations-contract-person-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data?: DocumentTypeLookup[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return Array.isArray(response?.data?.data) ? response.data.data : [];
+    },
+    placeholderData: (old) => old ?? [],
+  });
+
+  useEffect(() => {
+    if (!initialContract) return;
+    setDraftId(initialContract.id);
+    setCreationMode((initialContract.creationMode as CreationMode) ?? 'blank');
+    setForm((current) =>
+      preservePartySelectionMetadata(toFormState(initialContract), current)
+    );
+    setAiReview(parseStoredAiReview(initialContract.history));
+    setActiveStep(defaultEditStep);
+  }, [defaultEditStep, initialContract]);
+
+  const hasOpenAi = Boolean(getSettingValue('ai-openai-api-key-enabled'));
+  const hasGemini = Boolean(getSettingValue('ai-gemini-api-key-enabled'));
+  const aiProvider = hasOpenAi ? 'openai' : hasGemini ? 'gemini' : null;
+  const aiProviderLabel = aiProvider === 'openai' ? 'OpenAI' : 'Gemini';
+
+  useEffect(() => {
+    if (!aiProvider && creationMode === 'ai_prompt') {
+      setCreationMode('blank');
+    }
+  }, [aiProvider, creationMode]);
+
+  const getOptionLabel = (group: string, value?: string | null) => {
+    if (!value) {
+      return '-';
+    }
+
+    const key = `options.${group}.${value}`;
+    return t.has(key) ? t(key) : formatEnumLabel(value);
+  };
+
+  const selectedTemplate =
+    contractTemplates.find((item) => item.id === selectedTemplateId) ?? null;
+  const primaryPartyIndex = getPrimaryPartyIndex(form.parties);
+  const primaryParty = form.parties[primaryPartyIndex] ?? null;
+
+  const updatePartyAt = (
+    index: number,
+    updater: (party: PartyState) => PartyState,
+    options?: { syncClientName?: boolean }
+  ) => {
+    setForm((current) => {
+      const nextParties = current.parties.map((item, itemIndex) =>
+        itemIndex === index ? updater(item) : item
+      );
+      const nextPrimaryParty = nextParties[getPrimaryPartyIndex(nextParties)];
+
+      return {
+        ...current,
+        clientName:
+          options?.syncClientName && nextPrimaryParty?.displayName
+            ? nextPrimaryParty.displayName
+            : current.clientName,
+        parties: nextParties,
+      };
+    });
+  };
+
+  const handlePartyPersonChange = async (
+    index: number,
+    personId: number | null,
+    personName: string,
+    options?: { syncClientName?: boolean; markAsPrimary?: boolean }
+  ) => {
+    const syncClientName = Boolean(options?.syncClientName);
+    const markAsPrimary = Boolean(options?.markAsPrimary);
+
+    if (!personId) {
+      setForm((current) => ({
+        ...current,
+        clientName: syncClientName ? personName : current.clientName,
+        parties: current.parties.map((item, itemIndex) => {
+          if (itemIndex !== index) {
+            return markAsPrimary ? { ...item, isPrimary: false } : item;
+          }
+
+          return {
+            ...clearPersonDetailsFromParty(item, personName),
+            isPrimary: markAsPrimary ? true : item.isPrimary,
+          };
+        }),
+      }));
+      return;
+    }
+
+    try {
+      const person = await fetchOperations<PersonDetailsRecord>(
+        request,
+        `/person/${personId}`
+      );
+
+      setForm((current) => ({
+        ...current,
+        clientName: syncClientName
+          ? personName || person.name || current.clientName
+          : current.clientName,
+        parties: current.parties.map((item, itemIndex) => {
+          if (itemIndex !== index) {
+            return markAsPrimary ? { ...item, isPrimary: false } : item;
+          }
+
+          return {
+            ...applyPersonDetailsToParty(item, personId, personName, person),
+            isPrimary: markAsPrimary ? true : item.isPrimary,
+          };
+        }),
+      }));
+    } catch {
+      setForm((current) => ({
+        ...current,
+        clientName: syncClientName ? personName : current.clientName,
+        parties: current.parties.map((item, itemIndex) => {
+          if (itemIndex !== index) {
+            return markAsPrimary ? { ...item, isPrimary: false } : item;
+          }
+
+          return {
+            ...item,
+            displayName: personName,
+            personId,
+            availableDocuments: [],
+            availableEmails: [],
+            availablePhones: [],
+            documentMode: 'new',
+            emailMode: 'new',
+            phoneMode: 'new',
+            isPrimary: markAsPrimary ? true : item.isPrimary,
+          };
+        }),
+      }));
+      showToastHandler?.(
+        'error',
+        'Nao foi possivel carregar os documentos, e-mails e telefones da pessoa selecionada.'
+      );
+    }
+  };
+
+  const syncSelectedPeopleDetails = async () => {
+    const pendingByPerson = new Map<
+      number,
+      {
+        documents: Set<string>;
+        emails: Set<string>;
+        phones: Set<string>;
+      }
+    >();
+
+    for (const party of form.parties) {
+      if (!party.personId) {
+        continue;
+      }
+
+      const nextDocument = trimToNull(party.documentNumber);
+      const nextEmail = trimToNull(party.email);
+      const nextPhone = trimToNull(party.phone);
+      const hasPendingValues =
+        (party.documentMode === 'new' && nextDocument) ||
+        (party.emailMode === 'new' && nextEmail) ||
+        (party.phoneMode === 'new' && nextPhone);
+
+      if (!hasPendingValues) {
+        continue;
+      }
+
+      const bucket = pendingByPerson.get(party.personId) ?? {
+        documents: new Set<string>(),
+        emails: new Set<string>(),
+        phones: new Set<string>(),
+      };
+
+      if (party.documentMode === 'new' && nextDocument) {
+        bucket.documents.add(nextDocument);
+      }
+
+      if (party.emailMode === 'new' && nextEmail) {
+        bucket.emails.add(nextEmail);
+      }
+
+      if (party.phoneMode === 'new' && nextPhone) {
+        bucket.phones.add(nextPhone);
+      }
+
+      pendingByPerson.set(party.personId, bucket);
+    }
+
+    if (!pendingByPerson.size) {
+      return;
+    }
+
+    const resolveContactTypeId = (
+      preferredCodes: string[],
+      fallbackId: number
+    ) => {
+      for (const preferredCode of preferredCodes) {
+        const found = personContactTypes.find(
+          (item) => String(item.code).toUpperCase() === preferredCode
+        );
+
+        if (found?.contact_type_id) {
+          return found.contact_type_id;
+        }
+      }
+
+      return fallbackId;
+    };
+
+    const emailTypeId = resolveContactTypeId(['EMAIL'], EMAIL_CONTACT_TYPE_ID);
+    const phoneTypeId = resolveContactTypeId(
+      ['PHONE', 'WHATSAPP', 'TELEGRAM', 'FAX', 'MOBILE'],
+      1
+    );
+
+    for (const [personId, pending] of pendingByPerson.entries()) {
+      const person = await fetchOperations<PersonDetailsRecord>(
+        request,
+        `/person/${personId}`
+      );
+
+      const contacts: Array<{
+        id?: number;
+        value: string;
+        is_primary: boolean;
+        contact_type_id: number;
+      }> = (person.contact ?? [])
+        .map((contact) => ({
+          id: contact.id,
+          value: String(contact.value ?? '').trim(),
+          is_primary: Boolean(contact.is_primary),
+          contact_type_id: Number(
+            contact.contact_type_id ?? contact.contact_type?.id ?? 0
+          ),
+        }))
+        .filter((contact) => contact.value && contact.contact_type_id > 0);
+
+      const documents: Array<{
+        id?: number;
+        value: string;
+        document_type_id: number;
+      }> = (person.document ?? [])
+        .map((document) => ({
+          id: document.id,
+          value: String(document.value ?? '').trim(),
+          document_type_id: Number(
+            document.document_type_id ?? document.document_type?.id ?? 0
+          ),
+        }))
+        .filter((document) => document.value && document.document_type_id > 0);
+
+      const addresses = (person.address ?? []).map((address) => ({
+        id: address.id,
+        line1: String(address.line1 ?? '').trim(),
+        line2: trimToNull(address.line2 ?? null),
+        city: String(address.city ?? '').trim(),
+        state: String(address.state ?? '').trim(),
+        country_code: trimToNull(address.country_code ?? null),
+        postal_code: trimToNull(address.postal_code ?? null),
+        is_primary: Boolean(address.is_primary),
+        address_type: String(address.address_type ?? 'residential'),
+      }));
+
+      const existingEmails = new Set(
+        contacts
+          .filter((contact) => contact.contact_type_id === emailTypeId)
+          .map((contact) => normalizePartyFieldValue('email', contact.value))
+      );
+      const existingPhones = new Set(
+        contacts
+          .filter((contact) => contact.contact_type_id !== emailTypeId)
+          .map((contact) => normalizePartyFieldValue('phone', contact.value))
+      );
+      const existingDocuments = new Set(
+        documents.map((document) =>
+          normalizePartyFieldValue('document', document.value)
+        )
+      );
+
+      let hasChanges = false;
+
+      for (const email of pending.emails) {
+        const normalizedEmail = normalizePartyFieldValue('email', email);
+        if (!normalizedEmail || existingEmails.has(normalizedEmail)) {
+          continue;
+        }
+
+        contacts.push({
+          value: email.trim(),
+          is_primary: !contacts.some(
+            (contact) =>
+              contact.contact_type_id === emailTypeId && contact.is_primary
+          ),
+          contact_type_id: emailTypeId,
+        });
+        existingEmails.add(normalizedEmail);
+        hasChanges = true;
+      }
+
+      for (const phone of pending.phones) {
+        const normalizedPhone = normalizePartyFieldValue('phone', phone);
+        if (!normalizedPhone || existingPhones.has(normalizedPhone)) {
+          continue;
+        }
+
+        contacts.push({
+          value: phone.trim(),
+          is_primary: !contacts.some(
+            (contact) =>
+              contact.contact_type_id === phoneTypeId && contact.is_primary
+          ),
+          contact_type_id: phoneTypeId,
+        });
+        existingPhones.add(normalizedPhone);
+        hasChanges = true;
+      }
+
+      if (pending.documents.size) {
+        const defaultDocumentTypeId =
+          documents[0]?.document_type_id ||
+          personDocumentTypes.find(
+            (item) =>
+              String(item.code).toUpperCase() ===
+              (person.type === 'company' ? 'CNPJ' : 'CPF')
+          )?.document_type_id ||
+          personDocumentTypes[0]?.document_type_id;
+
+        if (!defaultDocumentTypeId) {
+          throw new Error('Missing person document type lookup');
+        }
+
+        for (const documentValue of pending.documents) {
+          const normalizedDocument = normalizePartyFieldValue(
+            'document',
+            documentValue
+          );
+          if (
+            !normalizedDocument ||
+            existingDocuments.has(normalizedDocument)
+          ) {
+            continue;
+          }
+
+          documents.push({
+            value: documentValue.trim(),
+            document_type_id: defaultDocumentTypeId,
+          });
+          existingDocuments.add(normalizedDocument);
+          hasChanges = true;
+        }
+      }
+
+      if (!hasChanges) {
+        continue;
+      }
+
+      await request({
+        url: `/person/${personId}`,
+        method: 'PATCH',
+        data: {
+          name: person.name,
+          type: person.type ?? 'individual',
+          status: person.status ?? 'active',
+          contacts,
+          documents,
+          addresses,
+        },
+      });
+    }
+  };
+
+  const reloadContract = useCallback(
+    async (nextId: number) => {
+      const detail = await fetchOperations<OperationsContractDetails>(
+        request,
+        `/operations/contracts/${nextId}`
+      );
+      setDraftId(detail.id);
+      setCreationMode(
+        creationMode === 'ai_prompt'
+          ? 'ai_prompt'
+          : ((detail.creationMode as CreationMode) ?? creationMode)
+      );
+      setForm((current) =>
+        preservePartySelectionMetadata(toFormState(detail), current)
+      );
+      setAiReview(parseStoredAiReview(detail.history));
+      return detail;
+    },
+    [creationMode, request]
+  );
+
+  const uploadSourceDocument = useCallback(
+    async (file: File) => {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'operations/contracts/source');
+
+      const response = await request<{ id?: number }>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      } as never);
+
+      const nextFileId = Number(response?.data?.id);
+      if (!nextFileId) {
+        throw new Error('Nao foi possivel enviar o arquivo.');
+      }
+
+      return {
+        fileId: nextFileId,
+        fileName: file.name,
+        mimeType: file.type || 'application/pdf',
+      };
+    },
+    [request]
+  );
+
+  const startDraft = useCallback(async () => {
+    if (draftId) return draftId;
+
+    setIsBusy(true);
+    try {
+      let sourcePayload:
+        | { fileId: number; fileName: string; mimeType: string }
+        | undefined;
+
+      if (creationMode === 'upload') {
+        if (!sourceFile) {
+          showToastHandler?.(
+            'error',
+            'Selecione um PDF ou Word para continuar.'
+          );
+          return null;
+        }
+        sourcePayload = await uploadSourceDocument(sourceFile);
+      }
+
+      if (creationMode === 'ai_prompt' && !aiStartPrompt.trim()) {
+        showToastHandler?.('error', 'Descreva o contrato para continuar.');
+        return null;
+      }
+
+      if (creationMode === 'template' && !selectedTemplateId) {
+        showToastHandler?.('error', 'Selecione um template para continuar.');
+        return null;
+      }
+
+      if (creationMode === 'duplicate' && !selectedDuplicateId) {
+        showToastHandler?.('error', 'Selecione um contrato para duplicar.');
+        return null;
+      }
+
+      const response = await mutateOperations<OperationsContractDetails>(
+        request,
+        '/operations/contracts/drafts',
+        'POST',
+        {
+          creationMode: creationMode === 'ai_prompt' ? 'blank' : creationMode,
+          templateId: selectedTemplateId ?? null,
+          duplicateFromId: selectedDuplicateId ?? null,
+          sourceFileId: sourcePayload?.fileId ?? null,
+          sourceFileName: sourcePayload?.fileName ?? null,
+          sourceMimeType: sourcePayload?.mimeType ?? null,
+        }
+      );
+
+      setDraftId(response.id);
+      setCreationMode(
+        creationMode === 'ai_prompt'
+          ? 'ai_prompt'
+          : ((response.creationMode as CreationMode) ?? creationMode)
+      );
+      setForm((current) =>
+        preservePartySelectionMetadata(toFormState(response), current)
+      );
+      showToastHandler?.('success', 'Rascunho criado com sucesso.');
+      return response.id;
+    } catch {
+      showToastHandler?.('error', 'Nao foi possivel criar o rascunho.');
+      return null;
+    } finally {
+      setIsBusy(false);
+    }
+  }, [
+    aiStartPrompt,
+    creationMode,
+    draftId,
+    request,
+    selectedDuplicateId,
+    selectedTemplateId,
+    showToastHandler,
+    sourceFile,
+    uploadSourceDocument,
+  ]);
+
+  useEffect(() => {
+    if (autoStartedRef.current || contractId) return;
+
+    if (duplicateFromId || initialTemplateId) {
+      autoStartedRef.current = true;
+      void startDraft();
+    }
+  }, [contractId, duplicateFromId, initialTemplateId, startDraft]);
+
+  const buildPayload = (step = activeStep) => ({
+    code: trimToNull(form.code)?.toUpperCase() ?? null,
+    name: trimToNull(form.name),
+    clientName: trimToNull(form.clientName),
+    contractCategory: form.contractCategory,
+    contractType: form.contractType,
+    signatureStatus: form.signatureStatus,
+    isActive: form.isActive,
+    billingModel: form.billingModel,
+    accountManagerCollaboratorId:
+      form.accountManagerCollaboratorId === 'none'
+        ? null
+        : parseNumberInput(form.accountManagerCollaboratorId),
+    relatedCollaboratorId:
+      form.relatedCollaboratorId === 'none'
+        ? null
+        : parseNumberInput(form.relatedCollaboratorId),
+    contractTemplateId:
+      form.contractTemplateId === 'none'
+        ? null
+        : parseNumberInput(form.contractTemplateId),
+    originType: form.originType,
+    originId: parseNumberInput(form.originId),
+    startDate: trimToNull(form.startDate),
+    endDate: trimToNull(form.endDate),
+    signedAt: trimToNull(form.signedAt),
+    effectiveDate: trimToNull(form.effectiveDate),
+    budgetAmount: parseNumberInput(form.budgetAmount),
+    monthlyHourCap: parseNumberInput(form.monthlyHourCap),
+    status: form.status,
+    creationMode: creationMode === 'ai_prompt' ? 'blank' : creationMode,
+    wizardStep: step,
+    description: trimToNull(form.description),
+    contentHtml: trimToNull(form.contentHtml),
+    parties: form.parties
+      .filter((party) => party.displayName.trim())
+      .map((party) => ({
+        displayName: party.displayName.trim(),
+        partyRole: party.partyRole,
+        partyType: party.partyType,
+        documentNumber: trimToNull(party.documentNumber),
+        email: trimToNull(party.email),
+        phone: trimToNull(party.phone),
+        isPrimary: party.isPrimary,
+      })),
+    signatures: form.signatures
+      .filter((signature) => signature.signerName.trim())
+      .map((signature) => ({
+        signerName: signature.signerName.trim(),
+        signerRole: trimToNull(signature.signerRole),
+        signerEmail: trimToNull(signature.signerEmail),
+        status: signature.status,
+        signedAt: trimToNull(signature.signedAt),
+      })),
+    financialTerms: form.financialTerms
+      .filter((term) => term.label.trim())
+      .map((term) => ({
+        label: term.label.trim(),
+        termType: term.termType,
+        amount: parseNumberInput(term.amount) ?? 0,
+        recurrence: term.recurrence,
+        dueDay: parseNumberInput(term.dueDay),
+        notes: trimToNull(term.notes),
+      })),
+    revisions: form.revisions
+      .filter((revision) => revision.title.trim())
+      .map((revision) => ({
+        title: revision.title.trim(),
+        revisionType: revision.revisionType,
+        effectiveDate: trimToNull(revision.effectiveDate),
+        status: revision.status,
+        summary: trimToNull(revision.summary),
+      })),
+  });
+
+  const saveDraft = async (step = activeStep) => {
+    const nextDraftId = draftId ?? (await startDraft());
+    if (!nextDraftId) return null;
+
+    setIsBusy(true);
+    try {
+      await syncSelectedPeopleDetails();
+
+      const response = await mutateOperations<OperationsContractDetails>(
+        request,
+        `/operations/contracts/${nextDraftId}`,
+        'PATCH',
+        buildPayload(step)
+      );
+      setDraftId(response.id);
+      setCreationMode(
+        creationMode === 'ai_prompt'
+          ? 'ai_prompt'
+          : ((response.creationMode as CreationMode) ?? creationMode)
+      );
+      setForm((current) =>
+        preservePartySelectionMetadata(toFormState(response), current)
+      );
+      showToastHandler?.('success', 'Rascunho salvo.');
+      return response;
+    } catch {
+      showToastHandler?.(
+        'error',
+        'Nao foi possivel salvar o rascunho ou sincronizar os dados da pessoa selecionada.'
+      );
+      return null;
+    } finally {
+      setIsBusy(false);
+    }
+  };
+
+  const handleExtractSource = async () => {
+    const nextDraftId = draftId ?? (await startDraft());
+    if (!nextDraftId) return;
+    if (!aiProvider) {
+      showToastHandler?.(
+        'error',
+        'Configure OpenAI ou Gemini para extrair o contrato.'
+      );
+      return;
+    }
+
+    setIsExtracting(true);
+    try {
+      const extracted = await mutateOperations<ExtractedDraft>(
+        request,
+        `/operations/contracts/${nextDraftId}/extract-source`,
+        'POST',
+        {
+          provider: aiProvider,
+          promptMessage:
+            'Analyze the attached contract and extract a structured draft for the contract form.',
+        }
+      );
+      setAiReview(
+        normalizeAiReview({
+          summary: extracted.summary,
+          missingFields: Array.isArray(extracted.missingFields)
+            ? extracted.missingFields.filter(Boolean)
+            : [],
+          warnings: Array.isArray(extracted.warnings)
+            ? extracted.warnings.filter(Boolean)
+            : [],
+          checklist: [],
+        })
+      );
+      setForm((current) => {
+        const merged = mergeExtractedDraft(current, extracted);
+        return {
+          ...merged,
+          sourceDocument: merged.sourceDocument
+            ? {
+                ...merged.sourceDocument,
+                extractionStatus: 'completed',
+                extractionSummary:
+                  extracted.summary ||
+                  extracted.description ||
+                  extracted.name ||
+                  null,
+              }
+            : merged.sourceDocument,
+        };
+      });
+      showToastHandler?.(
+        'success',
+        `Dados extraidos com ${aiProviderLabel}. Revise antes de concluir.`
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        'Nao foi possivel extrair os dados do documento.'
+      );
+    } finally {
+      setIsExtracting(false);
+    }
+  };
+
+  const handleNext = async () => {
+    if (activeStep === 0 && !draftId) {
+      if (creationMode === 'ai_prompt' || creationMode === 'duplicate') {
+        setActiveStep(1);
+        return;
+      }
+
+      const nextDraftId = await startDraft();
+      if (nextDraftId && creationMode !== 'upload') {
+        setActiveStep(1);
+      }
+      return;
+    }
+
+    if (activeStep === 1 && !draftId) {
+      if (creationMode === 'ai_prompt' && aiStartPrompt.trim()) {
+        setForm((current) => ({
+          ...current,
+          description: current.description || aiStartPrompt.trim(),
+        }));
+      }
+
+      if (creationMode === 'duplicate' || creationMode === 'ai_prompt') {
+        const nextDraftId = await startDraft();
+        if (!nextDraftId) return;
+
+        setDraftId(nextDraftId);
+        return;
+      }
+    }
+
+    const response = await saveDraft(
+      Math.min(activeStep + 1, wizardSteps.length - 1)
+    );
+    if (response) {
+      setActiveStep(Math.min(activeStep + 1, wizardSteps.length - 1));
+    }
+  };
+
+  const handleGeneratePdf = async () => {
+    const nextDraftId = draftId ?? (await startDraft());
+    if (!nextDraftId) return;
+
+    const saved = await saveDraft(activeStep);
+    if (!saved) return;
+
+    setIsGeneratingPdf(true);
+    try {
+      const response = await mutateOperations<{ fileId?: number }>(
+        request,
+        `/operations/contracts/${nextDraftId}/generate-pdf`,
+        'POST'
+      );
+      await reloadContract(nextDraftId);
+      showToastHandler?.('success', 'PDF gerado com sucesso.');
+      if (response.fileId) {
+        openStoredFile(response.fileId);
+      }
+    } catch {
+      showToastHandler?.(
+        'error',
+        'Nao foi possivel gerar o PDF. Verifique a configuracao do servidor.'
+      );
+    } finally {
+      setIsGeneratingPdf(false);
+    }
+  };
+
+  const handleRunLegalReview = useCallback(
+    async (targetContractId?: number | null) => {
+      if (!targetContractId) {
+        return null;
+      }
+
+      setIsBusy(true);
+      try {
+        const review = await mutateOperations<ContractAiReviewState>(
+          request,
+          `/operations/contracts/${targetContractId}/legal-review`,
+          'POST',
+          {
+            provider: aiProvider ?? undefined,
+            promptMessage:
+              'Review this contract draft and produce an advisory legal checklist for revision.',
+          }
+        );
+
+        const normalized = normalizeAiReview(review);
+        setAiReview(normalized);
+        showToastHandler?.(
+          'success',
+          'Checklist juridico orientativo atualizado.'
+        );
+        return normalized;
+      } catch {
+        showToastHandler?.(
+          'error',
+          'Nao foi possivel atualizar a revisao juridica orientativa.'
+        );
+        return null;
+      } finally {
+        setIsBusy(false);
+      }
+    },
+    [aiProvider, request, showToastHandler]
+  );
+
+  const runPostCreateAutomation = useCallback(
+    async (contract: OperationsContractDetails) => {
+      let latestContract = contract;
+      let generationSucceeded = false;
+      let reviewSucceeded = false;
+
+      setIsBusy(true);
+      try {
+        latestContract = await mutateOperations<OperationsContractDetails>(
+          request,
+          `/operations/contracts/${contract.id}/generate-content`,
+          'POST',
+          {
+            provider: aiProvider ?? undefined,
+            promptMessage:
+              trimToNull(aiStartPrompt) ?? trimToNull(form.description),
+            overwrite: !trimToNull(contract.contentHtml),
+          }
+        );
+
+        generationSucceeded = true;
+        setDraftId(latestContract.id);
+        setForm((current) =>
+          preservePartySelectionMetadata(toFormState(latestContract), current)
+        );
+      } catch {
+        showToastHandler?.(
+          'error',
+          'Nao foi possivel gerar automaticamente o conteudo inicial do contrato.'
+        );
+      }
+
+      try {
+        const review = await mutateOperations<ContractAiReviewState>(
+          request,
+          `/operations/contracts/${contract.id}/legal-review`,
+          'POST',
+          {
+            provider: aiProvider ?? undefined,
+            promptMessage:
+              'Review this generated contract draft and return an advisory legal checklist for revision.',
+          }
+        );
+
+        reviewSucceeded = true;
+        setAiReview(normalizeAiReview(review));
+      } catch {
+        showToastHandler?.(
+          'error',
+          'Nao foi possivel montar o checklist juridico orientativo automaticamente.'
+        );
+      } finally {
+        setIsBusy(false);
+      }
+
+      if (generationSucceeded || reviewSucceeded) {
+        showToastHandler?.(
+          'success',
+          'Criacao concluida. O conteudo inicial e a revisao orientativa ja estao prontos para edicao.'
+        );
+      }
+
+      if (generationSucceeded || reviewSucceeded) {
+        try {
+          latestContract = await reloadContract(contract.id);
+        } catch {
+          // noop: the editor can still open with the latest saved response
+        }
+      }
+
+      return latestContract;
+    },
+    [
+      aiProvider,
+      aiStartPrompt,
+      form.description,
+      reloadContract,
+      request,
+      showToastHandler,
+    ]
+  );
+
+  const handleComplete = async () => {
+    const response = await saveDraft(reviewStepIndex);
+    if (!response) return;
+
+    const finalResponse = isCreateFlow
+      ? await runPostCreateAutomation(response)
+      : response;
+
+    await onSaved?.(finalResponse);
+  };
+
+  const modeCards = useMemo(
+    () => [
+      {
+        value: 'upload' as CreationMode,
+        title: 'Enviar contrato',
+        description:
+          'Anexe PDF ou Word, relacione o arquivo ao contrato e deixe a IA preencher o rascunho.',
+        icon: Upload,
+        color: 'text-sky-600 bg-sky-500/10',
+      },
+      {
+        value: 'template' as CreationMode,
+        title: 'Usar template',
+        description:
+          'Comece com um modelo reutilizavel e ajuste apenas os campos necessarios.',
+        icon: LayoutTemplate,
+        color: 'text-amber-600 bg-amber-500/10',
+      },
+      {
+        value: 'ai_prompt' as CreationMode,
+        title: 'Prompt com IA',
+        description: aiProvider
+          ? 'Descreva o contrato em linguagem natural e deixe a IA montar um rascunho inicial.'
+          : 'Configure OpenAI ou Gemini para habilitar este modo.',
+        icon: Sparkles,
+        color: 'text-fuchsia-600 bg-fuchsia-500/10',
+        disabled: !aiProvider,
+      },
+      {
+        value: 'blank' as CreationMode,
+        title: 'Do zero',
+        description: 'Crie um rascunho enxuto e preencha os dados aos poucos.',
+        icon: FileText,
+        color: 'text-emerald-600 bg-emerald-500/10',
+      },
+      {
+        value: 'duplicate' as CreationMode,
+        title: 'Duplicar',
+        description:
+          'Reaproveite um contrato existente como base para um novo registro.',
+        icon: CopyPlus,
+        color: 'text-violet-600 bg-violet-500/10',
+      },
+    ],
+    [aiProvider]
+  );
+
+  const currentStep = wizardSteps[activeStep];
+
+  const stepContent = (() => {
+    if (activeStep === 0) {
+      return (
+        <div className="space-y-4">
+          <SectionCard
+            title="Escolha como deseja iniciar"
+            description="O contrato nasce como rascunho e voce pode completar tudo depois."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="grid gap-3">
+              {modeCards.map((card) => {
+                const Icon = card.icon;
+                const isSelected = creationMode === card.value;
+                const isDisabled = Boolean(card.disabled);
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    disabled={isDisabled}
+                    className={`rounded-xl border p-4 text-left transition-all ${
+                      isSelected
+                        ? 'border-primary bg-accent/30 ring-1 ring-primary/20'
+                        : isDisabled
+                          ? 'cursor-not-allowed opacity-50'
+                          : 'cursor-pointer hover:border-primary/30 hover:bg-accent/20'
+                    }`}
+                    onClick={() => {
+                      if (isDisabled) return;
+                      setCreationMode(card.value);
+                      setForm((current) => ({
+                        ...current,
+                        creationMode: card.value,
+                      }));
+                    }}
+                  >
+                    <div className="flex items-start gap-3">
+                      <div className={`rounded-xl p-2.5 ${card.color}`}>
+                        <Icon className="size-5" />
+                      </div>
+                      <div className="space-y-1">
+                        <div className="font-medium">{card.title}</div>
+                        <p className="text-sm text-muted-foreground">
+                          {card.description}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </SectionCard>
+
+          {creationMode === 'upload' ? (
+            <SectionCard
+              title="Documento fonte"
+              description="O arquivo fica vinculado ao contrato e pode ser usado pela IA para preencher o cadastro."
+              compact
+              descriptionMode="tooltip"
+            >
+              <div className="space-y-4">
+                <label className="flex cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-4 py-8 text-center transition-colors hover:border-primary/40 hover:bg-accent/20">
+                  <FileSpreadsheet className="size-7 text-primary" />
+                  <div className="space-y-1">
+                    <div className="font-medium">
+                      Selecionar PDF, DOC ou DOCX
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      O arquivo sera guardado como documento fonte do contrato.
+                    </p>
+                  </div>
+                  <input
+                    type="file"
+                    className="hidden"
+                    accept=".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                    onChange={(event) => {
+                      setSourceFile(event.target.files?.[0] ?? null);
+                    }}
+                  />
+                </label>
+
+                {sourceFile ? (
+                  <div className="rounded-xl border bg-muted/20 px-4 py-3 text-sm">
+                    <div className="font-medium">{sourceFile.name}</div>
+                    <div className="text-muted-foreground">
+                      {Math.max(sourceFile.size / 1024, 1).toFixed(0)} KB
+                    </div>
+                  </div>
+                ) : null}
+
+                {form.sourceDocument ? (
+                  <div className="rounded-xl border px-4 py-3 text-sm">
+                    <div className="font-medium">
+                      {form.sourceDocument.fileName}
+                    </div>
+                    <div className="text-muted-foreground">
+                      Status da extracao:{' '}
+                      {formatEnumLabel(form.sourceDocument.extractionStatus)}
+                    </div>
+                  </div>
+                ) : null}
+
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="cursor-pointer"
+                    disabled={(!draftId && !sourceFile) || isExtracting}
+                    onClick={() => void handleExtractSource()}
+                  >
+                    {isExtracting ? (
+                      <LoaderCircle className="size-4 animate-spin" />
+                    ) : (
+                      <Sparkles className="size-4" />
+                    )}
+                    Extrair com {aiProviderLabel || 'IA'}
+                  </Button>
+                  {form.sourceDocument?.fileId ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="cursor-pointer"
+                      onClick={() =>
+                        openStoredFile(form.sourceDocument?.fileId)
+                      }
+                    >
+                      <Download className="size-4" />
+                      Abrir documento
+                    </Button>
+                  ) : null}
+                </div>
+
+                {aiReview ? (
+                  <div className="space-y-3 rounded-2xl border bg-muted/20 p-4">
+                    {aiReview.summary ? (
+                      <p className="text-sm">{aiReview.summary}</p>
+                    ) : null}
+                    {aiReview.missingFields.length ? (
+                      <div className="space-y-1 text-sm">
+                        <div className="font-medium">Campos faltantes</div>
+                        <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+                          {aiReview.missingFields.map((item) => (
+                            <li key={item}>{item}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    ) : null}
+                    {aiReview.warnings.length ? (
+                      <div className="space-y-1 text-sm">
+                        <div className="font-medium">Avisos</div>
+                        <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+                          {aiReview.warnings.map((item) => (
+                            <li key={item}>{item}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            </SectionCard>
+          ) : null}
+
+          {creationMode === 'template' ? (
+            <ContractTemplateSelectWithCreate
+              label="Template do contrato"
+              value={selectedTemplateId}
+              initialSelectedLabel={selectedTemplate?.name ?? ''}
+              placeholder="Selecione um template"
+              onChange={(template) => {
+                setSelectedTemplateId(template?.id ?? null);
+                setForm((current) => ({
+                  ...current,
+                  contractTemplateId: template ? String(template.id) : 'none',
+                }));
+              }}
+            />
+          ) : null}
+        </div>
+      );
+    }
+
+    if (activeStep === 1) {
+      if (creationMode === 'ai_prompt' && !draftId) {
+        return (
+          <div className="space-y-4">
+            <SectionCard
+              title="Prompt inicial para a IA"
+              description="Descreva o tipo de contrato e os principais pontos para gerar um primeiro rascunho."
+              compact
+              descriptionMode="tooltip"
+            >
+              <div className="space-y-3">
+                <Textarea
+                  rows={6}
+                  value={aiStartPrompt}
+                  placeholder="Ex: Gere um contrato de prestacao de servicos mensais com vigencia de 12 meses, pagamento recorrente, confidencialidade e clausula de rescisao."
+                  onChange={(event) => setAiStartPrompt(event.target.value)}
+                />
+                <p className="text-sm text-muted-foreground">
+                  Ao concluir o cadastro, a IA vai gerar um texto inicial para
+                  voce revisar e ajustar no modo de edicao.
+                </p>
+              </div>
+            </SectionCard>
+          </div>
+        );
+      }
+
+      if (creationMode === 'duplicate' && !draftId) {
+        return (
+          <div className="space-y-4">
+            <SectionCard
+              title="Contrato base"
+              description="Selecione o contrato que sera usado para duplicar este novo rascunho. Este campo e obrigatorio para continuar."
+              compact
+              descriptionMode="tooltip"
+            >
+              <div className="space-y-3">
+                <Select
+                  value={
+                    selectedDuplicateId ? String(selectedDuplicateId) : 'none'
+                  }
+                  onValueChange={(value) =>
+                    setSelectedDuplicateId(
+                      value === 'none' ? null : Number(value)
+                    )
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Selecione um contrato" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">Selecione um contrato</SelectItem>
+                    {contracts.map((contract) => (
+                      <SelectItem key={contract.id} value={String(contract.id)}>
+                        {(
+                          contract.name ||
+                          contract.code ||
+                          `Contrato ${contract.id}`
+                        ).trim()}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                <p className="text-sm text-muted-foreground">
+                  Se preferir, volte e escolha outra opcao para iniciar.
+                </p>
+              </div>
+            </SectionCard>
+          </div>
+        );
+      }
+
+      return (
+        <div className="space-y-4">
+          <SectionCard
+            title="Informacoes principais"
+            description="Preencha os dados basicos para identificar o contrato e seus relacionamentos."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Codigo</Label>
+                <Input
+                  value={form.code}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      code: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Titulo do contrato</Label>
+                <Input
+                  value={form.name}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      name: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-3 md:col-span-2">
+                <PersonSelectWithCreate
+                  label="Cliente ou parte principal"
+                  entityLabel="cliente"
+                  value={primaryParty?.personId ?? null}
+                  initialSelectedLabel={form.clientName}
+                  selectPlaceholder="Selecionar pessoa ou empresa"
+                  personTypeFilter="all"
+                  onChange={(personId, personName) => {
+                    void handlePartyPersonChange(
+                      primaryPartyIndex,
+                      personId,
+                      personName,
+                      {
+                        syncClientName: true,
+                        markAsPrimary: true,
+                      }
+                    );
+                  }}
+                />
+
+                <div className="space-y-3 rounded-2xl border bg-muted/20 p-3">
+                  <div className="space-y-1">
+                    <div className="text-sm font-medium">
+                      Dados usados na parte principal
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      Escolha quais dados do cadastro dessa pessoa devem entrar
+                      no contrato. Se faltar algo, digite um novo valor.
+                    </p>
+                  </div>
+
+                  <div className="grid gap-3 md:grid-cols-3">
+                    <PersonDataChoiceField
+                      label="Documento"
+                      value={primaryParty?.documentNumber ?? ''}
+                      options={primaryParty?.availableDocuments ?? []}
+                      mode={primaryParty?.documentMode ?? 'new'}
+                      kind="document"
+                      placeholder="Selecionar ou digitar documento"
+                      onModeChange={(mode) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          documentMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          documentNumber: value,
+                        }))
+                      }
+                    />
+                    <PersonDataChoiceField
+                      label="E-mail"
+                      value={primaryParty?.email ?? ''}
+                      options={primaryParty?.availableEmails ?? []}
+                      mode={primaryParty?.emailMode ?? 'new'}
+                      kind="email"
+                      inputType="email"
+                      placeholder="Selecionar ou digitar e-mail"
+                      onModeChange={(mode) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          emailMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          email: value,
+                        }))
+                      }
+                    />
+                    <PersonDataChoiceField
+                      label="Telefone"
+                      value={primaryParty?.phone ?? ''}
+                      options={primaryParty?.availablePhones ?? []}
+                      mode={primaryParty?.phoneMode ?? 'new'}
+                      kind="phone"
+                      inputType="tel"
+                      placeholder="Selecionar ou digitar telefone"
+                      onModeChange={(mode) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          phoneMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(primaryPartyIndex, (party) => ({
+                          ...party,
+                          phone: value,
+                        }))
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+              <ContractTemplateSelectWithCreate
+                label="Template vinculado"
+                value={
+                  form.contractTemplateId !== 'none'
+                    ? Number(form.contractTemplateId)
+                    : null
+                }
+                initialSelectedLabel={
+                  contractTemplates.find(
+                    (template) =>
+                      String(template.id) === form.contractTemplateId
+                  )?.name ?? ''
+                }
+                placeholder="Selecionar template"
+                onChange={(template) => {
+                  setSelectedTemplateId(template?.id ?? null);
+                  setForm((current) => ({
+                    ...current,
+                    contractTemplateId: template ? String(template.id) : 'none',
+                    contractCategory:
+                      template?.contractCategory ?? current.contractCategory,
+                    contractType:
+                      template?.contractType ?? current.contractType,
+                    billingModel:
+                      template?.billingModel ?? current.billingModel,
+                    signatureStatus:
+                      template?.signatureStatus ?? current.signatureStatus,
+                    name: current.name || template?.name || '',
+                    description:
+                      current.description || template?.description || '',
+                    contentHtml:
+                      current.contentHtml || template?.contentHtml || '',
+                  }));
+                }}
+              />
+              <CollaboratorSelectWithCreate
+                label="Gestor responsavel"
+                value={
+                  form.accountManagerCollaboratorId !== 'none'
+                    ? Number(form.accountManagerCollaboratorId)
+                    : null
+                }
+                initialSelectedLabel={
+                  collaborators.find(
+                    (item) =>
+                      String(item.id) === form.accountManagerCollaboratorId
+                  )?.displayName ?? ''
+                }
+                placeholder="Selecionar colaborador"
+                onChange={(option) =>
+                  setForm((current) => ({
+                    ...current,
+                    accountManagerCollaboratorId: option
+                      ? String(option.id)
+                      : 'none',
+                  }))
+                }
+              />
+              <CollaboratorSelectWithCreate
+                label="Colaborador relacionado"
+                value={
+                  form.relatedCollaboratorId !== 'none'
+                    ? Number(form.relatedCollaboratorId)
+                    : null
+                }
+                initialSelectedLabel={
+                  collaborators.find(
+                    (item) => String(item.id) === form.relatedCollaboratorId
+                  )?.displayName ?? ''
+                }
+                placeholder="Selecionar colaborador"
+                onChange={(option) =>
+                  setForm((current) => ({
+                    ...current,
+                    relatedCollaboratorId: option ? String(option.id) : 'none',
+                  }))
+                }
+              />
+              <div className="space-y-1.5">
+                <Label className="text-xs">Categoria</Label>
+                <Select
+                  value={form.contractCategory}
+                  onValueChange={(value) =>
+                    setForm((current) => ({
+                      ...current,
+                      contractCategory: value,
+                    }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[
+                      'employee',
+                      'contractor',
+                      'client',
+                      'supplier',
+                      'vendor',
+                      'partner',
+                      'internal',
+                      'other',
+                    ].map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {getOptionLabel('contractCategories', value)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Tipo</Label>
+                <Select
+                  value={form.contractType}
+                  onValueChange={(value) =>
+                    setForm((current) => ({ ...current, contractType: value }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[
+                      'clt',
+                      'pj',
+                      'freelancer_agreement',
+                      'service_agreement',
+                      'fixed_term',
+                      'recurring_service',
+                      'nda',
+                      'amendment',
+                      'addendum',
+                      'other',
+                    ].map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {getOptionLabel('contractTypes', value)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </SectionCard>
+        </div>
+      );
+    }
+
+    if (activeStep === 2) {
+      return (
+        <div className="space-y-4">
+          <SectionCard
+            title="Partes relacionadas"
+            description="Adicione apenas o essencial agora. O restante pode ser completado depois."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="space-y-3">
+              {form.parties.map((party, index) => (
+                <div key={`party-${index}`} className="border-t pt-3">
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <PersonSelectWithCreate
+                      label={`Parte ${index + 1}`}
+                      entityLabel="parte"
+                      value={party.personId}
+                      initialSelectedLabel={party.displayName}
+                      selectPlaceholder="Selecionar pessoa ou empresa"
+                      personTypeFilter="all"
+                      onChange={(personId, personName) =>
+                        void handlePartyPersonChange(
+                          index,
+                          personId,
+                          personName,
+                          {
+                            syncClientName: party.isPrimary,
+                          }
+                        )
+                      }
+                    />
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">Papel</Label>
+                      <Select
+                        value={party.partyRole}
+                        onValueChange={(value) =>
+                          setForm((current) => ({
+                            ...current,
+                            parties: current.parties.map((item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, partyRole: value }
+                                : item
+                            ),
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {[
+                            'employee',
+                            'employer',
+                            'client',
+                            'supplier',
+                            'vendor',
+                            'partner',
+                            'witness',
+                            'internal_owner',
+                            'other',
+                          ].map((value) => (
+                            <SelectItem key={value} value={value}>
+                              {getOptionLabel('partyRoles', value)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <PersonDataChoiceField
+                      label="Documento"
+                      value={party.documentNumber}
+                      options={party.availableDocuments}
+                      mode={party.documentMode}
+                      kind="document"
+                      placeholder="Selecionar ou digitar documento"
+                      onModeChange={(mode) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          documentMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          documentNumber: value,
+                        }))
+                      }
+                    />
+                    <PersonDataChoiceField
+                      label="E-mail"
+                      value={party.email}
+                      options={party.availableEmails}
+                      mode={party.emailMode}
+                      kind="email"
+                      inputType="email"
+                      placeholder="Selecionar ou digitar e-mail"
+                      onModeChange={(mode) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          emailMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          email: value,
+                        }))
+                      }
+                    />
+                    <PersonDataChoiceField
+                      label="Telefone"
+                      value={party.phone}
+                      options={party.availablePhones}
+                      mode={party.phoneMode}
+                      kind="phone"
+                      inputType="tel"
+                      placeholder="Selecionar ou digitar telefone"
+                      onModeChange={(mode) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          phoneMode: mode,
+                        }))
+                      }
+                      onValueChange={(value) =>
+                        updatePartyAt(index, (item) => ({
+                          ...item,
+                          phone: value,
+                        }))
+                      }
+                    />
+                    <div className="flex items-center gap-2 pt-6">
+                      <Switch
+                        checked={party.isPrimary}
+                        onCheckedChange={(checked) =>
+                          setForm((current) => {
+                            const nextParties = current.parties.map(
+                              (item, itemIndex) => ({
+                                ...item,
+                                isPrimary:
+                                  itemIndex === index
+                                    ? checked
+                                    : checked
+                                      ? false
+                                      : item.isPrimary,
+                              })
+                            );
+
+                            return {
+                              ...current,
+                              clientName:
+                                checked && nextParties[index]?.displayName
+                                  ? nextParties[index].displayName
+                                  : current.clientName,
+                              parties: nextParties,
+                            };
+                          })
+                        }
+                      />
+                      <span className="text-sm text-muted-foreground">
+                        Parte principal
+                      </span>
+                    </div>
+                    {form.parties.length > 1 ? (
+                      <div className="flex justify-end md:col-span-2">
+                        <Button
+                          type="button"
+                          variant="destructive"
+                          className="cursor-pointer"
+                          onClick={() =>
+                            setForm((current) => ({
+                              ...current,
+                              parties: current.parties.filter(
+                                (_, itemIndex) => itemIndex !== index
+                              ),
+                            }))
+                          }
+                        >
+                          <Trash2 className="size-4" />
+                          Remover parte
+                        </Button>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+
+              <div className="flex gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="cursor-pointer"
+                  onClick={() =>
+                    setForm((current) => ({
+                      ...current,
+                      parties: [...current.parties, emptyParty()],
+                    }))
+                  }
+                >
+                  <Users className="size-4" />
+                  Adicionar parte
+                </Button>
+              </div>
+            </div>
+          </SectionCard>
+          <SectionCard
+            title="Assinaturas"
+            description="Liste apenas quem precisa aparecer no fluxo de assinatura."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="space-y-3">
+              {form.signatures.map((signature, index) => (
+                <div
+                  key={`signature-${index}`}
+                  className="grid gap-3 md:grid-cols-2 border-t pt-3"
+                >
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Nome do signatario</Label>
+                    <Input
+                      value={signature.signerName}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          signatures: current.signatures.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, signerName: event.target.value }
+                                : item
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Papel</Label>
+                    <Input
+                      value={signature.signerRole}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          signatures: current.signatures.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, signerRole: event.target.value }
+                                : item
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Email</Label>
+                    <Input
+                      value={signature.signerEmail}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          signatures: current.signatures.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, signerEmail: event.target.value }
+                                : item
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Status</Label>
+                    <Select
+                      value={signature.status}
+                      onValueChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          signatures: current.signatures.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, status: value }
+                                : item
+                          ),
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {['pending', 'signed', 'rejected'].map((value) => (
+                          <SelectItem key={value} value={value}>
+                            {getOptionLabel('signatureStatuses', value)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {form.signatures.length > 1 ? (
+                    <div className="flex justify-end md:col-span-2">
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setForm((current) => ({
+                            ...current,
+                            signatures: current.signatures.filter(
+                              (_, itemIndex) => itemIndex !== index
+                            ),
+                          }))
+                        }
+                      >
+                        <Trash2 className="size-4" />
+                        Remover signatario
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer"
+                onClick={() =>
+                  setForm((current) => ({
+                    ...current,
+                    signatures: [...current.signatures, emptySignature()],
+                  }))
+                }
+              >
+                <UserRound className="size-4" />
+                Adicionar signatario
+              </Button>
+            </div>
+          </SectionCard>
+        </div>
+      );
+    }
+
+    if (activeStep === 3) {
+      return (
+        <div className="space-y-4">
+          <SectionCard
+            title="Condicoes e vigencia"
+            description="Deixe o contrato facil de criar. Tudo aqui pode ser ajustado na edicao."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="grid gap-3 md:grid-cols-2">
+              {contractDateFields.map(({ key, label }) => (
+                <div key={key} className="space-y-1.5">
+                  <Label className="text-xs">{label}</Label>
+                  <Input
+                    type="date"
+                    value={form[key]}
+                    onChange={(event) =>
+                      setForm((current) => ({
+                        ...current,
+                        [key]: event.target.value,
+                      }))
+                    }
+                  />
+                </div>
+              ))}
+              <div className="space-y-1.5">
+                <Label className="text-xs">Modelo de cobranca</Label>
+                <Select
+                  value={form.billingModel}
+                  onValueChange={(value) =>
+                    setForm((current) => ({ ...current, billingModel: value }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[
+                      'time_and_material',
+                      'monthly_retainer',
+                      'fixed_price',
+                    ].map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {getOptionLabel('billingModels', value)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Status</Label>
+                <Select
+                  value={form.status}
+                  onValueChange={(value) =>
+                    setForm((current) => ({ ...current, status: value }))
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[
+                      'draft',
+                      'under_review',
+                      'active',
+                      'renewal',
+                      'expired',
+                      'closed',
+                      'archived',
+                    ].map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {getOptionLabel('statuses', value)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Orcamento</Label>
+                <Input
+                  value={form.budgetAmount}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      budgetAmount: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">Limite mensal de horas</Label>
+                <Input
+                  value={form.monthlyHourCap}
+                  onChange={(event) =>
+                    setForm((current) => ({
+                      ...current,
+                      monthlyHourCap: event.target.value,
+                    }))
+                  }
+                />
+              </div>
+              <div className="flex items-center gap-2 pt-6">
+                <Switch
+                  checked={form.isActive}
+                  onCheckedChange={(checked) =>
+                    setForm((current) => ({ ...current, isActive: checked }))
+                  }
+                />
+                <span className="text-sm text-muted-foreground">
+                  Contrato ativo
+                </span>
+              </div>
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            title="Termos financeiros"
+            description="Use somente os termos que fazem sentido para este rascunho."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="space-y-3">
+              {form.financialTerms.map((term, index) => (
+                <div
+                  key={`term-${index}`}
+                  className="grid gap-3 border-t pt-3 md:grid-cols-2"
+                >
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Rotulo</Label>
+                    <Input
+                      value={term.label}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          financialTerms: current.financialTerms.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, label: event.target.value }
+                                : item
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Tipo</Label>
+                    <Select
+                      value={term.termType}
+                      onValueChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          financialTerms: current.financialTerms.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, termType: value }
+                                : item
+                          ),
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {['value', 'payment', 'revenue', 'fine', 'other'].map(
+                          (value) => (
+                            <SelectItem key={value} value={value}>
+                              {getOptionLabel('financialTermTypes', value)}
+                            </SelectItem>
+                          )
+                        )}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Valor</Label>
+                    <InputMoney
+                      value={term.amount}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          financialTerms: current.financialTerms.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, amount: event.target.value }
+                                : item
+                          ),
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">Recorrencia</Label>
+                    <Select
+                      value={term.recurrence}
+                      onValueChange={(value) =>
+                        setForm((current) => ({
+                          ...current,
+                          financialTerms: current.financialTerms.map(
+                            (item, itemIndex) =>
+                              itemIndex === index
+                                ? { ...item, recurrence: value }
+                                : item
+                          ),
+                        }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {[
+                          'one_time',
+                          'monthly',
+                          'quarterly',
+                          'yearly',
+                          'other',
+                        ].map((value) => (
+                          <SelectItem key={value} value={value}>
+                            {getOptionLabel('recurrences', value)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  {form.financialTerms.length > 1 ? (
+                    <div className="flex justify-end md:col-span-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="cursor-pointer"
+                        onClick={() =>
+                          setForm((current) => ({
+                            ...current,
+                            financialTerms: current.financialTerms.filter(
+                              (_, itemIndex) => itemIndex !== index
+                            ),
+                          }))
+                        }
+                      >
+                        Remover termo
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+              ))}
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer"
+                onClick={() =>
+                  setForm((current) => ({
+                    ...current,
+                    financialTerms: [
+                      ...current.financialTerms,
+                      emptyFinancialTerm(),
+                    ],
+                  }))
+                }
+              >
+                <BadgeDollarSign className="size-4" />
+                Adicionar termo financeiro
+              </Button>
+            </div>
+          </SectionCard>
+        </div>
+      );
+    }
+
+    if (contentStepIndex >= 0 && activeStep === contentStepIndex) {
+      return (
+        <div className="space-y-4">
+          <SectionCard
+            title="Revisao juridica orientativa"
+            description="Use o checklist como apoio para a revisao do texto. Ele nao bloqueia a edicao nem substitui a validacao juridica final."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="space-y-3">
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <p className="text-sm text-muted-foreground">
+                  {aiReview?.reviewedAt
+                    ? `Ultima atualizacao: ${formatDate(aiReview.reviewedAt)}`
+                    : 'Atualize a revisao sempre que mudar clausulas sensiveis.'}
+                </p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="cursor-pointer"
+                  disabled={isBusy || !draftId}
+                  onClick={() => void handleRunLegalReview(draftId)}
+                >
+                  {isBusy ? (
+                    <LoaderCircle className="size-4 animate-spin" />
+                  ) : (
+                    <Sparkles className="size-4" />
+                  )}
+                  Atualizar checklist
+                </Button>
+              </div>
+
+              {aiReview ? (
+                <div className="space-y-3 rounded-2xl border bg-muted/20 p-4 text-sm">
+                  {aiReview.summary ? <p>{aiReview.summary}</p> : null}
+
+                  {aiReview.checklist.length ? (
+                    <div className="space-y-1">
+                      <div className="font-medium">Checklist</div>
+                      <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+                        {aiReview.checklist.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ) : null}
+
+                  {aiReview.missingFields.length ? (
+                    <div className="space-y-1">
+                      <div className="font-medium">Pontos faltantes</div>
+                      <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+                        {aiReview.missingFields.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ) : null}
+
+                  {aiReview.warnings.length ? (
+                    <div className="space-y-1">
+                      <div className="font-medium">Alertas</div>
+                      <ul className="list-disc space-y-1 pl-5 text-muted-foreground">
+                        {aiReview.warnings.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ) : null}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  Gere ou atualize o checklist para receber uma revisao juridica
+                  orientativa do contrato em edicao.
+                </p>
+              )}
+            </div>
+          </SectionCard>
+
+          <ContractContentEditor
+            value={form.contentHtml}
+            onChange={(value) =>
+              setForm((current) => ({ ...current, contentHtml: value }))
+            }
+            editorTitle="Texto do contrato"
+            editorDescription="Edite o texto final em RichText."
+            previewTitle="Preview"
+            previewDescription="Visualize como o contrato esta ficando."
+            previewFallbackHtml={
+              form.description
+                ? `<p>${form.description.replace(/\n/g, '<br />')}</p>`
+                : undefined
+            }
+            promptContext={{
+              name: form.name,
+              client_name: form.clientName,
+              start_date: form.startDate,
+              end_date: form.endDate,
+              budget_amount: form.budgetAmount,
+              monthly_hour_cap: form.monthlyHourCap,
+            }}
+            compact
+            descriptionMode="tooltip"
+            layout="tabs"
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-4">
+        <SectionCard
+          title="Resumo do rascunho"
+          description="Veja o que ja foi preenchido e conclua o contrato quando estiver satisfeito."
+          compact
+          descriptionMode="tooltip"
+        >
+          <div className="grid gap-3 md:grid-cols-2">
+            {[
+              ['Codigo', form.code || 'Nao informado'],
+              ['Titulo', form.name || 'Nao informado'],
+              ['Cliente', form.clientName || 'Nao informado'],
+              [
+                'Vigencia',
+                form.startDate
+                  ? `${formatDate(form.startDate)} - ${formatDate(form.endDate)}`
+                  : 'Nao informada',
+              ],
+              [
+                'Financeiro',
+                form.budgetAmount
+                  ? formatCurrency(Number(form.budgetAmount || 0))
+                  : 'Opcional',
+              ],
+              ['Modo', getOptionLabel('creationModes', creationMode)],
+            ].map(([label, value]) => (
+              <div key={label} className="rounded-2xl border bg-muted/20 p-3">
+                <div className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
+                  {label}
+                </div>
+                <div className="mt-1 text-sm font-medium">{value}</div>
+              </div>
+            ))}
+          </div>
+        </SectionCard>
+
+        {isCreateFlow ? (
+          <SectionCard
+            title="Proximo passo apos concluir"
+            description="Ao concluir o cadastro, o sistema gera automaticamente o conteudo inicial do contrato e um checklist juridico orientativo para voce revisar no modo de edicao."
+            compact
+            descriptionMode="tooltip"
+          >
+            <p className="text-sm text-muted-foreground">
+              O fluxo de criacao termina aqui. O texto do contrato fica
+              concentrado na etapa de edicao, com apoio de IA para revisao e
+              ajustes.
+            </p>
+          </SectionCard>
+        ) : null}
+
+        {form.sourceDocument ? (
+          <SectionCard
+            title="Documento fonte"
+            description="O documento original permanece relacionado ao contrato."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border p-4">
+              <div>
+                <div className="font-medium">
+                  {form.sourceDocument.fileName}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Extracao:{' '}
+                  {getOptionLabel(
+                    'extractionStatuses',
+                    form.sourceDocument.extractionStatus
+                  )}
+                </div>
+              </div>
+              {form.sourceDocument.fileId ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="cursor-pointer"
+                  onClick={() => openStoredFile(form.sourceDocument?.fileId)}
+                >
+                  <Download className="size-4" />
+                  Abrir fonte
+                </Button>
+              ) : null}
+            </div>
+          </SectionCard>
+        ) : null}
+
+        {form.generatedPdfDocument ? (
+          <SectionCard
+            title="PDF gerado"
+            description="O PDF timbrado mais recente fica salvo junto ao contrato."
+            compact
+            descriptionMode="tooltip"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border p-4">
+              <div>
+                <div className="font-medium">
+                  {form.generatedPdfDocument.fileName}
+                </div>
+                <div className="text-sm text-muted-foreground">
+                  Pronto para download.
+                </div>
+              </div>
+              {form.generatedPdfDocument.fileId ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="cursor-pointer"
+                  onClick={() =>
+                    openStoredFile(form.generatedPdfDocument?.fileId)
+                  }
+                >
+                  <Download className="size-4" />
+                  Baixar PDF
+                </Button>
+              ) : null}
+            </div>
+          </SectionCard>
+        ) : null}
+      </div>
+    );
+  })();
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="border-b px-4 py-4">
+        <div className="flex items-start gap-3">
+          <div className="rounded-2xl bg-primary/10 p-2.5 text-primary">
+            {currentStep ? <currentStep.icon className="size-5" /> : null}
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
+              Contratos
+            </div>
+            <h2 className="text-lg font-semibold">
+              {draftId
+                ? form.name || form.code || 'Rascunho de contrato'
+                : isCreateFlow
+                  ? 'Novo contrato'
+                  : 'Contrato'}
+            </h2>
+          </div>
+        </div>
+
+        <div className="mt-4 grid grid-cols-3 gap-2 sm:grid-cols-6">
+          {wizardSteps.map((step, index) => {
+            const Icon = step.icon;
+            const isCurrent = index === activeStep;
+            const isEnabled = draftId !== null || index === 0 || contractId;
+            return (
+              <button
+                key={step.key}
+                type="button"
+                disabled={!isEnabled}
+                className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-left text-xs transition-all ${
+                  isCurrent
+                    ? 'border-primary bg-primary/10 text-primary'
+                    : 'text-muted-foreground hover:border-primary/30 hover:text-foreground'
+                } ${!isEnabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+                onClick={() => {
+                  if (!isEnabled) return;
+                  setActiveStep(index);
+                }}
+              >
+                <Icon className="size-3.5" />
+                <span className="truncate">{step.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-4">{stepContent}</div>
+
+      <div className="border-t bg-background px-4 py-3">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            className="cursor-pointer"
+            onClick={
+              activeStep === 0
+                ? onCancel
+                : () => setActiveStep((current) => Math.max(current - 1, 0))
+            }
+          >
+            <ChevronLeft className="size-4" />
+            {activeStep === 0 ? 'Cancelar' : 'Voltar'}
+          </Button>
+
+          <div className="flex flex-wrap gap-2">
+            {draftId ? (
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer"
+                disabled={isBusy}
+                onClick={() => void saveDraft(activeStep)}
+              >
+                {isBusy ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : (
+                  <Save className="size-4" />
+                )}
+                Salvar rascunho
+              </Button>
+            ) : null}
+
+            {draftId &&
+            Boolean(form.contentHtml?.trim()) &&
+            (contentStepIndex < 0 || activeStep >= contentStepIndex) ? (
+              <Button
+                type="button"
+                variant="outline"
+                className="cursor-pointer"
+                disabled={isGeneratingPdf}
+                onClick={() => void handleGeneratePdf()}
+              >
+                {isGeneratingPdf ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : (
+                  <Download className="size-4" />
+                )}
+                Gerar PDF
+              </Button>
+            ) : null}
+
+            {activeStep === wizardSteps.length - 1 ? (
+              <Button
+                type="button"
+                className="cursor-pointer"
+                disabled={isBusy}
+                onClick={() => void handleComplete()}
+              >
+                Concluir
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                className="cursor-pointer"
+                disabled={isBusy || isExtracting}
+                onClick={() => void handleNext()}
+              >
+                {isBusy ? (
+                  <LoaderCircle className="size-4 animate-spin" />
+                ) : null}
+                Proximo
+                <ChevronRight className="size-4" />
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}