import React, { useMemo, useState } from 'react';
import { PlusIcon } from '@heroicons/react/24/outline';
import PageHeader from '../components/ui/PageHeader';
import DataTable, { type Column } from '../components/ui/DataTable';
import Modal from '../components/ui/Modal';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import { ActiveBadge } from '../components/ui/StatusBadge';
import { useUrlState } from '../hooks/useUrlState';
import { usePermissions } from '../hooks/usePermissions';
import { useResourceTypes } from '../hooks/useResources';
import type { ResourceType } from '../types';

/** نوع منبع — کلینیک خودش تعریفش می‌کند؛ سه نوع سیستمی را backfill می‌سازد. */
export default function ResourceTypesPage() {
  const { types, loading, create, update, remove } = useResourceTypes();
  const { can } = usePermissions();
  const canUpdate = can('appointment_settings', 'update');

  const [urlState, setUrlState] = useUrlState({ search: '' });
  const [editing, setEditing] = useState<{ open: boolean; type: ResourceType | null }>({ open: false, type: null });
  const [toDelete, setToDelete] = useState<ResourceType | null>(null);

  const rows = useMemo(() => {
    const q = urlState.search.trim();
    return q === '' ? types : types.filter((t) => `${t.name} ${t.code}`.includes(q));
  }, [types, urlState.search]);

  const columns: Column<ResourceType>[] = [
    {
      key: 'name',
      header: 'نوع منبع',
      render: (t) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontWeight: 600 }}>{t.name}</span>
          {t.is_system && <span className="badge gray" style={{ fontSize: 11 }}>سیستمی</span>}
        </div>
      ),
    },
    { key: 'code', header: 'کد', render: (t) => <code style={{ fontSize: 12, direction: 'ltr' }}>{t.code}</code> },
    { key: 'resources_count', header: 'تعداد منبع', render: (t) => <span style={{ fontSize: 13 }}>{t.resources_count ?? 0}</span> },
    { key: 'active', header: 'وضعیت', render: (t) => <ActiveBadge active={t.active} /> },
  ];

  return (
    <div className="fade-in">
      <PageHeader
        title="نوع منابع"
        description="دسته‌بندی منابع: پزشک، پرسنل، اتاق، دستگاه لیزر، یونیت. نوع‌های سیستمی حذف نمی‌شوند چون پل خودکار منابع به آن‌ها تکیه دارد."
        backTo="/admin/resources"
        breadcrumbs={[{ label: 'منابع', to: '/admin/resources' }, { label: 'نوع منابع' }]}
        action={
          canUpdate ? (
            <button type="button" className="btn primary" onClick={() => setEditing({ open: true, type: null })}>
              <PlusIcon style={{ width: 16 }} /> افزودن نوع
            </button>
          ) : undefined
        }
      />

      <DataTable
        columns={columns}
        data={rows}
        loading={loading}
        searchValue={urlState.search}
        onSearchChange={(v) => setUrlState({ search: v })}
        searchPlaceholder="جستجو در نوع منابع..."
        emptyMessage="هنوز نوع منبعی تعریف نشده است"
        actions={
          canUpdate
            ? (t) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button type="button" className="btn secondary sm" onClick={() => setEditing({ open: true, type: t })}>
                    ویرایش
                  </button>
                  <button
                    type="button"
                    className="btn secondary sm"
                    disabled={t.is_system}
                    title={t.is_system ? 'نوع سیستمی حذف نمی‌شود' : undefined}
                    onClick={() => setToDelete(t)}
                  >
                    حذف
                  </button>
                </div>
              )
            : undefined
        }
      />

      <TypeModal
        open={editing.open}
        type={editing.type}
        saving={create.isPending || update.isPending}
        onClose={() => setEditing({ open: false, type: null })}
        onSave={(payload) => {
          const opts = { onSuccess: () => setEditing({ open: false, type: null }) };
          if (editing.type) update.mutate({ uuid: editing.type.uuid, d: { name: payload.name, active: payload.active } }, opts);
          else create.mutate({ code: payload.code, name: payload.name }, opts);
        }}
      />

      <ConfirmDialog
        open={!!toDelete}
        title="حذف نوع منبع"
        message={`آیا از حذف «${toDelete?.name}» مطمئن هستید؟`}
        confirmLabel="حذف"
        loading={remove.isPending}
        onConfirm={() => toDelete && remove.mutate(toDelete.uuid, { onSuccess: () => setToDelete(null) })}
        onCancel={() => setToDelete(null)}
      />
    </div>
  );
}

function TypeModal({
  open, type, saving, onClose, onSave,
}: {
  open: boolean;
  type: ResourceType | null;
  saving: boolean;
  onClose: () => void;
  onSave: (payload: { code: string; name: string; active: boolean }) => void;
}) {
  const [code, setCode] = useState('');
  const [name, setName] = useState('');
  const [active, setActive] = useState(true);

  React.useEffect(() => {
    if (!open) return;
    setCode(type?.code ?? '');
    setName(type?.name ?? '');
    setActive(type?.active ?? true);
  }, [open, type]);

  const isEdit = type !== null;
  const codeValid = /^[a-z0-9_]{1,40}$/.test(code);
  const invalid = name.trim() === '' || (!isEdit && !codeValid);

  return (
    <Modal open={open} onClose={onClose} title={isEdit ? 'ویرایش نوع منبع' : 'افزودن نوع منبع'}>
      <div style={{ display: 'grid', gap: 14 }}>
        <div style={{ display: 'grid', gap: 6 }}>
          <label style={{ fontSize: 12, color: 'var(--text-2)' }}>کد (انگلیسی)</label>
          <input
            className="field"
            value={code}
            disabled={isEdit}
            onChange={(e) => setCode(e.target.value)}
            placeholder="laser_device"
            style={{ direction: 'ltr' }}
          />
          {!isEdit && code !== '' && !codeValid && (
            <span style={{ fontSize: 12, color: 'var(--danger)' }}>
              فقط حروف کوچک انگلیسی، عدد و زیرخط.
            </span>
          )}
          {isEdit && (
            <span style={{ fontSize: 12, color: 'var(--text-3)' }}>
              کد پس از ساخت تغییر نمی‌کند؛ منابع موجود با همین کد پیدا می‌شوند.
            </span>
          )}
        </div>

        <div style={{ display: 'grid', gap: 6 }}>
          <label style={{ fontSize: 12, color: 'var(--text-2)' }}>نام نمایشی</label>
          <input className="field-block" value={name} onChange={(e) => setName(e.target.value)} placeholder="دستگاه لیزر" />
        </div>

        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
          <input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} />
          فعال است
        </label>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <button type="button" className="btn secondary" onClick={onClose}>انصراف</button>
          <button
            type="button"
            className="btn primary"
            disabled={saving || invalid}
            onClick={() => onSave({ code: code.trim(), name: name.trim(), active })}
          >
            {saving ? 'در حال ذخیره...' : 'ذخیره'}
          </button>
        </div>
      </div>
    </Modal>
  );
}
