pn-new-crm/src/components/clients/client-detail-header.tsx

'use client';

import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { Archive, Bell, Mail, Phone, RotateCcw, Trash2 } from 'lucide-react';
import { WhatsAppIcon } from '@/components/icons/whatsapp';
import { format } from 'date-fns';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { TagBadge } from '@/components/shared/tag-badge';
import { PermissionGate } from '@/components/shared/permission-gate';
import { SmartArchiveDialog } from '@/components/clients/smart-archive-dialog';
import { SmartRestoreDialog } from '@/components/clients/smart-restore-dialog';
import { HardDeleteDialog } from '@/components/clients/hard-delete-dialog';
import { ReminderForm } from '@/components/reminders/reminder-form';
import { useQueryClient } from '@tanstack/react-query';
import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
import { CountryFlag } from '@/components/shared/country-flag';
import { PortalInviteButton } from '@/components/clients/portal-invite-button';
import { GdprExportButton } from '@/components/clients/gdpr-export-button';
import { cn } from '@/lib/utils';
import { getCountryName } from '@/lib/i18n/countries';

interface ClientDetailHeaderProps {
  client: {
    id: string;
    fullName: string;
    nationalityIso?: string | null;
    archivedAt?: string | null;
    createdAt?: string;
    contacts?: Array<{
      channel: string;
      value: string;
      valueE164?: string | null;
      isPrimary: boolean;
      label?: string | null;
    }>;
    tags?: Array<{ id: string; name: string; color: string }>;
    clientPortalEnabled?: boolean;
  };
}

export function ClientDetailHeader({ client }: ClientDetailHeaderProps) {
  const router = useRouter();
  const [archiveOpen, setArchiveOpen] = useState(false);
  const [hardDeleteOpen, setHardDeleteOpen] = useState(false);
  const [reminderOpen, setReminderOpen] = useState(false);
  const qc = useQueryClient();

  const isArchived = !!client.archivedAt;

  const primaryEmail =
    client.contacts?.find((c) => c.channel === 'email' && c.isPrimary)?.value ??
    client.contacts?.find((c) => c.channel === 'email')?.value;
  const primaryPhoneContact =
    client.contacts?.find((c) => c.channel === 'phone' && c.isPrimary) ??
    client.contacts?.find((c) => c.channel === 'phone');
  const primaryPhone = primaryPhoneContact?.value;
  // wa.me requires the E.164 number without the leading "+". Strip from the
  // canonical E.164 form when available; otherwise strip non-digits from the
  // display value as a best-effort fallback.
  const whatsappNumber = primaryPhoneContact?.valueE164
    ? primaryPhoneContact.valueE164.replace(/^\+/, '')
    : primaryPhoneContact?.value
      ? primaryPhoneContact.value.replace(/[^\d]/g, '')
      : null;

  const country = client.nationalityIso ? getCountryName(client.nationalityIso, 'en') : null;
  const addedLabel = client.createdAt
    ? `Added ${format(new Date(client.createdAt), 'MMM d, yyyy')}`
    : null;

  return (
    <>
      <DetailHeaderStrip>
        <div className="flex items-start gap-3">
          <div className="min-w-0 flex-1 space-y-2">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="truncate text-lg font-bold text-foreground sm:text-2xl">
                {client.fullName}
              </h1>
              {isArchived && (
                <Badge variant="secondary" className="text-xs">
                  Archived
                </Badge>
              )}
            </div>

            {country || addedLabel ? (
              <p className="flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground sm:text-sm">
                {country ? (
                  <span className="inline-flex items-center gap-1.5">
                    <CountryFlag
                      code={client.nationalityIso}
                      className="h-3 w-4 sm:h-3.5 sm:w-5"
                      decorative
                    />
                    <span>{country}</span>
                  </span>
                ) : null}
                {country && addedLabel ? <span aria-hidden>·</span> : null}
                {addedLabel ? <span>{addedLabel}</span> : null}
              </p>
            ) : null}

            <div className="flex flex-wrap items-center gap-1.5 pt-1">
              {primaryEmail ? (
                <Button
                  asChild
                  variant="outline"
                  size="sm"
                  className="h-8 gap-1.5 px-2.5 [&_svg]:size-3.5"
                >
                  <a href={`mailto:${primaryEmail}`} aria-label={`Email ${primaryEmail}`}>
                    <Mail />
                    Email
                  </a>
                </Button>
              ) : null}
              {primaryPhone ? (
                <Button
                  asChild
                  variant="outline"
                  size="sm"
                  className="h-8 gap-1.5 px-2.5 [&_svg]:size-3.5"
                >
                  <a href={`tel:${primaryPhone}`} aria-label={`Call ${primaryPhone}`}>
                    <Phone />
                    Call
                  </a>
                </Button>
              ) : null}
              {whatsappNumber ? (
                <Button
                  asChild
                  variant="outline"
                  size="sm"
                  className="h-8 gap-1.5 px-2.5 [&_svg]:size-3.5"
                >
                  <a
                    href={`https://wa.me/${whatsappNumber}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={`Message ${primaryPhone} on WhatsApp`}
                  >
                    <WhatsAppIcon className="h-4 w-4" />
                    WhatsApp
                  </a>
                </Button>
              ) : null}
              {!isArchived && client.clientPortalEnabled === true ? (
                <div className="hidden sm:inline-flex">
                  <PortalInviteButton
                    clientId={client.id}
                    clientName={client.fullName}
                    defaultEmail={primaryEmail}
                  />
                </div>
              ) : null}
              <div className="hidden sm:inline-flex">
                <GdprExportButton clientId={client.id} />
              </div>
            </div>

            {client.tags && client.tags.length > 0 && (
              <div className="flex flex-wrap gap-1">
                {client.tags.map((tag) => (
                  <TagBadge key={tag.id} name={tag.name} color={tag.color} />
                ))}
              </div>
            )}
          </div>

          {/* Top-right: archive/restore + (for archived clients with the
              right perm) permanently-delete. Destructive actions sit out
              of the primary action flow. */}
          <div className="flex items-start gap-1">
            {isArchived && (
              <PermissionGate resource="admin" action="permanently_delete_clients">
                <button
                  type="button"
                  onClick={() => setHardDeleteOpen(true)}
                  aria-label="Permanently delete client"
                  title="Permanently delete client"
                  className="shrink-0 rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-destructive/10 hover:text-destructive"
                >
                  <Trash2 className="size-4" aria-hidden />
                </button>
              </PermissionGate>
            )}
            <button
              type="button"
              onClick={() => setReminderOpen(true)}
              aria-label="Add reminder for this client"
              title="Add reminder for this client"
              className="shrink-0 rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-foreground/5 hover:text-primary"
            >
              <Bell className="size-4" aria-hidden />
            </button>
            <button
              type="button"
              onClick={() => setArchiveOpen(true)}
              aria-label={isArchived ? 'Restore client' : 'Archive client'}
              title={isArchived ? 'Restore client' : 'Archive client'}
              className={cn(
                'shrink-0 rounded-md p-1.5 text-muted-foreground/70 transition-colors',
                'hover:bg-foreground/5',
                isArchived ? 'hover:text-emerald-600' : 'hover:text-destructive',
              )}
            >
              {isArchived ? (
                <RotateCcw className="size-4" aria-hidden />
              ) : (
                <Archive className="size-4" aria-hidden />
              )}
            </button>
          </div>
        </div>
      </DetailHeaderStrip>

      <ReminderForm
        open={reminderOpen}
        onOpenChange={setReminderOpen}
        defaultClientId={client.id}
        onSuccess={() => qc.invalidateQueries({ queryKey: ['reminders'] })}
      />

      {isArchived ? (
        <SmartRestoreDialog
          open={archiveOpen}
          onOpenChange={setArchiveOpen}
          clientId={client.id}
          clientName={client.fullName}
        />
      ) : (
        <SmartArchiveDialog
          open={archiveOpen}
          onOpenChange={setArchiveOpen}
          clientId={client.id}
          clientName={client.fullName}
        />
      )}

      {isArchived && (
        <HardDeleteDialog
          open={hardDeleteOpen}
          onOpenChange={setHardDeleteOpen}
          clientId={client.id}
          clientName={client.fullName}
          onDeleted={() => router.back()}
        />
      )}
    </>
  );
}