'use client';

import { useState } from 'react';
import { Loader2 } from 'lucide-react';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/lib/utils';

/**
 * 「预约 / 跟进」跳宿主**之前**的快速记录 —— 吸附在按钮上的小浮层。
 *
 * ═══ 为什么要有它 ═══════════════════════════════════════════
 * 这两个按钮跳走之后,客服在宿主那边把事办完就不回来了 —— 这正是
 * `plan_executions` 回写率只有 **11%** 的根源(生产 65 个认领单只有 7 条执行结果)。
 * 回写率低到这个程度,"成功率""退回率"这些数就全是猜的。
 * ⇒ 把一次**必答**的极简输入挪到跳转之前:人还在 PAC 里、手还在键盘上,那一刻才录得到。
 *
 * ⚠️ **先落库、后跳转**。⛔ 反过来的话:写失败了人已经跳走,他会以为记过了,
 *   而这次改动的全部意义就是那条记录。
 * ⚠️ 只收**一个**必填字段。多一个都不行 —— 这是拦在人和他真正想做的事之间的一道门,
 *   门越重,他越会去找绕开的路(而绕开的代价就是又回到 11%)。
 */
export function QuickLogPopover({
  kind,
  disabled,
  children,
  onConfirm,
}: {
  kind: 'appointment' | 'follow_up';
  disabled?: boolean;
  /** 触发器 = 顶栏那颗按钮本体(样式不在这里管) */
  children: React.ReactNode;
  /** 落库 + 跳转。返回 false = 没落库(此时**不要**跳转,浮层保持打开让他重试) */
  onConfirm: (payload: { notes?: string; scheduledNextAt?: string }) => Promise<boolean>;
}) {
  const [open, setOpen] = useState(false);
  const [notes, setNotes] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('10:00');
  const [busy, setBusy] = useState(false);

  const isAppt = kind === 'appointment';
  // ⚠️ 必填校验放在**提交按钮的 disabled** 上,⛔ 不要提交后再报错 ——
  //   浮层只有一个输入框,报错文案会把它撑成两倍高,而人已经知道自己没填。
  const ready = isAppt ? notes.trim().length > 0 : date.length > 0 && time.length > 0;

  const reset = () => {
    setNotes('');
    setDate('');
    setTime('10:00');
  };

  const confirm = async () => {
    if (!ready || busy) return;
    setBusy(true);
    try {
      const ok = await onConfirm(
        isAppt
          ? { notes: notes.trim() }
          : // datetime-local 的形态('2026-08-10T10:00'),由上层统一转 ISO
            { scheduledNextAt: `${date}T${time}` },
      );
      if (ok) {
        setOpen(false);
        reset();
      }
    } finally {
      setBusy(false);
    }
  };

  return (
    <Popover
      open={open}
      onOpenChange={(o) => {
        if (disabled) return;
        setOpen(o);
        if (!o) reset();
      }}
    >
      <PopoverTrigger asChild>{children}</PopoverTrigger>
      <PopoverContent align="end" className="w-64 p-3">
        <div className="space-y-2">
          <div>
            <p className="text-[12.5px] font-medium text-slate-800">
              {isAppt ? '已约到' : '约好下次'}
            </p>
            {/* ⚠️ 后果必须写在这里。「预约」落的是 success_appointed —— 它会**把这单结案**,
                人从「我的」里消失。不写清楚就是让他在不知情的情况下关掉一个工单。 */}
            <p className="mt-0.5 text-[10.5px] leading-snug text-slate-400">
              {isAppt
                ? '记为「转化新预约」并结案,随后打开预约页'
                : '记为「约定下次回访」,工单留到那天再浮现'}
            </p>
          </div>

          {isAppt ? (
            <textarea
              autoFocus
              rows={3}
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="约的什么、什么时候"
              className="w-full resize-none rounded-md border px-2 py-1.5 text-[12.5px] outline-none placeholder:text-slate-300 focus:border-brand-400"
            />
          ) : (
            <div className="flex items-center gap-1.5">
              <input
                autoFocus
                type="date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
                className="min-w-0 flex-1 rounded-md border px-2 py-1.5 text-[12.5px] outline-none focus:border-brand-400"
              />
              <input
                type="time"
                value={time}
                onChange={(e) => setTime(e.target.value)}
                className="w-[86px] flex-none rounded-md border px-2 py-1.5 text-[12.5px] outline-none focus:border-brand-400"
              />
            </div>
          )}

          <div className="flex items-center justify-end gap-1.5 pt-0.5">
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="rounded-md px-2 py-1 text-[11.5px] text-slate-500 hover:bg-slate-50"
            >
              取消
            </button>
            <button
              type="button"
              disabled={!ready || busy}
              onClick={confirm}
              className={cn(
                'inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-[11.5px] font-medium text-white transition-colors',
                ready && !busy ? 'bg-brand-600 hover:bg-brand-700' : 'cursor-not-allowed bg-slate-200',
              )}
            >
              {busy && <Loader2 className="h-3 w-3 animate-spin" />}
              记录并前往
            </button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}
