import { type Schedule, type CronPreview } from "../../services/api";
import { Settings } from "lucide-react";
import { formatTime } from "./utils";

type ScheduleForm = {
  scheduleName: string;
  description: string;
  triggerType: "manual" | "cron" | "api";
  cronExpression: string;
  timezone: string;
  enabled: boolean;
  maxConcurrency: string;
  failurePolicy: "stop" | "continue";
};

export function ScheduleInspector({
  schedule,
  form,
  cronResult,
  busy,
  onChange,
  onPreview,
  onSave,
}: {
  schedule: Schedule | null;
  form: ScheduleForm;
  cronResult: CronPreview | null;
  busy: boolean;
  onChange: (form: ScheduleForm) => void;
  onPreview: () => void;
  onSave: () => void;
}) {
  if (!schedule) {
    return (
      <div className="flex min-h-full flex-col items-center justify-center p-[30px] text-center text-[#9aa8b6] [&>svg]:mb-[10px] [&>svg]:text-[#93b4d6]">
        <Settings size={28} />
        <strong className="text-[14px] text-[#516a82]">调度属性</strong>
        <p className="text-[11px] leading-[1.6]">
          选中调度方案后可配置触发方式、Cron 和执行策略。
        </p>
      </div>
    );
  }
  return (
    <div className="flex min-h-full flex-col">
      <section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">基本信息</h3>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-[#758497]">调度名称</span>
          <input
            className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
            value={form.scheduleName}
            onChange={(event) => onChange({
              ...form,
              scheduleName: event.target.value,
            })}
          />
        </label>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-[#758497]">说明</span>
          <textarea
            className="w-full resize-y rounded-[5px] border border-line bg-white p-[7px_8px] text-[11px] leading-[1.5] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
            rows={2}
            value={form.description}
            onChange={(event) => onChange({
              ...form,
              description: event.target.value,
            })}
          />
        </label>
        <label className="flex flex-row items-center justify-between rounded-[6px] bg-[#f5f8fb] p-[8px_9px]">
          <span className="flex flex-col gap-[2px]">
            <b className="text-[11px] text-[#45596f]">启用调度</b>
            <small className="text-[9px] font-normal text-[#94a1ae]">DAG 有效后才能启用</small>
          </span>
          <input
            type="checkbox"
            className="h-[18px] w-[34px] accent-brand"
            checked={form.enabled}
            onChange={(event) => onChange({
              ...form,
              enabled: event.target.checked,
            })}
          />
        </label>
      </section>

      <section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">触发器</h3>
        <label className="flex flex-col gap-[5px]">
          <span className="text-[10px] font-semibold text-[#758497]">触发方式</span>
          <select
            className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
            value={form.triggerType}
            onChange={(event) => onChange({
              ...form,
              triggerType: event.target.value as typeof form.triggerType,
              enabled: event.target.value === "cron" ? form.enabled : false,
            })}
          >
            <option value="manual">手动触发</option>
            <option value="cron">Cron 定时</option>
            <option value="api">API 触发</option>
          </select>
        </label>
        {form.triggerType === "cron" && (
          <>
            <label className="flex flex-col gap-[5px]">
              <span className="text-[10px] font-semibold text-[#758497]">Cron（分 时 日 月 周）</span>
              <input
                className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
                value={form.cronExpression}
                onChange={(event) => onChange({
                  ...form,
                  cronExpression: event.target.value,
                })}
              />
            </label>
            <label className="flex flex-col gap-[5px]">
              <span className="text-[10px] font-semibold text-[#758497]">时区</span>
              <input
                className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
                value={form.timezone}
                onChange={(event) => onChange({
                  ...form,
                  timezone: event.target.value,
                })}
              />
            </label>
            <button
              className="flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-[#bcd2e9] bg-[#f7fbff] text-[11px] text-[#2871bb] [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
              type="button"
              disabled={busy}
              onClick={onPreview}
            >
              预览未来 5 次
            </button>
            {cronResult && (
              <ol className="m-0 list-decimal rounded-[5px] bg-[#f5f8fb] p-[8px_8px_8px_28px] font-mono text-[9px] leading-[1.7] text-ink-muted">
                {cronResult.occurrences.map((item) => (
                  <li key={item.utc_time}>
                    {new Date(item.local_time).toLocaleString("zh-CN", {
                      hour12: false,
                    })}
                  </li>
                ))}
              </ol>
            )}
          </>
        )}
      </section>

      <section className="flex flex-col gap-[10px] border-b border-[#e7ecf1] p-[14px]">
        <h3 className="mb-[2px] text-[13px] text-[#273b50]">执行策略</h3>
        <div className="grid grid-cols-2 gap-2">
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-[#758497]">最大并发</span>
            <input
              type="number"
              min="1"
              max="64"
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
              value={form.maxConcurrency}
              onChange={(event) => onChange({
                ...form,
                maxConcurrency: event.target.value,
              })}
            />
          </label>
          <label className="flex flex-col gap-[5px]">
            <span className="text-[10px] font-semibold text-[#758497]">失败策略</span>
            <select
              className="h-[33px] w-full rounded-[5px] border border-line bg-white px-2 text-[11px] text-[#32475d] outline-none focus:border-[#81b2e7] focus:shadow-[0_0_0_3px_rgb(38_124_216_/_8%)]"
              value={form.failurePolicy}
              onChange={(event) => onChange({
                ...form,
                failurePolicy: event.target.value as "stop" | "continue",
              })}
            >
              <option value="stop">停止后续</option>
              <option value="continue">继续执行</option>
            </select>
          </label>
        </div>
        <div className="flex items-center justify-between rounded-[5px] bg-[#f5f8fb] p-[8px_9px] text-[10px] text-ink-subtle">
          <span>下一次执行</span>
          <strong className="text-[10px] text-[#425970]">{formatTime(schedule.next_run_at)}</strong>
        </div>
      </section>

      <button
        className="m-[14px] flex min-h-[34px] cursor-pointer items-center justify-center rounded-[6px] border border-brand bg-brand text-[11px] text-white [font-weight:650] disabled:cursor-not-allowed disabled:opacity-[0.55]"
        type="button"
        disabled={busy}
        onClick={onSave}
      >
        保存调度属性
      </button>
    </div>
  );
}