'use client';

import { Home } from 'lucide-react';

import { Badge } from '@/components/ui/badge';
import { DetailHeaderStrip } from '@/components/shared/detail-header-strip';
import { InlineEditableField } from '@/components/shared/inline-editable-field';

interface Props {
  client: {
    id: string;
    fullName: string;
    status: string;
    placeOfResidence: string | null;
  };
  onSaveName: (next: string | null) => Promise<void>;
}

const STATUS_TONE: Record<string, string> = {
  prospect: 'bg-blue-100 text-blue-900',
  active: 'bg-emerald-100 text-emerald-900',
  inactive: 'bg-muted text-muted-foreground',
};

const STATUS_LABEL: Record<string, string> = {
  prospect: 'Prospect',
  active: 'Active',
  inactive: 'Inactive',
};

export function ResidentialClientDetailHeader({ client, onSaveName }: Props) {
  return (
    <DetailHeaderStrip>
      <div className="space-y-1">
        <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground inline-flex items-center gap-1.5">
          <Home className="h-3 w-3" /> Residential client
        </div>
        <h1 className="truncate text-2xl font-bold tracking-tight text-foreground">
          <InlineEditableField value={client.fullName} onSave={onSaveName} />
        </h1>
        <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
          <Badge className={STATUS_TONE[client.status] ?? 'bg-muted'}>
            {STATUS_LABEL[client.status] ?? client.status}
          </Badge>
          {client.placeOfResidence && <span>{client.placeOfResidence}</span>}
        </div>
      </div>
    </DetailHeaderStrip>
  );
}
