'use client';

import { useState } from 'react';
import { ABANDON_REASON_META, AbandonReason, abandonReasonsFor } from '@pac/types';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';

/**
 * 关闭机会弹窗 —— 宿主回访模式下(顶栏有「回访」按钮)替代通话结果区的关闭入口。
 *
 * ⭐ 这只是**展示层的一张皮**:落库仍是 outcome='abandoned' + abandon_reasons,
 *   跟 PAC 自带表单同一套机制、同一列。PAC 侧不存在「关闭」这个概念,
 *   分叉只在文案(ABANDON_REASON_META.shownIn='close' 的那几项)。
 *
 * **多选,无上限** —— 真实关闭常是复合原因(如「价格因素 + 选择竞品机构」),
 * 逼客服挑一个主因只会让数据失真。
 */
const CLOSE_REASONS = abandonReasonsFor('close').map((key) => ({
  key,
  ...ABANDON_REASON_META[key],
}));

export type CloseReasonKey = AbandonReason;

export function CloseOpportunityDialog({
  open,
  onOpenChange,
  onConfirm,
}: {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** 确认关闭(原因多选 + 需要说明时的文字)。 */
  onConfirm?: (reasons: CloseReasonKey[], note?: string) => void;
}) {
  const [reasons, setReasons] = useState<CloseReasonKey[]>([]);
  const [note, setNote] = useState('');

  const toggle = (key: CloseReasonKey) =>
    setReasons((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]));

  const selected = CLOSE_REASONS.filter((r) => reasons.includes(r.key));
  // 勾中任一 needNote 项(目前只有「其他」)→ 说明必填
  const needNote = selected.some((r) => r.needNote === true);
  const canConfirm = reasons.length > 0 && (!needNote || note.trim().length > 0);

  const reset = () => {
    setReasons([]);
    setNote('');
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        onOpenChange(v);
        if (!v) reset();
      }}
    >
      <DialogContent className="sm:max-w-[520px]">
        <DialogHeader>
          <DialogTitle className="text-[15px]">关闭机会</DialogTitle>
        </DialogHeader>

        <div className="space-y-3">
          <div className="text-[12.5px] font-medium text-slate-900">
            选择关闭原因(可多选) <span className="text-rose-600">*</span>
          </div>
          {/* 原因多选卡:两列;「其他原因」独占整行 */}
          <div className="grid grid-cols-2 gap-2">
            {CLOSE_REASONS.map((r) => {
              const active = reasons.includes(r.key);
              return (
                <button
                  key={r.key}
                  type="button"
                  onClick={() => toggle(r.key)}
                  className={cn(
                    'flex items-center gap-2 rounded-md border px-3 py-2.5 text-left text-[12.5px] transition-colors',
                    r.key === 'other' && 'col-span-2',
                    active
                      ? 'border-teal-400 bg-teal-50 font-medium text-teal-800'
                      : 'border-slate-200 bg-white text-slate-700 hover:border-teal-300 hover:bg-teal-50/50',
                  )}
                >
                  <span
                    className={cn(
                      'flex h-3.5 w-3.5 flex-none items-center justify-center rounded-[3px] border',
                      active ? 'border-teal-600 bg-teal-600' : 'border-slate-300',
                    )}
                  >
                    {active && (
                      <svg viewBox="0 0 12 12" className="h-2.5 w-2.5 text-white" aria-hidden>
                        <path
                          d="M2.5 6.2l2.3 2.3 4.7-5"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                        />
                      </svg>
                    )}
                  </span>
                  {r.labelZh}
                </button>
              );
            })}
          </div>

          {needNote && (
            <div className="space-y-1.5">
              <div className="text-[12.5px] font-medium text-slate-900">
                请描述具体原因 <span className="text-rose-600">*</span>
              </div>
              <textarea
                value={note}
                onChange={(e) => setNote(e.target.value)}
                rows={3}
                placeholder="请详细描述关闭机会的具体原因,以便后续分析和改进…"
                className="w-full resize-y rounded-md border border-slate-200 bg-white px-3 py-2 text-[12.5px] text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-200 focus:border-teal-400"
              />
            </div>
          )}

          {selected.length > 0 && (
            <div className="rounded-md border border-teal-100 bg-teal-50/60 px-3 py-2">
              <div className="text-[11.5px] font-semibold text-teal-800">
                已选关闭原因 · {selected.length} 项
              </div>
              <ul className="mt-0.5 space-y-0.5">
                {selected.map((r) => (
                  <li key={r.key} className="text-[12px] text-slate-700">
                    {r.labelZh} · {r.desc}
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        <DialogFooter>
          <Button variant="outline" size="sm" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button
            size="sm"
            disabled={!canConfirm}
            onClick={() => {
              if (reasons.length === 0) return;
              onConfirm?.(reasons, note.trim() ? note.trim() : undefined);
              onOpenChange(false);
              reset();
            }}
          >
            确认关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
