import { useEffect, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
import { api } from '../../lib/api';
import type { ApiResponse } from '../../lib/api';
import Modal from './Modal';
import Switch from './Switch';
import { usePermissionCatalog } from '../../hooks/usePermissionCatalog';

/** envelope کامل — همان چیزی که بک‌اند برمی‌گرداند، بدون flatten. */
export interface PermissionEnvelope {
  version: number;
  resources: Record<string, Record<string, boolean>>;
}

export interface ClinicDoctorPermissionPayload {
  uuid: string;
  clinic_uuid: string;
  doctor_uuid: string;
  doctor_name: string;
  active: boolean;
  permissions: PermissionEnvelope;
}

/** ستون‌های ثابتِ جدول؛ هر منبع فقط ستون‌هایی را پر می‌کند که کاتالوگ برایش داده. */
const ACTION_COLUMNS = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
const ACTION_HEADERS = ['مشاهده', 'ایجاد', 'ویرایش', 'حذف', 'لغو', 'تغییر وضعیت'];

export default function DoctorPermissionsModal({ clinicUuid, doctorUuid, doctorName, onClose }: {
  clinicUuid: string;
  doctorUuid: string;
  doctorName: string;
  onClose: () => void;
}) {
  const qc = useQueryClient();
  const catalog = usePermissionCatalog();
  const [resources, setResources] = useState<PermissionEnvelope['resources']>({});
  const [active, setActive] = useState(true);

  const permQ = useQuery({
    queryKey: ['clinic-doctor-permissions', clinicUuid, doctorUuid],
    queryFn: () => api.get<ApiResponse<ClinicDoctorPermissionPayload>>(
      `/api/v1/admin/clinic/${clinicUuid}/doctor/${doctorUuid}/permissions`,
    ),
  });

  useEffect(() => {
    const payload = permQ.data?.data;
    if (!payload) return;
    setResources(payload.permissions?.resources ?? {});
    setActive(payload.active);
  }, [permQ.data]);

  const saveMut = useMutation({
    mutationFn: () => api.patch<ApiResponse<ClinicDoctorPermissionPayload>>(
      `/api/v1/admin/clinic/${clinicUuid}/doctor/${doctorUuid}/permissions`,
      { permissions: { resources }, active },
    ),
    onSuccess: () => {
      toast.success('دسترسی‌های پزشک ذخیره شد');
      qc.invalidateQueries({ queryKey: ['clinic-doctor-permissions', clinicUuid, doctorUuid] });
      qc.invalidateQueries({ queryKey: ['clinic-doctors', clinicUuid] });
      onClose();
    },
    onError: (e: Error) => toast.error(e.message),
  });

  const toggle = (resource: string, action: string) => {
    setResources(prev => ({
      ...prev,
      [resource]: { ...prev[resource], [action]: !prev[resource]?.[action] },
    }));
  };

  return (
    <Modal
      open
      size="lg"
      title={`دسترسی‌های ${doctorName}`}
      onClose={onClose}
      footer={
        <>
          <button className="btn ghost sm" onClick={onClose}>انصراف</button>
          <button
            className="btn primary sm"
            disabled={saveMut.isPending || permQ.isLoading || catalog.isLoading}
            onClick={() => saveMut.mutate()}
          >
            ذخیره
          </button>
        </>
      }
    >
      {permQ.isLoading || catalog.isLoading ? (
        <p className="muted">در حال بارگذاری...</p>
      ) : catalog.isError ? (
        <p className="muted">فهرست دسترسی‌ها خوانده نشد. صفحه را دوباره باز کنید.</p>
      ) : (
        <>
          <div style={{ marginBottom: 14 }}>
            <Switch
              checked={active}
              onChange={setActive}
              label="دسترسی این پزشک به کلینیک فعال باشد"
              hint="خاموش‌کردنش کل جدول زیر را بی‌اثر می‌کند."
            />
          </div>

          <div style={{ overflowX: 'auto' }}>
            <table className="t">
              <thead>
                <tr>
                  <th>بخش</th>
                  {ACTION_HEADERS.map(h => (
                    <th key={h} style={{ textAlign: 'center', fontSize: 12 }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {catalog.resources.map(resource => {
                  const available = new Set(resource.actions.map(a => a.key));
                  return (
                    <tr key={resource.key}>
                      <td><b>{resource.label}</b></td>
                      {ACTION_COLUMNS.map(action => {
                        if (!available.has(action)) {
                          return <td key={action} style={{ textAlign: 'center', color: 'var(--border)' }}>—</td>;
                        }
                        return (
                          <td key={action}>
                            {/* سوییچ در سلول جدول: بدون برچسبِ دیداری، پس نامِ
                                دسترسی‌پذیر از ترکیب بخش و ستون ساخته می‌شود. */}
                            <div style={{ display: 'flex', justifyContent: 'center' }}>
                              <Switch
                                disabled={!active}
                                checked={resources[resource.key]?.[action] ?? false}
                                onChange={() => toggle(resource.key, action)}
                                ariaLabel={`${resource.label} — ${ACTION_HEADERS[ACTION_COLUMNS.indexOf(action)]}`}
                              />
                            </div>
                          </td>
                        );
                      })}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <p className="muted" style={{ fontSize: 12, marginTop: 12 }}>
            این دسترسی‌ها فقط داخل همین کلینیک اعمال می‌شوند؛ مطب شخصی پزشک تحت تأثیر قرار نمی‌گیرد.
          </p>
        </>
      )}
    </Modal>
  );
}