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 { useSkills } from '../hooks/useResources';
import type { Skill } from '../types';

/**
 * مهارت‌ها — «کدام اپراتور مجاز است با کدام دستگاه کار کند» یک اطلاعات است، نه یک
 * قانون. با «عنوان شغلی» پرسنل قاطی نشود: آن متن آزاد و فقط برای نمایش است.
 */
export default function SkillsPage() {
  const { skills, loading, create, update, remove } = useSkills();
  const { can } = usePermissions();
  const canUpdate = can('appointment_settings', 'update');

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

  const rows = useMemo(() => {
    const q = urlState.search.trim();
    return q === '' ? skills : skills.filter((s) => s.name.includes(q));
  }, [skills, urlState.search]);

  const columns: Column<Skill>[] = [
    { key: 'name', header: 'مهارت', render: (s) => <span style={{ fontWeight: 600 }}>{s.name}</span> },
    {
      key: 'resources_count',
      header: 'روی چند منبع',
      render: (s) => <span style={{ fontSize: 13 }}>{s.resources_count ?? 0}</span>,
    },
    { key: 'active', header: 'وضعیت', render: (s) => <ActiveBadge active={s.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, skill: 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
            ? (s) => (
                <div style={{ display: 'flex', gap: 6 }}>
                  <button type="button" className="btn secondary sm" onClick={() => setEditing({ open: true, skill: s })}>
                    ویرایش
                  </button>
                  <button
                    type="button"
                    className="btn secondary sm"
                    disabled={(s.resources_count ?? 0) > 0}
                    title={(s.resources_count ?? 0) > 0 ? 'اول از منابع برداشته شود' : undefined}
                    onClick={() => setToDelete(s)}
                  >
                    حذف
                  </button>
                </div>
              )
            : undefined
        }
      />

      <SkillModal
        open={editing.open}
        skill={editing.skill}
        saving={create.isPending || update.isPending}
        onClose={() => setEditing({ open: false, skill: null })}
        onSave={({ name, active }) => {
          const opts = { onSuccess: () => setEditing({ open: false, skill: null }) };
          if (editing.skill) update.mutate({ uuid: editing.skill.uuid, d: { name, active } }, opts);
          else create.mutate({ 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 SkillModal({
  open, skill, saving, onClose, onSave,
}: {
  open: boolean;
  skill: Skill | null;
  saving: boolean;
  onClose: () => void;
  onSave: (payload: { name: string; active: boolean }) => void;
}) {
  const [name, setName] = useState('');
  const [active, setActive] = useState(true);

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

  return (
    <Modal open={open} onClose={onClose} title={skill ? 'ویرایش مهارت' : 'افزودن مهارت'}>
      <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={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 || name.trim() === ''}
            onClick={() => onSave({ name: name.trim(), active })}
          >
            {saving ? 'در حال ذخیره...' : 'ذخیره'}
          </button>
        </div>
      </div>
    </Modal>
  );
}