pn-new-crm/src/components/companies/company-detail-header.tsx

'use client';

import { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { Pencil, Archive } from 'lucide-react';
import { toast } from 'sonner';

import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
import { PermissionGate } from '@/components/shared/permission-gate';
import { CompanyForm } from '@/components/companies/company-form';
import { apiFetch } from '@/lib/api/client';
import { toastError } from '@/lib/api/toast-error';

interface CompanyDetailHeaderCompany {
  id: string;
  name: string;
  legalName: string | null;
  taxId: string | null;
  registrationNumber: string | null;
  incorporationCountryIso: string | null;
  incorporationSubdivisionIso: string | null;
  incorporationDate: string | null;
  status: string;
  billingEmail: string | null;
  notes: string | null;
  archivedAt: string | null;
}

interface CompanyDetailHeaderProps {
  company: CompanyDetailHeaderCompany;
}

const STATUS_COLORS: Record<string, string> = {
  active: 'bg-green-100 text-green-800 border-green-300',
  dissolved: 'bg-red-100 text-red-800 border-red-300',
};

const STATUS_LABELS: Record<string, string> = {
  active: 'Active',
  dissolved: 'Dissolved',
};

export function CompanyDetailHeader({ company }: CompanyDetailHeaderProps) {
  const queryClient = useQueryClient();
  const router = useRouter();
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';

  const [editOpen, setEditOpen] = useState(false);
  const [archiveOpen, setArchiveOpen] = useState(false);

  const isArchived = !!company.archivedAt;
  const showLegalName = company.legalName && company.legalName !== company.name;

  const archiveMutation = useMutation({
    mutationFn: () => apiFetch(`/api/v1/companies/${company.id}`, { method: 'DELETE' }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['companies', company.id] });
      queryClient.invalidateQueries({ queryKey: ['companies'] });
      toast.success('Company archived');
      setArchiveOpen(false);
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      router.push(`/${portSlug}/companies` as any);
    },
    onError: (err: Error) => {
      toastError(err);
    },
  });

  const statusLabel = STATUS_LABELS[company.status] ?? company.status;
  const statusColor =
    STATUS_COLORS[company.status] ?? 'bg-muted text-muted-foreground border-muted';

  return (
    <>
      <DetailHeaderStrip>
        {/* Stack actions below the title block on phone widths; horizontal
            beside it from sm up. */}
        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:flex-wrap sm:gap-3">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 flex-wrap">
              <h1 className="hidden sm:block text-2xl font-bold text-foreground truncate">
                {company.name}
              </h1>
              <span
                className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusColor}`}
              >
                {statusLabel}
              </span>
              {isArchived && (
                <Badge variant="secondary" className="text-xs">
                  Archived
                </Badge>
              )}
            </div>

            <div className="mt-1 space-y-0.5 text-sm text-muted-foreground">
              {showLegalName && <p>{company.legalName}</p>}
              {company.taxId && <p>Tax ID: {company.taxId}</p>}
            </div>
          </div>

          {/* Actions */}
          <div className="flex flex-wrap items-center gap-2">
            <PermissionGate resource="companies" action="edit">
              <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
                <Pencil className="mr-1.5 h-3.5 w-3.5" aria-hidden />
                Edit
              </Button>
            </PermissionGate>
            <PermissionGate resource="companies" action="delete">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setArchiveOpen(true)}
                disabled={isArchived}
              >
                <Archive className="mr-1.5 h-3.5 w-3.5" aria-hidden />
                Archive
              </Button>
            </PermissionGate>
          </div>
        </div>
      </DetailHeaderStrip>

      <CompanyForm
        open={editOpen}
        onOpenChange={setEditOpen}
        company={{
          id: company.id,
          name: company.name,
          legalName: company.legalName,
          taxId: company.taxId,
          registrationNumber: company.registrationNumber,
          incorporationCountryIso: company.incorporationCountryIso,
          incorporationSubdivisionIso: company.incorporationSubdivisionIso,
          incorporationDate: company.incorporationDate,
          status: company.status,
          billingEmail: company.billingEmail,
          notes: company.notes,
        }}
      />

      <ArchiveConfirmDialog
        open={archiveOpen}
        onOpenChange={setArchiveOpen}
        entityName={company.name}
        entityType="Company"
        isArchived={isArchived}
        onConfirm={() => {
          archiveMutation.mutate();
        }}
        isLoading={archiveMutation.isPending}
      />
    </>
  );
}