import { useEffect, useMemo, useRef, useState } from 'react';
import * as api from '../api/client';
import type {
  CalendarEvent,
  CalendarEventInput,
  CalendarAttachment,
  Recurrence,
  DeliveryMode
} from '../types';
import AddressInput from './AddressInput';
import {
  toLocalInput,
  fromLocalInput,
  renderReminder,
  describeRemindBefore
} from '../lib/calendar';
import {
  upcomingOccurrences,
  formatSolarWithLunar,
  isLunarRecurrence,
  describeRecurrenceRule
} from '../lib/lunar';
import {
  CloseIcon,
  SpinnerIcon,
  TrashIcon,
  BellIcon,
  RepeatIcon,
  PaperclipIcon,
  FileIcon,
  PlusIcon,
  UsersIcon,
  BotIcon
} from './icons';

/**
 * 事件编辑器（新建 / 编辑共用）。
 *
 * 参照 Outlook 的编辑面板：时间与重复在上、收件方居中、提醒正文在下。
 * 提醒正文可编辑且带 `{title}` `{time}` `{description}` 变量 —— 预览实时渲染，
 * 因为「模板里写了什么」和「Agent 收到什么」不是一个东西，
 * 不给预览的话人只能发一次试试看。
 */

/** 提前提醒的预设档位。手打分钟数容易写出档位外的值，但也允许。 */
const PRESETS = [0, 5, 15, 30, 60, 120, 1440];

const DEFAULT_TEMPLATE = '日程提醒：{title}\n时间：{time}\n{description}';

/** 重复规则选项。农历单独一组：它们的公历日期每次都在漂移。 */
const RECURRENCE_GROUPS: { label: string; items: { value: Recurrence; label: string }[] }[] = [
  {
    label: '公历',
    items: [
      { value: 'none', label: '不重复' },
      { value: 'daily', label: '每天' },
      { value: 'weekly', label: '每周' },
      { value: 'monthly', label: '每月（同一日）' },
      { value: 'yearly', label: '每年（同月日）' }
    ]
  },
  {
    label: '农历',
    items: [
      { value: 'lunar_monthly', label: '每农历月（同一日，如每月十五）' },
      { value: 'lunar_yearly', label: '每农历年（同月日，如农历生日）' }
    ]
  }
];

export default function CalendarEventEditor({
  event,
  initialTime,
  onClose,
  onSaved
}: {
  /** 有值 = 编辑，无值 = 新建 */
  event?: CalendarEvent | null;
  /** 新建时的预填时间（点空白格子建事件） */
  initialTime?: Date;
  onClose: () => void;
  onSaved: () => void;
}) {
  const editing = !!event;

  const [title, setTitle] = useState(event?.title ?? '');
  const [description, setDescription] = useState(event?.description ?? '');
  const [reminderText, setReminderText] = useState(event?.reminder_text ?? '');

  /**
   * 收件人列表。
   *
   * 初值兼容旧数据：recipients 为空时退回 to_address / agent_name ——
   * 与后端 EffectiveRecipients() 同一条兜底链。不做这个归一化的话，
   * 编辑一条老事件再保存会把它的收件人清空（列表是空的，保存就覆盖了）。
   */
  const [recipients, setRecipients] = useState<string[]>(() => {
    if (event?.recipients?.length) return event.recipients;
    const legacy = (event?.to_address || event?.agent_name || '').trim();
    return legacy ? [legacy] : [];
  });
  const [draftAddr, setDraftAddr] = useState('');
  const [deliveryMode, setDeliveryMode] = useState<DeliveryMode>(
    event?.delivery_mode === 'together' ? 'together' : 'separate'
  );

  const [eventTime, setEventTime] = useState(() => {
    if (event?.event_time) return toLocalInput(new Date(event.event_time));
    if (initialTime) return toLocalInput(initialTime);
    // 默认下一个整点：现在这一刻当默认值几乎总要改
    const d = new Date();
    d.setHours(d.getHours() + 1, 0, 0, 0);
    return toLocalInput(d);
  });
  const [remindBefore, setRemindBefore] = useState(event?.remind_before ?? 0);
  const [recurrence, setRecurrence] = useState<Recurrence>(event?.recurrence ?? 'none');
  const [recurrenceEnd, setRecurrenceEnd] = useState(
    event?.recurrence_end ? toLocalInput(new Date(event.recurrence_end)) : ''
  );
  const [status, setStatus] = useState<CalendarEvent['status']>(event?.status ?? 'active');

  const [agents, setAgents] = useState<string[]>([]);
  const [atts, setAtts] = useState<CalendarAttachment[]>([]);
  const [uploading, setUploading] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [err, setErr] = useState('');
  const [confirmDelete, setConfirmDelete] = useState(false);

  // Agent 列表用于快捷添加。拉不到不算错 —— 地址仍可手输（三段式补全独立工作）。
  useEffect(() => {
    api
      .listAgents()
      .then(r => setAgents((r.agents ?? []).map(a => a.agent_name)))
      .catch(() => setAgents([]));
  }, []);

  // 附件只在编辑既有事件时才有：新建时还没有 event_id 可挂
  useEffect(() => {
    if (!event?.event_id) return;
    api
      .listCalendarAttachments(event.event_id)
      .then(r => setAtts(r.attachments ?? []))
      .catch(() => setAtts([]));
  }, [event?.event_id]);

  function addRecipient(addr: string) {
    const v = addr.trim();
    if (!v) return;
    // 去重：together 模式下同一个 Agent 既主收又抄送会收到两条 SSE，
    // 插件可能因此起两轮
    if (recipients.includes(v)) {
      setDraftAddr('');
      return;
    }
    setRecipients(prev => [...prev, v]);
    setDraftAddr('');
  }

  function removeRecipient(addr: string) {
    setRecipients(prev => prev.filter(x => x !== addr));
  }

  /** 上移一位。together 模式下第一个是主收件人，顺序有语义。 */
  function moveUp(i: number) {
    if (i <= 0) return;
    setRecipients(prev => {
      const next = [...prev];
      [next[i - 1], next[i]] = [next[i], next[i - 1]];
      return next;
    });
  }

  const preview = useMemo(() => {
    const tpl = reminderText.trim() || DEFAULT_TEMPLATE;
    return renderReminder(tpl, {
      title: title || '(未填标题)',
      description,
      event_time: fromLocalInput(eventTime) || new Date().toISOString()
    });
  }, [reminderText, title, description, eventTime]);

  /**
   * 接下来三次触发。
   *
   * 农历规则必须给这个预览：规则名（「每农历月廿二」）看不出公历日子，
   * 而公历日子每次都在变 —— 不预览的话人要等一个月才知道理解对没对。
   */
  const upcoming = useMemo(() => {
    if (recurrence === 'none') return [];
    const iso = fromLocalInput(eventTime);
    if (!iso) return [];
    return upcomingOccurrences(recurrence, new Date(iso), 3);
  }, [recurrence, eventTime]);

  async function addFiles(files: FileList | null) {
    if (!files?.length || !event?.event_id) return;
    setUploading(true);
    setErr('');
    try {
      // 逐个传而非并发：并发失败时分不清是哪个文件的问题
      for (const f of Array.from(files)) {
        const a = await api.uploadCalendarAttachment(event.event_id, f);
        setAtts(prev => [...prev, a]);
      }
    } catch (e: any) {
      setErr(e?.message || '上传失败');
    } finally {
      setUploading(false);
      if (fileRef.current) fileRef.current.value = '';
    }
  }

  async function dropAttachment(id: string) {
    try {
      await api.deleteCalendarAttachment(id);
      setAtts(prev => prev.filter(a => a.attachment_id !== id));
    } catch (e: any) {
      setErr(e?.message || '删除附件失败');
    }
  }

  // 收件人为空时不能保存：事件永远发不出去，后端也会 400。
  // 在这里就禁用按钮比让人点了再看报错好。
  const canSave = title.trim() !== '' && eventTime !== '' && recipients.length > 0 && !saving;

  async function save() {
    if (!canSave) return;
    setErr('');
    setSaving(true);
    const iso = fromLocalInput(eventTime);
    if (!iso) {
      setErr('事件时间无效');
      setSaving(false);
      return;
    }
    // recurrence 为 none 时清掉终止时间：留着它只会让后续编辑困惑
    const endIso = recurrence === 'none' || !recurrenceEnd ? null : fromLocalInput(recurrenceEnd);
    const payload: CalendarEventInput = {
      title: title.trim(),
      description,
      reminder_text: reminderText.trim(),
      recipients,
      delivery_mode: deliveryMode,
      // 旧字段保持与列表首项一致：第三方客户端（与旧版前端）只读 to_address
      to_address: recipients[0] ?? '',
      event_time: iso,
      remind_before: remindBefore,
      recurrence,
      recurrence_end: endIso,
      status
    };
    try {
      if (editing && event) await api.updateCalendarEvent(event.event_id, payload);
      else await api.createCalendarEvent(payload);
      onSaved();
      onClose();
    } catch (e: any) {
      setErr(e?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  }

  async function remove() {
    if (!event) return;
    setDeleting(true);
    try {
      await api.deleteCalendarEvent(event.event_id);
      onSaved();
      onClose();
    } catch (e: any) {
      setErr(e?.message || '删除失败');
      setDeleting(false);
    }
  }

  const unusedAgents = agents.filter(a => !recipients.includes(a));

  return (
    <div className="flex flex-col h-full min-h-0 bg-white">
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0">
        <h2 className="text-base font-medium text-gray-900">
          {editing ? '编辑日程' : '新建日程'}
        </h2>
        <button
          onClick={onClose}
          className="p-1.5 rounded hover:bg-gray-100 text-gray-500"
          aria-label="关闭"
        >
          <CloseIcon />
        </button>
      </div>

      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-5">
        <div>
          <label className="block text-xs font-medium text-gray-600 mb-1">标题</label>
          <input
            value={title}
            onChange={e => setTitle(e.target.value)}
            autoFocus
            placeholder="例如：llmsproxy 发布评审"
            className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label className="block text-xs font-medium text-gray-600 mb-1">说明</label>
          <textarea
            value={description}
            onChange={e => setDescription(e.target.value)}
            rows={2}
            placeholder="可留空；会作为 {description} 变量填入提醒正文"
            className="w-full px-3 py-2 border border-gray-300 rounded text-sm resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">时间</label>
            <input
              type="datetime-local"
              value={eventTime}
              onChange={e => setEventTime(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            {fromLocalInput(eventTime) && (
              <p className="mt-1 text-xs text-gray-500">
                {formatSolarWithLunar(new Date(fromLocalInput(eventTime)))}
              </p>
            )}
          </div>
          <div>
            <label className="flex items-center gap-1 text-xs font-medium text-gray-600 mb-1">
              <BellIcon className="w-3.5 h-3.5" />
              提醒
            </label>
            <select
              value={PRESETS.includes(remindBefore) ? String(remindBefore) : 'custom'}
              onChange={e => {
                if (e.target.value !== 'custom') setRemindBefore(Number(e.target.value));
              }}
              className="w-full px-3 py-2 border border-gray-300 rounded text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {PRESETS.map(m => (
                <option key={m} value={m}>
                  {describeRemindBefore(m)}
                </option>
              ))}
              {!PRESETS.includes(remindBefore) && (
                <option value="custom">{describeRemindBefore(remindBefore)}</option>
              )}
            </select>
          </div>
        </div>

        <div>
          <label className="flex items-center gap-1 text-xs font-medium text-gray-600 mb-1">
            <RepeatIcon className="w-3.5 h-3.5" />
            重复
          </label>
          <select
            value={recurrence}
            onChange={e => setRecurrence(e.target.value as Recurrence)}
            className="w-full px-3 py-2 border border-gray-300 rounded text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            {RECURRENCE_GROUPS.map(g => (
              <optgroup key={g.label} label={g.label}>
                {g.items.map(it => (
                  <option key={it.value} value={it.value}>
                    {it.label}
                  </option>
                ))}
              </optgroup>
            ))}
          </select>

          {recurrence !== 'none' && (
            <div className="mt-2 space-y-2">
              <div className="px-2.5 py-2 bg-gray-50 border border-gray-200 rounded">
                <div className="text-xs text-gray-600 mb-1">
                  {describeRecurrenceRule(
                    recurrence,
                    fromLocalInput(eventTime) ? new Date(fromLocalInput(eventTime)) : undefined
                  )}
                  {isLunarRecurrence(recurrence) && (
                    <span className="ml-1 text-amber-700">· 按农历推进</span>
                  )}
                </div>
                {/* 接下来三次必须显示：农历规则的公历日期每次都在变，
                    光看规则名分辨不出对不对，而错了要等一个月才发现 */}
                {upcoming.length > 0 ? (
                  <ul className="space-y-0.5">
                    {upcoming.map((d, i) => (
                      <li key={i} className="text-xs text-gray-700 tabular-nums">
                        {formatSolarWithLunar(d)}{' '}
                        <span className="text-gray-400">
                          {String(d.getHours()).padStart(2, '0')}:
                          {String(d.getMinutes()).padStart(2, '0')}
                        </span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-xs text-amber-700">
                    算不出下一次 —— 这条规则在后续年份可能不存在（例如闰月）。
                  </p>
                )}
              </div>

              <div>
                <label className="block text-xs font-medium text-gray-600 mb-1">重复至</label>
                <input
                  type="datetime-local"
                  value={recurrenceEnd}
                  onChange={e => setRecurrenceEnd(e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
                <p className="mt-1 text-xs text-gray-500">留空 = 一直重复</p>
              </div>
            </div>
          )}
        </div>

        {/* ── 收件人 ── */}
        <div className="pt-1 border-t border-gray-100">
          <label className="flex items-center gap-1 text-xs font-medium text-gray-600 mb-1 mt-3">
            <UsersIcon className="w-3.5 h-3.5" />
            提醒发给谁（{recipients.length}）
          </label>

          {recipients.length > 0 && (
            <ul className="mb-2 space-y-1">
              {recipients.map((addr, i) => (
                <li
                  key={addr}
                  className="flex items-center gap-2 px-2 py-1.5 bg-gray-50 border border-gray-200 rounded text-xs"
                >
                  <BotIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                  <span className="flex-1 min-w-0 truncate text-gray-800 font-mono">{addr}</span>
                  {/* together 模式下首个是主收件人，顺序有语义，因此要能调 */}
                  {deliveryMode === 'together' && i === 0 && (
                    <span className="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded shrink-0">
                      主收件人
                    </span>
                  )}
                  {deliveryMode === 'together' && i > 0 && (
                    <button
                      onClick={() => moveUp(i)}
                      title="设为主收件人方向移动"
                      className="px-1 rounded hover:bg-gray-200 text-gray-500 shrink-0"
                    >
                      ↑
                    </button>
                  )}
                  <button
                    onClick={() => removeRecipient(addr)}
                    className="p-0.5 rounded hover:bg-gray-200 text-gray-500 shrink-0"
                    aria-label={`移除 ${addr}`}
                  >
                    <CloseIcon className="w-3.5 h-3.5" />
                  </button>
                </li>
              ))}
            </ul>
          )}

          <div className="flex gap-2">
            <div className="flex-1 min-w-0">
              <AddressInput
                value={draftAddr}
                onChange={setDraftAddr}
                placeholder="name@path.session（省略 .session = 默认会话）"
              />
            </div>
            <button
              onClick={() => addRecipient(draftAddr)}
              disabled={!draftAddr.trim()}
              className="px-2.5 py-2 border border-gray-300 text-gray-700 text-xs rounded hover:bg-gray-50 disabled:opacity-40 shrink-0 flex items-center gap-1"
            >
              <PlusIcon className="w-3.5 h-3.5" />
              添加
            </button>
          </div>

          {unusedAgents.length > 0 && (
            <div className="mt-1.5 flex flex-wrap gap-1.5">
              {unusedAgents.map(a => (
                <button
                  key={a}
                  onClick={() => addRecipient(a)}
                  className="px-2 py-0.5 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded border border-gray-200"
                >
                  + {a}
                </button>
              ))}
            </div>
          )}

          {recipients.length > 1 && (
            <div className="mt-3">
              <div className="text-xs font-medium text-gray-600 mb-1">怎么投递</div>
              <div className="space-y-1.5">
                <label className="flex items-start gap-2 cursor-pointer">
                  <input
                    type="radio"
                    checked={deliveryMode === 'separate'}
                    onChange={() => setDeliveryMode('separate')}
                    className="mt-0.5"
                  />
                  <span className="text-xs">
                    <span className="text-gray-800">分别发送</span>
                    <span className="block text-gray-500">
                      每人一封、落各自的会话，互相看不到 —— 适合让几个 Agent
                      各自独立判断。
                    </span>
                  </span>
                </label>
                <label className="flex items-start gap-2 cursor-pointer">
                  <input
                    type="radio"
                    checked={deliveryMode === 'together'}
                    onChange={() => setDeliveryMode('together')}
                    className="mt-0.5"
                  />
                  <span className="text-xs">
                    <span className="text-gray-800">一起发送</span>
                    <span className="block text-gray-500">
                      首个是主收件人、其余抄送，共享同一条线索，能看到彼此的回复 ——
                      适合有主次的协作。
                    </span>
                  </span>
                </label>
              </div>
            </div>
          )}
        </div>

        {/* ── 提醒正文 ── */}
        <div className="pt-1 border-t border-gray-100">
          <label className="block text-xs font-medium text-gray-600 mb-1 mt-3">提醒正文</label>
          <textarea
            value={reminderText}
            onChange={e => setReminderText(e.target.value)}
            rows={4}
            placeholder={DEFAULT_TEMPLATE}
            className="w-full px-3 py-2 border border-gray-300 rounded text-sm font-mono resize-y focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <div className="mt-1.5 flex flex-wrap gap-1.5">
            {['{title}', '{time}', '{description}'].map(v => (
              <button
                key={v}
                type="button"
                onClick={() => setReminderText(t => t + v)}
                className="px-2 py-0.5 text-xs font-mono bg-gray-100 hover:bg-gray-200 text-gray-700 rounded border border-gray-200"
              >
                {v}
              </button>
            ))}
          </div>
        </div>

        <div>
          <div className="text-xs font-medium text-gray-600 mb-1">Agent 会收到</div>
          <pre className="px-3 py-2 bg-gray-50 border border-gray-200 rounded text-xs text-gray-800 whitespace-pre-wrap break-words">
            {preview}
          </pre>
        </div>

        {editing && (
          <div>
            <label className="flex items-center gap-1 text-xs font-medium text-gray-600 mb-1">
              <PaperclipIcon className="w-3.5 h-3.5" />
              附件（随提醒邮件一起发出）
            </label>
            {atts.length > 0 && (
              <ul className="mb-2 space-y-1">
                {atts.map(a => (
                  <li
                    key={a.attachment_id}
                    className="flex items-center gap-2 px-2 py-1.5 bg-gray-50 border border-gray-200 rounded text-xs"
                  >
                    <FileIcon className="w-3.5 h-3.5 text-gray-400 shrink-0" />
                    <span className="flex-1 min-w-0 truncate text-gray-800">{a.filename}</span>
                    <span className="text-gray-400 tabular-nums shrink-0">
                      {(a.size_bytes / 1024).toFixed(1)} KB
                    </span>
                    <button
                      onClick={() => dropAttachment(a.attachment_id)}
                      className="p-0.5 rounded hover:bg-gray-200 text-gray-500 shrink-0"
                      aria-label={`移除 ${a.filename}`}
                    >
                      <CloseIcon className="w-3.5 h-3.5" />
                    </button>
                  </li>
                ))}
              </ul>
            )}
            <button
              onClick={() => fileRef.current?.click()}
              disabled={uploading}
              className="px-2.5 py-1 border border-gray-300 text-gray-700 text-xs rounded hover:bg-gray-50 disabled:opacity-40 flex items-center gap-1.5"
            >
              {uploading ? (
                <SpinnerIcon className="w-3.5 h-3.5 animate-spin" />
              ) : (
                <PaperclipIcon className="w-3.5 h-3.5" />
              )}
              添加附件
            </button>
            <input
              ref={fileRef}
              type="file"
              multiple
              className="hidden"
              onChange={e => addFiles(e.target.files)}
            />
          </div>
        )}

        {editing && (
          <div>
            <label className="block text-xs font-medium text-gray-600 mb-1">状态</label>
            <select
              value={status}
              onChange={e => setStatus(e.target.value as CalendarEvent['status'])}
              className="w-full px-3 py-2 border border-gray-300 rounded text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="active">启用</option>
              <option value="paused">暂停（不再触发提醒）</option>
              <option value="cancelled">已取消</option>
            </select>
          </div>
        )}

        {err && (
          <div className="px-3 py-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
            {err}
          </div>
        )}
      </div>

      <div className="flex items-center gap-2 px-4 py-3 border-t border-gray-200 shrink-0 flex-wrap">
        <button
          onClick={save}
          disabled={!canSave}
          title={recipients.length === 0 ? '至少要有一个收件人' : undefined}
          className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-2"
        >
          {saving && <SpinnerIcon className="w-4 h-4 animate-spin" />}
          {editing ? '保存' : '创建'}
        </button>
        <button
          onClick={onClose}
          className="px-4 py-2 border border-gray-300 text-gray-700 text-sm rounded hover:bg-gray-50"
        >
          取消
        </button>
        {editing && (
          <div className="w-full sm:w-auto sm:ml-auto">
            {confirmDelete ? (
              <div className="flex items-center gap-2 flex-wrap">
                <span className="text-xs text-gray-600">确定删除？</span>
                <button
                  onClick={remove}
                  disabled={deleting}
                  className="px-3 py-1.5 bg-red-600 text-white text-xs rounded hover:bg-red-700 disabled:opacity-40 flex items-center gap-1"
                >
                  {deleting && <SpinnerIcon className="w-3 h-3 animate-spin" />}
                  删除
                </button>
                <button
                  onClick={() => setConfirmDelete(false)}
                  className="px-3 py-1.5 border border-gray-300 text-gray-700 text-xs rounded hover:bg-gray-50"
                >
                  取消
                </button>
              </div>
            ) : (
              <button
                onClick={() => setConfirmDelete(true)}
                className="px-3 py-1.5 text-red-600 text-sm rounded hover:bg-red-50 flex items-center gap-1.5"
              >
                <TrashIcon className="w-4 h-4" />
                删除
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}