import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { ClockIcon, Squares2X2Icon } from '@heroicons/react/24/outline';
import PageHeader from '../components/ui/PageHeader';
import DataTable, { type Column } from '../components/ui/DataTable';
import { ActiveBadge } from '../components/ui/StatusBadge';
import { useUrlState } from '../hooks/useUrlState';
import { usePermissions } from '../hooks/usePermissions';
import { useBranches } from '../hooks/useBranches';
import type { Branch } from '../types';

/**
 * شعبه‌ها — همان محل‌های نوبت‌دهی محیط جاری.
 *
 * این صفحه شعبه نمی‌سازد و نام/آدرس را ویرایش نمی‌کند؛ آن کار از قبل در جزئیات
 * کلینیک و پزشک هست و تکرارش دو منبع حقیقت می‌ساخت. اینجا فقط دروازهٔ ساعت کاری و
 * اتاق‌هاست، به‌علاوهٔ دو ویژگی شعبه‌ای: فعال‌بودن و منطقهٔ زمانی.
 */
export default function BranchesPage() {
  const { branches, loading, update } = useBranches();
  const { can } = usePermissions();
  const canUpdate = can('appointment_settings', 'update');

  const [urlState, setUrlState] = useUrlState({ search: '', status: '' });

  const rows = useMemo(() => {
    const q = urlState.search.trim();
    return branches.filter((b) => {
      const haystack = `${b.name ?? ''} ${b.address ?? ''} ${b.telephone ?? ''}`;
      const matchesQuery = q === '' || haystack.includes(q);
      const matchesStatus =
        urlState.status === '' ||
        (urlState.status === 'active' ? b.active : !b.active);
      return matchesQuery && matchesStatus;
    });
  }, [branches, urlState.search, urlState.status]);

  const activeCount = branches.filter((b) => b.active).length;

  const columns: Column<Branch>[] = [
    {
      key: 'name',
      header: 'شعبه',
      render: (b) => (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontWeight: 600 }}>{b.name || 'بدون نام'}</span>
          <span style={{ fontSize: 12, color: 'var(--text-3)' }}>
            {b.type === 'clinic' ? b.clinic_name || 'کلینیک' : 'مطب شخصی'}
            {b.city ? ` · ${b.city.name}` : ''}
          </span>
        </div>
      ),
    },
    {
      key: 'address',
      header: 'آدرس',
      render: (b) => (
        <span style={{ fontSize: 13, color: 'var(--text-2)' }}>{b.address || '—'}</span>
      ),
    },
    {
      key: 'telephone',
      header: 'تلفن',
      render: (b) => <span style={{ fontSize: 13 }}>{b.telephone || '—'}</span>,
    },
    {
      key: 'working_hours',
      header: 'ساعت کاری',
      render: (b) =>
        b.working_hours_defined ? (
          <span className="badge green"><span className="bdot" />تعریف‌شده</span>
        ) : (
          <span style={{ fontSize: 12, color: 'var(--text-3)' }}>تعریف‌نشده</span>
        ),
    },
    {
      key: 'rooms_count',
      header: 'اتاق فعال',
      render: (b) => <span style={{ fontSize: 13 }}>{b.rooms_count ?? 0}</span>,
    },
    {
      key: 'timezone',
      header: 'منطقهٔ زمانی',
      render: (b) => <span style={{ fontSize: 12, color: 'var(--text-2)' }}>{b.timezone}</span>,
    },
    {
      key: 'active',
      header: 'وضعیت',
      render: (b) => <ActiveBadge active={b.active} />,
    },
  ];

  return (
    <div className="fade-in">
      <PageHeader
        title="شعبه‌ها و اتاق‌ها"
        description="ساعت کاری هر محل نوبت‌دهی و اتاق‌های آن. نام و آدرس شعبه در صفحهٔ همان کلینیک یا پزشک ویرایش می‌شود."
        backTo="/admin/settings-menu"
      />

      <DataTable
        columns={columns}
        data={rows}
        loading={loading}
        searchValue={urlState.search}
        onSearchChange={(v) => setUrlState({ search: v })}
        searchPlaceholder="جستجو در شعبه‌ها..."
        emptyMessage="هیچ شعبه‌ای برای این محیط ثبت نشده است"
        headerExtra={
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: 'auto' }}>
            <StatusFilter
              value={urlState.status}
              onChange={(v) => setUrlState({ status: v })}
            />
          </div>
        }
        actions={(b) => (
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Link className="btn secondary sm" to={`/admin/branches/${b.uuid}/working-hours`}>
              <ClockIcon style={{ width: 15 }} /> ساعت کاری
            </Link>
            <Link className="btn secondary sm" to={`/admin/branches/${b.uuid}/rooms`}>
              <Squares2X2Icon style={{ width: 15 }} /> اتاق‌ها
            </Link>
            {canUpdate && (
              <button
                type="button"
                className="btn secondary sm"
                disabled={update.isPending}
                title={
                  b.active && activeCount === 1
                    ? 'با غیرفعال کردن این شعبه، هیچ شعبهٔ فعالی باقی نمی‌ماند'
                    : undefined
                }
                onClick={() => {
                  if (
                    b.active &&
                    activeCount === 1 &&
                    !window.confirm('این تنها شعبهٔ فعال است. با غیرفعال کردن آن، هیچ شعبهٔ فعالی باقی نمی‌ماند. ادامه می‌دهید؟')
                  ) {
                    return;
                  }
                  update.mutate({ uuid: b.uuid, d: { active: !b.active } });
                }}
              >
                {b.active ? 'غیرفعال کردن' : 'فعال کردن'}
              </button>
            )}
          </div>
        )}
      />
    </div>
  );
}

function StatusFilter({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const options = [
    { value: '', label: 'همه' },
    { value: 'active', label: 'فعال' },
    { value: 'inactive', label: 'غیرفعال' },
  ];

  return (
    <div style={{ display: 'flex', gap: 4 }}>
      {options.map((o) => (
        <button
          key={o.value}
          type="button"
          className={`btn sm ${value === o.value ? 'primary' : 'secondary'}`}
          onClick={() => onChange(o.value)}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}