booschat/web/app/dashboard/tickets/_components/ticket-customer-panel.tsx

"use client"

import {
  Building2Icon,
  Link2Icon,
  MailIcon,
  PencilIcon,
  PhoneIcon,
  UserRoundIcon,
} from "lucide-react"
import { useCallback, useEffect, useState } from "react"
import { toast } from "sonner"

import { type CustomerFormSavePayload } from "@/components/customer-form"
import { CustomerFormDialog } from "@/components/customer-form-dialog"
import { CustomerLinkOrCreateDialog } from "@/components/customer-link-or-create-dialog"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { updateCompany, type AdminCompany } from "@/lib/api/company"
import {
  fetchCustomer,
  saveCustomerProfile,
  type AdminCustomer,
} from "@/lib/api/customer"
import {
  fetchCustomerContacts,
  type AdminCustomerContact,
} from "@/lib/api/customer-contact"
import { Gender, GenderLabels, ContactType, ContactTypeLabels } from "@/lib/generated/enums"
import { cn, formatDateTime } from "@/lib/utils"

function contactTypeLabel(contactType: ContactType | string) {
  return ContactTypeLabels[contactType as ContactType] ?? contactType
}

function ContactTypeIcon({ contactType }: { contactType: ContactType | string }) {
  const cls = "size-3.5 shrink-0 text-muted-foreground"
  switch (contactType) {
    case ContactType.Mobile:
      return <PhoneIcon className={cls} aria-hidden />
    case ContactType.Email:
      return <MailIcon className={cls} aria-hidden />
    default:
      return <Link2Icon className={cls} aria-hidden />
  }
}

function DetailRow({
  label,
  value,
  valueClassName,
}: {
  label: string
  value: string
  valueClassName?: string
}) {
  const empty = !value.trim()
  return (
    <div className="flex gap-2.5 text-sm leading-snug">
      <span className="w-17 shrink-0 pt-px text-xs text-muted-foreground">{label}</span>
      <span
        className={cn(
          "min-w-0 flex-1 break-all text-foreground",
          empty && "text-muted-foreground",
          valueClassName,
        )}
      >
        {empty ? "—" : value}
      </span>
    </div>
  )
}

function SectionHeading({
  children,
  action,
}: {
  children: React.ReactNode
  action?: React.ReactNode
}) {
  return (
    <div className="flex items-center justify-between gap-2">
      <h3 className="text-xs font-medium text-muted-foreground">{children}</h3>
      {action}
    </div>
  )
}

function UnlinkedCustomerEmpty({
  ticketId,
  onSuccess,
}: {
  ticketId: number
  onSuccess: () => void | Promise<void>
}) {
  const [linkDialogOpen, setLinkDialogOpen] = useState(false)

  return (
    <div className="space-y-4 pt-2">
      <div className="flex flex-col items-center justify-center rounded-xl bg-muted/35 px-4 py-8 text-center">
        <UserRoundIcon className="mb-2 size-10 text-muted-foreground" aria-hidden />
        <p className="text-sm font-medium text-foreground">尚未关联 CRM 客户</p>
        <p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
          当前工单未绑定客户主档。绑定后可在此查看客户资料、公司信息与联系方式。
        </p>
        <Button type="button" className="mt-4 gap-2" onClick={() => setLinkDialogOpen(true)}>
          <Link2Icon className="size-4" />
          关联或创建客户
        </Button>
      </div>
      <CustomerLinkOrCreateDialog
        open={linkDialogOpen}
        onOpenChange={setLinkDialogOpen}
        ticketId={ticketId}
        onSuccess={onSuccess}
      />
    </div>
  )
}

function MissingCustomerEmpty({
  ticketId,
  onSuccess,
}: {
  ticketId: number
  onSuccess: () => void | Promise<void>
}) {
  const [linkDialogOpen, setLinkDialogOpen] = useState(false)

  return (
    <div className="space-y-4 pt-2">
      <div className="flex flex-col items-center justify-center rounded-xl bg-muted/35 px-4 py-8 text-center">
        <UserRoundIcon className="mb-2 size-10 text-muted-foreground" aria-hidden />
        <p className="text-sm font-medium text-foreground">客户已删除或不存在</p>
        <p className="mt-1 max-w-xs text-xs leading-relaxed text-muted-foreground">
          当前工单绑定的客户主档已不可用。你可以重新关联已有客户，或直接新建一个客户并绑定到当前工单。
        </p>
        <Button type="button" className="mt-4 gap-2" onClick={() => setLinkDialogOpen(true)}>
          <Link2Icon className="size-4" />
          重新关联或创建客户
        </Button>
      </div>
      <CustomerLinkOrCreateDialog
        open={linkDialogOpen}
        onOpenChange={setLinkDialogOpen}
        ticketId={ticketId}
        onSuccess={onSuccess}
      />
    </div>
  )
}

type TicketCustomerPanelProps = {
  ticketId: number
  customerId?: number
  onRefresh: () => void | Promise<void>
}

type TicketLinkedCustomerPanelProps = {
  ticketId: number
  customerId: number
  onRefresh: () => void | Promise<void>
}

export function TicketCustomerPanel({
  ticketId,
  customerId = 0,
  onRefresh,
}: TicketCustomerPanelProps) {
  if (customerId <= 0) {
    return <UnlinkedCustomerEmpty ticketId={ticketId} onSuccess={onRefresh} />
  }
  return (
    <TicketLinkedCustomerPanel
      ticketId={ticketId}
      customerId={customerId}
      onRefresh={onRefresh}
    />
  )
}

function TicketLinkedCustomerPanel({
  ticketId,
  customerId,
  onRefresh,
}: TicketLinkedCustomerPanelProps) {
  const linkedCustomerId = customerId
  const [loading, setLoading] = useState(true)
  const [customer, setCustomer] = useState<AdminCustomer | null>(null)
  const [contacts, setContacts] = useState<AdminCustomerContact[]>([])

  const [customerEditOpen, setCustomerEditOpen] = useState(false)
  const [customerEditSaving, setCustomerEditSaving] = useState(false)
  const [companyEditOpen, setCompanyEditOpen] = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const c = await fetchCustomer(linkedCustomerId)
      setCustomer(c)
      if (!c) {
        setContacts([])
        return
      }
      const list = await fetchCustomerContacts(linkedCustomerId)
      setContacts(Array.isArray(list) ? list : [])
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "加载客户信息失败")
      setCustomer(null)
      setContacts([])
    } finally {
      setLoading(false)
    }
  }, [linkedCustomerId])

  useEffect(() => {
    void load()
  }, [load])

  if (loading && !customer) {
    return <p className="pt-4 text-sm text-muted-foreground">加载客户信息…</p>
  }

  if (!customer) {
    return <MissingCustomerEmpty ticketId={ticketId} onSuccess={onRefresh} />
  }

  const displayName = customer.name.trim() || "未填写姓名"
  const company = customer.company ?? null
  const genderLabel =
    customer.gender === Gender.Male || customer.gender === Gender.Female
      ? GenderLabels[customer.gender as Gender] ?? String(customer.gender)
      : null
  const isProfileEmpty =
    !customer.name.trim() &&
    !customer.primaryMobile.trim() &&
    !customer.primaryEmail.trim() &&
    customer.companyId === 0 &&
    !customer.remark.trim()

  return (
    <div className="space-y-4 pt-2">
      {isProfileEmpty ? (
        <div className="rounded-lg bg-amber-500/10 px-3 py-2.5 text-xs leading-relaxed text-amber-950 dark:text-amber-100">
          客户主档已关联，但基础信息尚未填写。请点击「编辑」补全资料。
        </div>
      ) : null}

      <section className="space-y-2">
        <SectionHeading
          action={
            <Button
              type="button"
              variant="ghost"
              size="sm"
              className="h-7 shrink-0 gap-1 px-2 text-xs"
              onClick={() => setCustomerEditOpen(true)}
            >
              <PencilIcon className="size-3.5" />
              编辑
            </Button>
          }
        >
          客户信息
        </SectionHeading>
        <div className="flex min-w-0 items-start gap-2 text-sm">
          <UserRoundIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />
          <div className="min-w-0 flex-1 space-y-0.5">
            <p className="line-clamp-2 leading-snug text-foreground">
              <span className="font-medium">{displayName}</span>
              {genderLabel ? (
                <span className="font-normal text-muted-foreground"> · {genderLabel}</span>
              ) : null}
            </p>
          </div>
        </div>
        <div className="space-y-2">
          <DetailRow label="手机" value={customer.primaryMobile || ""} />
          <DetailRow label="邮箱" value={customer.primaryEmail || ""} />
          <DetailRow
            label="最近活跃"
            value={customer.lastActiveAt ? formatDateTime(customer.lastActiveAt) : ""}
          />
          <DetailRow
            label="备注"
            value={customer.remark.trim() ? customer.remark : ""}
            valueClassName="whitespace-pre-wrap"
          />
        </div>
      </section>

      <section className="space-y-2">
        <SectionHeading>联系方式</SectionHeading>
        {contacts.length === 0 ? (
          <p className="text-sm text-muted-foreground">暂无联系方式</p>
        ) : (
          <ul className="space-y-3">
            {contacts.map((row) => {
              const tags: string[] = []
              if (row.isPrimary) tags.push("主")
              if (row.isVerified) tags.push("已验证")
              return (
                <li key={row.id} className="text-sm">
                  <div className="flex items-center gap-2">
                    <ContactTypeIcon contactType={row.contactType} />
                    <div className="min-w-0 flex-1">
                      <p className="break-all font-medium leading-snug text-foreground">
                        {row.contactValue}
                        <span className="ml-2 text-xs font-normal text-muted-foreground">
                          {contactTypeLabel(row.contactType)}
                        </span>
                        {tags.length > 0 ? (
                          <span className="ml-2 text-xs text-muted-foreground">
                            {tags.join(" · ")}
                          </span>
                        ) : null}
                      </p>
                      {row.remark ? (
                        <p className="mt-1 line-clamp-3 break-all text-xs leading-relaxed text-muted-foreground">
                          {row.remark}
                        </p>
                      ) : null}
                    </div>
                  </div>
                </li>
              )
            })}
          </ul>
        )}
      </section>

      <section className="space-y-2 border-t pt-2">
        <SectionHeading
          action={
            company ? (
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="h-7 shrink-0 gap-1 px-2 text-xs"
                onClick={() => setCompanyEditOpen(true)}
              >
                <PencilIcon className="size-3.5" />
                编辑
              </Button>
            ) : null
          }
        >
          公司信息
        </SectionHeading>
        {company ? (
          <div className="space-y-2">
            <div className="flex min-w-0 items-start gap-2 text-sm">
              <Building2Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden />
              <div className="min-w-0 flex-1 space-y-0.5">
                <p className="line-clamp-2 font-medium leading-snug text-foreground">
                  {company.name}
                </p>
                {company.code ? (
                  <p className="font-mono text-xs text-muted-foreground">{company.code}</p>
                ) : null}
              </div>
            </div>
            <div className="space-y-2 pt-1">
              <DetailRow label="创建" value={formatDateTime(company.createdAt)} />
              <DetailRow label="更新" value={formatDateTime(company.updatedAt)} />
              <DetailRow
                label="备注"
                value={company.remark.trim() ? company.remark : ""}
                valueClassName="whitespace-pre-wrap"
              />
            </div>
          </div>
        ) : (
          <p className="text-sm text-muted-foreground">
            未关联公司。可通过编辑客户资料补充公司信息。
          </p>
        )}
      </section>

      <CustomerFormDialog
        open={customerEditOpen}
        onOpenChange={setCustomerEditOpen}
        saving={customerEditSaving}
        itemId={customer.id}
        onSave={async (payload: CustomerFormSavePayload) => {
          if (customerEditSaving) {
            return
          }
          setCustomerEditSaving(true)
          try {
            await saveCustomerProfile({ ...payload, id: customer.id })
            toast.success("已保存")
            await load()
            await onRefresh()
            setCustomerEditOpen(false)
          } catch (error) {
            toast.error(error instanceof Error ? error.message : "保存失败")
          } finally {
            setCustomerEditSaving(false)
          }
        }}
      />
      {company ? (
        <CompanyEditDialog
          open={companyEditOpen}
          onOpenChange={setCompanyEditOpen}
          company={company}
          onSaved={async () => {
            await load()
            await onRefresh()
          }}
        />
      ) : null}
    </div>
  )
}

type CompanyEditDialogProps = {
  open: boolean
  onOpenChange: (open: boolean) => void
  company: AdminCompany
  onSaved: () => void | Promise<void>
}

function CompanyEditDialog({
  open,
  onOpenChange,
  company,
  onSaved,
}: CompanyEditDialogProps) {
  const [name, setName] = useState("")
  const [code, setCode] = useState("")
  const [remark, setRemark] = useState("")
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    if (!open) {
      return
    }
    setName(company.name)
    setCode(company.code)
    setRemark(company.remark)
  }, [open, company])

  const handleSubmit = async () => {
    const trimmedName = name.trim()
    if (!trimmedName) {
      toast.error("公司名称不能为空")
      return
    }
    setSaving(true)
    try {
      await updateCompany({
        id: company.id,
        name: trimmedName,
        code: code.trim(),
        remark: remark.trim(),
      })
      toast.success("已保存")
      await onSaved()
      onOpenChange(false)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "保存失败")
    } finally {
      setSaving(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md" showCloseButton>
        <DialogHeader>
          <DialogTitle>编辑公司</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-4 py-1">
          <Field orientation="vertical">
            <FieldLabel htmlFor="ticket-company-name">公司名称</FieldLabel>
            <FieldContent>
              <Input
                id="ticket-company-name"
                value={name}
                onChange={(event) => setName(event.target.value)}
              />
            </FieldContent>
          </Field>
          <Field orientation="vertical">
            <FieldLabel htmlFor="ticket-company-code">公司编码</FieldLabel>
            <FieldContent>
              <Input
                id="ticket-company-code"
                value={code}
                onChange={(event) => setCode(event.target.value)}
              />
            </FieldContent>
          </Field>
          <Field orientation="vertical">
            <FieldLabel htmlFor="ticket-company-remark">备注</FieldLabel>
            <FieldContent>
              <Textarea
                id="ticket-company-remark"
                value={remark}
                onChange={(event) => setRemark(event.target.value)}
                rows={3}
              />
            </FieldContent>
          </Field>
        </div>
        <DialogFooter>
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button type="button" disabled={saving} onClick={() => void handleSubmit()}>
            {saving ? "保存中…" : "保存"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}