import React, { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { PencilIcon } from '@heroicons/react/24/outline';
import PageHeader from '../components/ui/PageHeader';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import { ActiveBadge } from '../components/ui/StatusBadge';
import ResourceFormModal from '../components/resources/ResourceFormModal';
import ResourceWorkingHoursPanel from '../components/resources/ResourceWorkingHoursPanel';
import ResourceExceptionsPanel from '../components/resources/ResourceExceptionsPanel';
import ResourceServicesPanel from '../components/resources/ResourceServicesPanel';
import ResourceSkillsPanel from '../components/resources/ResourceSkillsPanel';
import ResourceCategoriesPanel from '../components/resources/ResourceCategoriesPanel';
import ResourceBlocksPanel from '../components/resources/ResourceBlocksPanel';
import { useUrlState } from '../hooks/useUrlState';
import { usePermissions } from '../hooks/usePermissions';
import { useAddresses } from '../hooks/useAddresses';
import { useResourceDetail, useResourceServices, useResources, useResourceTypes, useSkills } from '../hooks/useResources';
import { useAllServiceItems } from '../hooks/useServiceCatalog';
import type { ClinicResource } from '../types';

const TABS = [
  { id: 'info',       label: 'اطلاعات' },
  { id: 'hours',      label: 'ساعات کاری' },
  { id: 'exceptions', label: 'تعطیلات و استثنا' },
  { id: 'services',   label: 'سرویس‌ها' },
  { id: 'skills',     label: 'مهارت‌ها' },
  { id: 'categories', label: 'دسته‌بندی‌ها' },
  { id: 'blocks',     label: 'غیرفعال‌سازی موقت' },
] as const;
type TabId = typeof TABS[number]['id'];

const SUBJECT_LABEL: Record<string, string> = {
  doctor: 'پزشک',
  staff: 'پرسنل',
  room: 'اتاق',
};

/**
 * یک منبع و همهٔ تنظیمات مستقلش، در یک صفحهٔ تب‌بندی‌شده — همان ساختار صفحهٔ
 * «مدیریت نوبت‌دهی» کلینیک.
 *
 * منبع در مدل Resource-First واحدِ ظرفیت است، پس ساعت کاری و تعطیلات را خودش دارد نه
 * فقط پزشکِ پشتش؛ تقویم منبع درون برنامهٔ هفتگی تنگ‌تر می‌شود، آن را گشاد نمی‌کند.
 */
export default function ResourceDetailPage() {
  const { resourceUuid } = useParams<{ resourceUuid: string }>();
  const navigate = useNavigate();
  const [urlState, setUrlState] = useUrlState({ tab: 'info' });
  const tab = (TABS.some((t) => t.id === urlState.tab) ? urlState.tab : 'info') as TabId;

  const { resource, loading } = useResourceDetail(resourceUuid);
  const { addresses } = useAddresses();
  const { types } = useResourceTypes();
  const { skills } = useSkills();
  const { update, remove, setSkills, setCategories } = useResources();
  const { offerings, save: saveServices } = useResourceServices(resourceUuid);
  const { items: serviceOptions } = useAllServiceItems();
  const { can } = usePermissions();
  const canUpdate = can('appointment_settings', 'update');

  const [editOpen, setEditOpen] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);

  // حالت‌های بارگذاری و نبودِ منبع هم داخل پوستهٔ تنظیمات می‌مانند، وگرنه منوی کناری
  // یک لحظه می‌پرد و دوباره برمی‌گردد.
  if (loading || !resource) {
    return (
        <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>
          {loading ? 'در حال بارگذاری...' : 'منبع یافت نشد.'}
        </div>
    );
  }

  return (
    <div className="fade-in">
      <PageHeader
        title={resource.name}
        description={`${resource.type_name}${resource.subject_kind ? ` · ${SUBJECT_LABEL[resource.subject_kind]}` : ' · تجهیزات'}${resource.address_name ? ` · ${resource.address_name}` : ''}`}
        backTo="/admin/resources"
        breadcrumbs={[{ label: 'منابع', to: '/admin/resources' }, { label: resource.name }]}
        action={
          canUpdate ? (
            <button type="button" className="btn primary sm" onClick={() => setEditOpen(true)}>
              <PencilIcon style={{ width: 15 }} /> ویرایش
            </button>
          ) : undefined
        }
      />

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}>
        <ActiveBadge active={resource.active} />
      </div>

      <div className="seg" role="group" aria-label="تنظیمات منبع" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
        {TABS.map((t) => (
          <button
            key={t.id}
            className={tab === t.id ? 'active' : ''}
            aria-pressed={tab === t.id}
            style={{ whiteSpace: 'nowrap' }}
            onClick={() => setUrlState({ tab: t.id })}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'info' && (
        <InfoTab
          resource={resource}
          canUpdate={canUpdate}
          toggling={update.isPending}
          onToggleActive={() => update.mutate({ uuid: resource.uuid, d: { active: !resource.active } })}
          onDelete={() => setConfirmDelete(true)}
        />
      )}

      {tab === 'hours' && <ResourceWorkingHoursPanel resourceUuid={resourceUuid} canUpdate={canUpdate} />}

      {tab === 'exceptions' && <ResourceExceptionsPanel resourceUuid={resourceUuid} canUpdate={canUpdate} />}

      {tab === 'services' && (
        <div className="card card-pad">
          <ResourceServicesPanel
            resource={resource}
            offerings={offerings}
            services={serviceOptions}
            saving={saveServices.isPending}
            onSave={(lines) => saveServices.mutate({ uuid: resource.uuid, services: lines })}
          />
        </div>
      )}

      {tab === 'skills' && (
        <div className="card card-pad">
          <ResourceSkillsPanel
            resource={resource}
            skills={skills}
            saving={setSkills.isPending}
            onSave={(lines) => setSkills.mutate({ uuid: resource.uuid, skills: lines })}
          />
        </div>
      )}

      {tab === 'categories' && (
        <ResourceCategoriesPanel
          resource={resource}
          canUpdate={canUpdate}
          saving={setCategories.isPending}
          onSave={(categoryUuids) => setCategories.mutate({ uuid: resource.uuid, categoryUuids })}
        />
      )}

      {tab === 'blocks' && <ResourceBlocksPanel resourceUuid={resourceUuid} canUpdate={canUpdate} />}

      {/* حذف موفق یعنی این صفحه دیگر منبعی ندارد؛ ماندن روی آن یک «منبع یافت نشد» است. */}
      <ConfirmDialog
        open={confirmDelete}
        title="حذف منبع"
        message={`آیا از حذف «${resource.name}» مطمئن هستید؟ این کار برگشت‌پذیر نیست.`}
        confirmLabel="حذف"
        danger
        loading={remove.isPending}
        onConfirm={() =>
          remove.mutate(resource.uuid, {
            onSuccess: () => {
              setConfirmDelete(false);
              navigate('/admin/resources');
            },
          })
        }
        onCancel={() => setConfirmDelete(false)}
      />

      <ResourceFormModal
        open={editOpen}
        resource={resource}
        addresses={addresses}
        types={types}
        saving={update.isPending}
        onClose={() => setEditOpen(false)}
        onSave={(payload) =>
          update.mutate({ uuid: resource.uuid, d: payload }, { onSuccess: () => setEditOpen(false) })
        }
      />
    </div>
  );
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12, padding: '11px 0', borderBottom: '1px solid var(--border)',
    }}>
      <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>{label}</span>
      <span style={{ fontSize: 13.5, color: 'var(--text-2)', textAlign: 'left', minWidth: 0 }}>{children}</span>
    </div>
  );
}

/**
 * اطلاعات منبع + دو اقدامِ سطح-منبع.
 *
 * فعال/غیرفعال و حذف پیش‌تر دکمه‌های ردیفِ جدول بودند. جدول حالا فقط فهرست است و
 * هر اقدام کنارِ همان چیزی نشسته که تغییرش می‌دهد؛ حذف هم پایین و جدا از بقیه است
 * تا با «ویرایش» و «غیرفعال» یک‌جا هم‌وزن دیده نشود.
 */
function InfoTab({ resource, canUpdate, toggling, onToggleActive, onDelete }: {
  resource: ClinicResource;
  canUpdate: boolean;
  toggling: boolean;
  onToggleActive: () => void;
  onDelete: () => void;
}) {
  const attributes = Object.entries(resource.attributes ?? {});

  return (
    <div style={{ display: 'grid', gap: 'var(--gap)' }}>
    <div className="card card-pad">
      <Row label="شعبه">{resource.address_name || '—'}</Row>
      <Row label="نوع منبع">{resource.type_name}</Row>
      <Row label="ظرفیت هم‌زمان">{resource.capacity} نفر</Row>
      <Row label="آماده‌سازی / تمیزکاری">
        {resource.setup_minutes} / {resource.cleanup_minutes} دقیقه
      </Row>
      <Row label="مهارت‌ها">
        {resource.skills.length === 0 ? '—' : (
          <span style={{ display: 'inline-flex', gap: 4, flexWrap: 'wrap' }}>
            {resource.skills.map((s) => (
              <span key={s.skill_uuid} className="badge blue" style={{ fontSize: 11 }}>
                {s.skill_name} · {s.level}
              </span>
            ))}
          </span>
        )}
      </Row>
      <Row label="دسته‌بندی‌ها">
        {(resource.categories ?? []).length === 0 ? '—' : (
          <span style={{ display: 'inline-flex', gap: 4, flexWrap: 'wrap' }}>
            {(resource.categories ?? []).map((c) => (
              <span key={c.uuid} className="badge gray" style={{ fontSize: 11 }}>{c.name}</span>
            ))}
          </span>
        )}
      </Row>
      {attributes.map(([key, value]) => (
        <Row key={key} label={key}>{String(value)}</Row>
      ))}
    </div>

    {canUpdate && (
      <div className="card card-pad">
        <h2 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>
          وضعیت منبع
        </h2>
        <p className="field-hint" style={{ marginTop: 0, marginBottom: 14 }}>
          منبع غیرفعال در نوبت‌دهی پیشنهاد نمی‌شود. برای بستن فقط یک بازهٔ مشخص، از تب
          «غیرفعال‌سازی موقت» استفاده کنید.
        </p>

        <div className="toggle-row">
          <div>
            <div className="tr-title">{resource.active ? 'این منبع فعال است' : 'این منبع غیرفعال است'}</div>
            <div className="tr-desc">
              {resource.active
                ? 'در جستجوی وقت و رزرو نوبت در دسترس است.'
                : 'در جستجوی وقت و رزرو نوبت ظاهر نمی‌شود.'}
            </div>
          </div>
          <button
            type="button"
            className={resource.active ? 'btn secondary' : 'btn primary'}
            disabled={toggling}
            onClick={onToggleActive}
          >
            {resource.active ? 'غیرفعال کردن' : 'فعال کردن'}
          </button>
        </div>

        {/* پس‌زمینه عمداً خنثی می‌ماند: `.btn.danger` خودش `--danger-bg` است و روی
            ردیفِ هم‌رنگ نامرئی می‌شد. مرزِ قرمز به‌تنهایی هشدار را می‌رساند. */}
        <div className="toggle-row" style={{ marginTop: 10, borderColor: 'var(--danger)' }}>
          <div>
            <div className="tr-title">حذف منبع</div>
            <div className="tr-desc">برگشت‌پذیر نیست. اگر فقط موقتاً لازمش ندارید، غیرفعالش کنید.</div>
          </div>
          <button type="button" className="btn danger" onClick={onDelete}>حذف</button>
        </div>
      </div>
    )}
    </div>
  );
}