// Composant de liste des clients
const CustomerList: React.FC = () => {
  const { data, isLoading } = useQuery(
    ['customers'],
    fetchCustomers,
    {
      staleTime: 5 * 60 * 1000, // 5 minutes
    }
  );

  return (
    <DataTable
      columns={customerColumns}
      data={data || []}
      loading={isLoading}
      filters={[
        { key: 'status', label: 'Statut' },
        { key: 'type', label: 'Type' },
      ]}
    />
  );
};

// Interface de client
interface Customer {
  id: string;
  name: string;
  type: 'company' | 'individual';
  status: 'active' | 'inactive';
  contacts: Contact[];
  addresses: Address[];
  metadata: Record<string, unknown>;
}

// Formulaire de client
const CustomerForm: React.FC<{ customer?: Customer }> = ({ customer }) => {
  const form = useForm<Customer>({
    defaultValues: customer || {
      type: 'company',
      status: 'active',
    },
  });

  const onSubmit = async (data: Customer) => {
    await saveCustomer(data);
    router.push('/customers');
  };

  return (
    <Form {...form}>
      <FormField
        name="name"
        label="Nom"
        rules={{ required: true }}
      />
      <FormField
        name="type"
        label="Type"
        type="select"
        options={customerTypes}
      />
      {/* ... autres champs */}
    </Form>
  );
};

// Interface de contact
interface Contact {
  id: string;
  customerId: string;
  firstName: string;
  lastName: string;
  email: string;
  phone?: string;
  role?: string;
  isPrimary: boolean;
}

// Liste des contacts
const ContactList: React.FC<{ customerId: string }> = ({ customerId }) => {
  const { data: contacts } = useQuery(
    ['contacts', customerId],
    () => fetchCustomerContacts(customerId)
  );

  return (
    <div className="contacts-list">
      {contacts?.map(contact => (
        <ContactCard
          key={contact.id}
          contact={contact}
          onEdit={() => editContact(contact)}
        />
      ))}
    </div>
  );
};

// Service de synchronisation
class CustomerSyncService {
  async syncCustomer(customer: Customer) {
    try {
      const externalCustomer = await this.mapToExternalFormat(customer);
      await this.systemAdapter.syncEntity(externalCustomer, 'customer');
      await this.logSync(customer.id);
    } catch (error) {
      await this.handleSyncError(error, customer);
    }
  }

  private async mapToExternalFormat(customer: Customer) {
    return {
      code: customer.id,
      name: customer.name,
      // ... mapping des champs
    };
  }
}

// Interface d'interaction
interface CustomerInteraction {
  id: string;
  customerId: string;
  type: 'email' | 'call' | 'meeting';
  date: Date;
  notes: string;
  userId: string;
}

// Composant d'historique
const InteractionHistory: React.FC<{ customerId: string }> = ({ customerId }) => {
  const { data: interactions } = useQuery(
    ['interactions', customerId],
    () => fetchInteractions(customerId)
  );

  return (
    <Timeline>
      {interactions?.map(interaction => (
        <TimelineItem
          key={interaction.id}
          date={interaction.date}
          type={interaction.type}
          content={interaction.notes}
        />
      ))}
    </Timeline>
  );
};

// Gestionnaire de documents
const DocumentManager: React.FC<{ customerId: string }> = ({ customerId }) => {
  const { documents, upload, delete: deleteDoc } = useDocuments(customerId);

  const handleUpload = async (file: File) => {
    try {
      await upload({
        file,
        metadata: {
          type: file.type,
          size: file.size,
        },
      });
    } catch (error) {
      toast.error('Erreur lors du téléchargement');
    }
  };

  return (
    <div className="document-manager">
      <UploadZone onUpload={handleUpload} />
      <DocumentList
        documents={documents}
        onDelete={deleteDoc}
      />
    </div>
  );
};

// Métriques client
interface CustomerMetrics {
  totalOrders: number;
  totalRevenue: number;
  averageOrderValue: number;
  lastOrderDate: Date;
}

// Composant de métriques
const CustomerDashboard: React.FC<{ customerId: string }> = ({ customerId }) => {
  const { data: metrics } = useQuery(
    ['customer-metrics', customerId],
    () => fetchCustomerMetrics(customerId)
  );

  return (
    <div className="metrics-grid">
      <MetricCard
        title="Total Commandes"
        value={metrics?.totalOrders}
      />
      <MetricCard
        title="Chiffre d'Affaires"
        value={formatCurrency(metrics?.totalRevenue)}
      />
      {/* ... autres métriques */}
    </div>
  );
};

// Configuration des champs
interface CustomField {
  key: string;
  label: string;
  type: 'text' | 'number' | 'date' | 'select';
  options?: string[];
  required?: boolean;
}

// Gestionnaire de champs personnalisés
const CustomFieldsManager: React.FC<{ entity: Customer }> = ({ entity }) => {
  const { fields } = useCustomFields('customer');

  return (
    <div className="custom-fields">
      {fields.map(field => (
        <CustomField
          key={field.key}
          field={field}
          value={entity.metadata[field.key]}
        />
      ))}
    </div>
  );
};