'use client'

import type { Dispatch, FormEvent, SetStateAction } from 'react'
import type { BackendAdminUser } from '@/lib/backend'

export type AdminUserDraft = {
  displayName: string
  phone: string
  wechatId: string
  contactPhone: string
  email: string
  organization: string
  title: string
  city: string
  address: string
  industry: string
  invoiceTitle: string
  taxNumber: string
  invoiceEmail: string
  onboardingCompleted: boolean
  status: NonNullable<BackendAdminUser['status']>
}

export const emptyAdminUserDraft: AdminUserDraft = {
  displayName: '',
  phone: '',
  wechatId: '',
  contactPhone: '',
  email: '',
  organization: '',
  title: '',
  city: '',
  address: '',
  industry: '',
  invoiceTitle: '',
  taxNumber: '',
  invoiceEmail: '',
  onboardingCompleted: true,
  status: 'active',
}

export function draftFromAdminUser(user: BackendAdminUser): AdminUserDraft {
  return {
    displayName: user.displayName || '',
    phone: user.phone || '',
    wechatId: user.wechatId || '',
    contactPhone: user.contactPhone || '',
    email: user.email || '',
    organization: user.organization || '',
    title: user.title || '',
    city: user.city || '',
    address: user.address || '',
    industry: user.industry || '',
    invoiceTitle: user.invoiceTitle || '',
    taxNumber: user.taxNumber || '',
    invoiceEmail: user.invoiceEmail || '',
    onboardingCompleted: user.onboardingCompleted !== false,
    status: user.status || 'active',
  }
}

export function adminUserDraftPayload(draft: AdminUserDraft) {
  return {
    displayName: draft.displayName.trim(),
    phone: draft.phone.trim(),
    wechatId: draft.wechatId.trim(),
    contactPhone: draft.contactPhone.trim(),
    email: draft.email.trim(),
    organization: draft.organization.trim(),
    title: draft.title.trim(),
    city: draft.city.trim(),
    address: draft.address.trim(),
    industry: draft.industry.trim(),
    invoiceTitle: draft.invoiceTitle.trim(),
    taxNumber: draft.taxNumber.trim(),
    invoiceEmail: draft.invoiceEmail.trim(),
    onboardingCompleted: draft.onboardingCompleted,
    status: draft.status,
  }
}

type AdminUserFormProps = {
  draft: AdminUserDraft
  setDraft: Dispatch<SetStateAction<AdminUserDraft>>
  saving?: boolean
  submitLabel: string
  onSubmit: (event: FormEvent<HTMLFormElement>) => void
}

const inputClass = 'h-10 rounded-[4px] border border-line px-3 text-sm outline-none focus:border-brand'

export function AdminUserForm({ draft, setDraft, saving = false, submitLabel, onSubmit }: AdminUserFormProps) {
  return (
    <form className="grid gap-5" onSubmit={onSubmit}>
      <section className="grid gap-3">
        <div className="text-sm font-extrabold text-ink">基础身份</div>
        <div className="grid gap-3 md:grid-cols-2">
          <input value={draft.displayName} onChange={(event) => setDraft((current) => ({ ...current, displayName: event.target.value }))} placeholder="显示名称" className={inputClass} />
          <input value={draft.phone} onChange={(event) => setDraft((current) => ({ ...current, phone: event.target.value }))} placeholder="手机号" className={inputClass} />
          <input value={draft.wechatId} onChange={(event) => setDraft((current) => ({ ...current, wechatId: event.target.value }))} placeholder="微信号" className={inputClass} />
          <input value={draft.contactPhone} onChange={(event) => setDraft((current) => ({ ...current, contactPhone: event.target.value }))} placeholder="联系人电话" className={inputClass} />
          <input value={draft.email} onChange={(event) => setDraft((current) => ({ ...current, email: event.target.value }))} placeholder="邮箱" className={inputClass} />
          <input value={draft.organization} onChange={(event) => setDraft((current) => ({ ...current, organization: event.target.value }))} placeholder="所属机构" className={inputClass} />
          <input value={draft.title} onChange={(event) => setDraft((current) => ({ ...current, title: event.target.value }))} placeholder="职务/头衔" className={inputClass} />
          <input value={draft.city} onChange={(event) => setDraft((current) => ({ ...current, city: event.target.value }))} placeholder="城市" className={inputClass} />
          <input value={draft.industry} onChange={(event) => setDraft((current) => ({ ...current, industry: event.target.value }))} placeholder="行业" className={inputClass} />
          <input value={draft.address} onChange={(event) => setDraft((current) => ({ ...current, address: event.target.value }))} placeholder="详细地址" className={inputClass} />
        </div>
      </section>

      <section className="grid gap-3">
        <div className="text-sm font-extrabold text-ink">发票信息</div>
        <div className="grid gap-3 md:grid-cols-3">
          <input value={draft.invoiceTitle} onChange={(event) => setDraft((current) => ({ ...current, invoiceTitle: event.target.value }))} placeholder="发票抬头" className={inputClass} />
          <input value={draft.taxNumber} onChange={(event) => setDraft((current) => ({ ...current, taxNumber: event.target.value }))} placeholder="税号" className={inputClass} />
          <input value={draft.invoiceEmail} onChange={(event) => setDraft((current) => ({ ...current, invoiceEmail: event.target.value }))} placeholder="收票邮箱" className={inputClass} />
        </div>
      </section>

      <section className="grid gap-3">
        <div className="text-sm font-extrabold text-ink">会员与状态</div>
        <div className="grid gap-3 md:grid-cols-2">
          <div className="flex h-10 items-center rounded-[4px] border border-line bg-bg px-3 text-sm font-bold text-muted">
            会员等级由有效订阅自动计算，请在会员状态页开通、关闭或补录。
          </div>
          <select value={draft.status} onChange={(event) => setDraft((current) => ({ ...current, status: event.target.value as NonNullable<BackendAdminUser['status']> }))} className={`${inputClass} font-bold`}>
            <option value="active">正常</option>
            <option value="disabled">禁用</option>
          </select>
        </div>
        <label className="flex items-center gap-2 text-xs font-bold text-muted">
          <input type="checkbox" checked={draft.onboardingCompleted} onChange={(event) => setDraft((current) => ({ ...current, onboardingCompleted: event.target.checked }))} className="accent-brand" />
          已完成基础资料
        </label>
      </section>

      <button disabled={saving} className="h-11 rounded-[4px] bg-brand px-5 text-sm font-extrabold text-white disabled:opacity-60">
        {saving ? '保存中...' : submitLabel}
      </button>
    </form>
  )
}
