import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { PlusIcon, TrashIcon, XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import Switch from './ui/Switch';
import SearchableSelect from './ui/SearchableSelect';
import Input from './ui/Input';
import ConfirmDialog from './ui/ConfirmDialog';
import { api, ApiError, type ApiResponse } from '../lib/api';

interface ProtocolStep {
  step_number: number;
  offset_days: number;
}

interface ProtocolStaff {
  uuid: string;
  name: string;
}

interface TreatmentProtocol {
  uuid: string;
  /** آیا هیچ منبعی این سرویس را ارائه می‌دهد؛ نبودش رزرو را قفل نمی‌کند ولی باید دیده شود. */
  service_has_resources?: boolean;
  active: boolean;
  total_sessions: number;
  supervisor: { uuid: string; name: string } | null;
  steps: ProtocolStep[];
  staff: ProtocolStaff[];
}

interface StaffRow {
  uuid: string;
  full_name: string;
  active?: boolean;
}

interface DoctorRow {
  uuid: string;
  name: string;
}

/** پیش‌فرضِ روشن‌کردن سوییچ: کوتاه‌ترین دوره‌ای که معنی دارد. */
const DEFAULT_STEPS: ProtocolStep[] = [
  { step_number: 1, offset_days: 0 },
  { step_number: 2, offset_days: 30 },
];

const MIN_STEPS = 2;

/** خط جداکنندهٔ بخش‌ها — سه بخشِ مستقل نباید به‌هم چسبیده به نظر برسند. */
function Divider() {
  return <hr style={{ border: 0, borderTop: '1px solid var(--border)', margin: 0 }} />;
}

/**
 * «طول درمان» یک سرویس.
 *
 * وجودِ پروتکل خودش سوییچ است — سرویس بدون پروتکل تک‌جلسه‌ای است — پس روشن‌کردن یعنی
 * ساختن و خاموش‌کردن یعنی حذف. چون خاموش‌کردن برگشت‌ناپذیر است و گام‌ها و پرسنل را با
 * خودش می‌برد، با تأیید صریح انجام می‌شود نه با یک کلیک.
 *
 * فاصلهٔ هر گام از **جلسهٔ قبل** است، نه از شروع دوره، چون فاصلهٔ درمان به آخرین جلسه
 * گره خورده نه به روز باز شدن پرونده.
 */
export default function TreatmentProtocolTab({ serviceUuid, canEdit }: {
  serviceUuid: string;
  canEdit: boolean;
}) {
  const qc = useQueryClient();

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ['treatment-protocol', serviceUuid],
    queryFn: () => api.get<ApiResponse<TreatmentProtocol | null>>(
      `/api/v1/service-item/${serviceUuid}/treatment-protocol`,
    ),
  });

  const { data: staffData } = useQuery({
    queryKey: ['staff-list-for-protocol'],
    queryFn: () => api.get<ApiResponse<StaffRow[]>>('/api/v1/staff'),
    staleTime: 60_000,
  });

  const { data: doctorData } = useQuery({
    queryKey: ['my-clinic-doctors'],
    queryFn: () => api.get<ApiResponse<{ data: DoctorRow[] }>>('/api/v1/my/clinic-doctors'),
    staleTime: 60_000,
  });

  const protocol = data?.data ?? null;

  const [enabled, setEnabled]       = useState(false);
  const [steps, setSteps]           = useState<ProtocolStep[]>(DEFAULT_STEPS);
  const [staffUuids, setStaffUuids] = useState<string[]>([]);
  const [supervisor, setSupervisor] = useState<string | null>(null);
  const [confirmOff, setConfirmOff] = useState(false);

  useEffect(() => {
    setEnabled(protocol !== null);
    setSteps(protocol?.steps?.length ? protocol.steps : DEFAULT_STEPS);
    setStaffUuids(protocol?.staff?.map((s) => s.uuid) ?? []);
    setSupervisor(protocol?.supervisor?.uuid ?? null);
  }, [protocol]);

  const staffOptions = (staffData?.data ?? [])
    .filter((s) => s.active !== false)
    .map((s) => ({ value: s.uuid, label: s.full_name }));

  const doctorOptions = (doctorData?.data?.data ?? []).map((d) => ({ value: d.uuid, label: d.name }));

  const save = useMutation({
    mutationFn: () => api.put<ApiResponse<TreatmentProtocol>>(
      `/api/v1/service-item/${serviceUuid}/treatment-protocol`,
      {
        steps: steps.map((s, i) => ({ step_number: i + 1, offset_days: s.offset_days })),
        staff_uuids: staffUuids,
        supervisor_doctor_uuid: supervisor,
      },
    ),
    onSuccess: () => {
      toast.success('طول درمان ذخیره شد');
      qc.invalidateQueries({ queryKey: ['treatment-protocol', serviceUuid] });
    },
    onError: (e) => toast.error(e instanceof ApiError ? e.message : 'ذخیرهٔ طول درمان ناموفق بود'),
  });

  const remove = useMutation({
    mutationFn: () => api.delete<ApiResponse<null>>(`/api/v1/service-item/${serviceUuid}/treatment-protocol`),
    onSuccess: () => {
      toast.success('طول درمان خاموش شد');
      setConfirmOff(false);
      qc.invalidateQueries({ queryKey: ['treatment-protocol', serviceUuid] });
    },
    onError: (e) => toast.error(e instanceof ApiError ? e.message : 'خاموش‌کردن ناموفق بود'),
  });

  /**
   * روشن‌کردن بی‌خطر است و فوری اعمال می‌شود؛ خاموش‌کردن پروتکل را با همهٔ گام‌ها و
   * پرسنلش پاک می‌کند، پس تأیید می‌خواهد.
   */
  const toggle = (on: boolean) => {
    if (on) {
      setEnabled(true);
      return;
    }

    if (protocol === null) {
      setEnabled(false);
      return;
    }

    setConfirmOff(true);
  };

  const setOffset = (index: number, value: number) => {
    setSteps((prev) => prev.map((s, i) => (i === index ? { ...s, offset_days: value } : s)));
  };

  const addStep = () => {
    setSteps((prev) => [
      ...prev,
      { step_number: prev.length + 1, offset_days: prev[prev.length - 1]?.offset_days || 30 },
    ]);
  };

  const removeStep = (index: number) => {
    setSteps((prev) => (prev.length <= MIN_STEPS ? prev : prev.filter((_, i) => i !== index)));
  };

  const addStaff = (uuid: string | number | null) => {
    const id = uuid === null ? '' : String(uuid);
    if (id && !staffUuids.includes(id)) setStaffUuids((prev) => [...prev, id]);
  };

  if (isLoading) {
    return <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>در حال بارگذاری...</div>;
  }

  /**
   * بدون این، شکستِ کوئری `protocol = null` می‌داد و صفحه سوییچِ خاموش نشان می‌داد —
   * یعنی به مدیر می‌گفت این سرویس تک‌جلسه‌ای است، در حالی که فقط خواندن شکست خورده.
   */
  if (isError) {
    return (
      <div className="card card-pad" style={{ display: 'grid', gap: 10, justifyItems: 'start' }}>
        <strong style={{ fontSize: 13.5 }}>طول درمان این سرویس خوانده نشد</strong>
        <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
          تا وقتی خطا برطرف نشده، وضعیت واقعی این سرویس معلوم نیست.
        </span>
        <button type="button" className="btn secondary sm" onClick={() => refetch()}>
          تلاش دوباره
        </button>
      </div>
    );
  }

  const dirty = enabled && staffUuids.length > 0;

  return (
    <>
      <div className="card card-pad" style={{ display: 'grid', gap: 18 }}>
        <Switch
          checked={enabled}
          onChange={toggle}
          disabled={!canEdit}
          label="طول درمان"
          hint="سرویس‌هایی که در چند جلسه انجام می‌شوند — لیزر، بوتاکس، مزوتراپی. خاموش یعنی تک‌جلسه‌ای."
        />

        {enabled && protocol?.service_has_resources === false && (
          <div
            style={{
              display: 'flex', gap: 10, padding: '12px 14px',
              background: 'var(--warning-bg)', borderRadius: 'var(--r-sm)',
            }}
          >
            <ExclamationTriangleIcon style={{ width: 18, height: 18, color: 'var(--warning)', flexShrink: 0 }} />
            <div style={{ display: 'grid', gap: 4 }}>
              <strong style={{ fontSize: 13 }}>هیچ دستگاهی به این سرویس وصل نیست</strong>
              <span style={{ fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9 }}>
                رزرو قفل نمی‌شود، ولی منشی می‌تواند این سرویس را روی هر منبعی ثبت کند و اپراتور فرم
                دستگاه درست را نمی‌بیند. در «منابع» مشخص کنید کدام دستگاه‌ها این سرویس را می‌دهند.
              </span>
            </div>
          </div>
        )}

        {enabled && (
          <>
            <Divider />

            <section style={{ display: 'grid', gap: 12 }}>
              <div>
                <h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>
                  جلسات دوره{' '}
                  <span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 13 }}>
                    ({steps.length} جلسه)
                  </span>
                </h3>
                <p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.9 }}>
                  فاصلهٔ هر جلسه از <b>جلسهٔ قبل</b> حساب می‌شود، نه از شروع دوره. اگر بیمار دیر بیاید،
                  بقیهٔ دوره هم جابه‌جا می‌شود.
                </p>
              </div>

              {steps.map((step, index) => (
                <div
                  key={index}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
                    paddingBottom: 10,
                    borderBottom: index < steps.length - 1 ? '1px dashed var(--border)' : 'none',
                  }}
                >
                  <span style={{ minWidth: 68, fontSize: 13, fontWeight: 600 }}>جلسهٔ {index + 1}</span>

                  {index === 0 ? (
                    <span style={{ fontSize: 12.5, color: 'var(--text-3)', flex: 1, minWidth: 180 }}>
                      شروع دوره — همان روز اولین نوبت
                    </span>
                  ) : (
                    <>
                      <Input
                        numeric
                        value={String(step.offset_days)}
                        disabled={!canEdit}
                        onChange={(e) => setOffset(index, Number(e.target.value || 0))}
                        aria-label={`فاصلهٔ جلسهٔ ${index + 1} از جلسهٔ قبل به روز`}
                        style={{ width: 96 }}
                      />
                      <span style={{ fontSize: 12.5, color: 'var(--text-3)', flex: 1, minWidth: 140 }}>
                        روز بعد از جلسهٔ قبل
                      </span>
                    </>
                  )}

                  {canEdit && index > 0 && (
                    <button
                      type="button"
                      className="mini-btn danger"
                      onClick={() => removeStep(index)}
                      disabled={steps.length <= MIN_STEPS}
                      title={steps.length <= MIN_STEPS ? 'دوره حداقل دو جلسه دارد' : 'حذف این جلسه'}
                      aria-label={`حذف جلسهٔ ${index + 1}`}
                    >
                      <TrashIcon style={{ width: 16, height: 16 }} />
                    </button>
                  )}
                </div>
              ))}

              {canEdit && (
                <button type="button" className="btn secondary sm" onClick={addStep} style={{ justifySelf: 'start' }}>
                  <PlusIcon style={{ width: 16, height: 16 }} /> افزودن جلسه
                </button>
              )}
            </section>

            <Divider />

            <section style={{ display: 'grid', gap: 10 }}>
              <div>
                <h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>پرسنل مجاز</h3>
                <p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)' }}>
                  منشی هنگام رزرو فقط از میان همین‌ها انتخاب می‌کند.
                </p>
              </div>

              {canEdit && (
                <SearchableSelect
                  options={staffOptions.filter((o) => !staffUuids.includes(String(o.value)))}
                  value={null}
                  onChange={addStaff}
                  placeholder="افزودن پرسنل..."
                  ariaLabel="افزودن پرسنل مجاز"
                />
              )}

              {staffUuids.length === 0 ? (
                <span style={{ fontSize: 12.5, color: 'var(--danger)' }}>
                  حداقل یک پرسنل الزامی است — بدون آن ذخیره نمی‌شود.
                </span>
              ) : (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {staffUuids.map((uuid) => (
                    <span
                      key={uuid}
                      className="badge"
                      style={{ display: 'inline-flex', alignItems: 'center', gap: 2, paddingInlineEnd: 2 }}
                    >
                      {staffOptions.find((o) => String(o.value) === uuid)?.label ?? uuid}
                      {canEdit && (
                        <button
                          type="button"
                          className="mini-btn danger"
                          onClick={() => setStaffUuids((prev) => prev.filter((u) => u !== uuid))}
                          aria-label="حذف این پرسنل"
                        >
                          <XMarkIcon style={{ width: 14, height: 14 }} />
                        </button>
                      )}
                    </span>
                  ))}
                </div>
              )}
            </section>

            <Divider />

            <section style={{ display: 'grid', gap: 10 }}>
              <div>
                <h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>پزشک ناظر</h3>
                <p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)' }}>
                  پاسخگوی بالینی دوره. لازم نیست خودش درمان را انجام دهد.
                </p>
              </div>
              <SearchableSelect
                options={doctorOptions}
                value={supervisor}
                onChange={(v) => setSupervisor(v === null ? null : String(v))}
                placeholder="بدون پزشک ناظر"
                isClearable
                isDisabled={!canEdit}
                ariaLabel="پزشک ناظر دوره"
              />
            </section>
          </>
        )}
      </div>

      {/* نوار ذخیرهٔ چسبان: فرم بلند است و دکمهٔ ته صفحه یعنی اسکرول اجباری، به‌ویژه در موبایل. */}
      {enabled && canEdit && (
        <div className="save-bar">
          <div className="sb-msg">
            {staffUuids.length === 0
              ? 'برای ذخیره حداقل یک پرسنل مجاز انتخاب کنید'
              : `${steps.length} جلسه · ${staffUuids.length} پرسنل مجاز`}
          </div>
          <div className="sb-actions">
            <button
              type="button"
              className="btn primary"
              onClick={() => save.mutate()}
              disabled={save.isPending || !dirty}
            >
              {save.isPending ? 'در حال ذخیره...' : 'ذخیرهٔ طول درمان'}
            </button>
          </div>
        </div>
      )}

      <ConfirmDialog
        open={confirmOff}
        title="خاموش کردن طول درمان"
        message="با این کار پروتکل این سرویس همراه با گام‌ها و فهرست پرسنل مجازش حذف می‌شود و سرویس دوباره تک‌جلسه‌ای می‌گردد. پرونده‌های درمانِ باز دست نمی‌خورند."
        confirmLabel="خاموش کن"
        danger
        loading={remove.isPending}
        onConfirm={() => remove.mutate()}
        onCancel={() => setConfirmOff(false)}
      />
    </>
  );
}