import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { ServiceSection, ServiceItem, ClinicStaff } from '../types';
import { formatRial } from '../lib/utils';
import Modal from '../components/ui/Modal';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import PageHeader from '../components/ui/PageHeader';
import SearchableSelect from '../components/ui/SearchableSelect';

const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
const itemSchema = z.object({
  name:        z.string().min(1, 'نام سرویس الزامی است'),
  price_rials: z.coerce.number().min(0, 'مبلغ نمی‌تواند منفی باشد'),
  staff_uuid:  z.string().optional(),
});
type SectionForm = z.infer<typeof sectionSchema>;
type ItemForm    = z.infer<typeof itemSchema>;

const EMPTY_SECTIONS: ServiceSection[] = [];
const EMPTY_ITEMS: ServiceItem[] = [];

export default function ClinicServicesPage() {
  const qc = useQueryClient();

  const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
  const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
  const [deleteSection, setDeleteSection] = useState<ServiceSection | null>(null);
  const [itemModal, setItemModal] = useState<'create' | ServiceItem | null>(null);
  const [deleteItem, setDeleteItem] = useState<ServiceItem | null>(null);

  const { data: sectionsData, isLoading: sectionsLoading } = useQuery<ApiResponse<ServiceSection[]>>({
    queryKey: ['service-sections'],
    queryFn: () => api.get('/api/v1/service-sections'),
  });

  const { data: itemsData, isLoading: itemsLoading } = useQuery<ApiResponse<ServiceItem[]>>({
    queryKey: ['service-items', selectedSection?.uuid],
    queryFn: () => api.get(`/api/v1/service-items/${selectedSection!.uuid}`),
    enabled: !!selectedSection,
  });

  const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
    queryKey: ['staff'],
    queryFn: () => api.get('/api/v1/staff'),
  });

  const sections = sectionsData?.data ?? EMPTY_SECTIONS;
  const items    = itemsData?.data ?? EMPTY_ITEMS;
  const staffOptions = (staffData?.data ?? []).filter((s) => s.active).map((s) => ({
    value: s.uuid,
    label: s.full_name,
  }));

  const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
  const itemForm    = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });

  const createSection = useMutation({
    mutationFn: (body: SectionForm) => api.post('/api/v1/service-section', body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); sectionForm.reset(); toast.success('بخش ایجاد شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const editSection = useMutation({
    mutationFn: ({ uuid, body }: { uuid: string; body: SectionForm }) =>
      api.patch(`/api/v1/service-section/${uuid}`, body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); toast.success('بخش ویرایش شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const delSection = useMutation({
    mutationFn: (uuid: string) => api.delete(`/api/v1/service-section/${uuid}`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['service-sections'] });
      if (selectedSection?.uuid === deleteSection?.uuid) setSelectedSection(null);
      setDeleteSection(null);
      toast.success('بخش حذف شد');
    },
    onError: (e: any) => { toast.error(e.message); setDeleteSection(null); },
  });

  const createItem = useMutation({
    mutationFn: (body: ItemForm & { section_uuid: string }) => api.post('/api/v1/service-item', body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); itemForm.reset(); toast.success('سرویس ایجاد شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const editItem = useMutation({
    mutationFn: ({ uuid, body }: { uuid: string; body: ItemForm }) =>
      api.patch(`/api/v1/service-item/${uuid}`, body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const delItem = useMutation({
    mutationFn: (uuid: string) => api.delete(`/api/v1/service-item/${uuid}`),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setDeleteItem(null); toast.success('سرویس حذف شد'); },
    onError: (e: any) => {
      if (e.code === 'ERR_SERVICE_ITEM_IN_USE') {
        toast.error('این سرویس در پرونده بیمار استفاده شده و قابل حذف نیست');
      } else {
        toast.error(e.message);
      }
      setDeleteItem(null);
    },
  });

  const openEditSection = (s: ServiceSection) => {
    sectionForm.reset({ name: s.name });
    setSectionModal(s);
  };

  const openEditItem = (item: ServiceItem) => {
    itemForm.reset({
      name: item.name,
      price_rials: item.price_rials,
      staff_uuid: item.staff?.uuid ?? '',
    });
    setItemModal(item);
  };

  return (
    <>
      <PageHeader title="سرویس‌های کلینیک" description="مدیریت بخش‌ها و سرویس‌های کلینیک" />

      <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 16, alignItems: 'start' }}>
        {/* ستون بخش‌ها */}
        <div className="card">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <b style={{ fontSize: 14 }}>بخش‌ها</b>
            <button className="btn primary sm" onClick={() => { sectionForm.reset(); setSectionModal('create'); }}>
              <PlusIcon style={{ width: 14 }} />
            </button>
          </div>
          {sectionsLoading ? (
            <div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
          ) : sections.length === 0 ? (
            <div style={{ color: 'var(--text-3)', fontSize: 13 }}>بخشی ثبت نشده است</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {sections.map((s) => (
                <div
                  key={s.uuid}
                  style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    padding: '8px 10px', borderRadius: 6, cursor: 'pointer',
                    background: selectedSection?.uuid === s.uuid ? 'var(--primary-subtle)' : 'transparent',
                    border: selectedSection?.uuid === s.uuid ? '1px solid var(--primary)' : '1px solid transparent',
                  }}
                  onClick={() => setSelectedSection(s)}
                >
                  <span style={{ fontSize: 13 }}>{s.name}</span>
                  <div style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
                    <button className="btn sm" onClick={() => openEditSection(s)}><PencilIcon style={{ width: 13 }} /></button>
                    <button className="btn sm" onClick={() => setDeleteSection(s)}><TrashIcon style={{ width: 13 }} /></button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* ستون آیتم‌ها */}
        <div className="card">
          {!selectedSection ? (
            <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)' }}>
              یک بخش را از سمت راست انتخاب کنید
            </div>
          ) : (
            <>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                <b style={{ fontSize: 14 }}>سرویس‌های «{selectedSection.name}»</b>
                <button
                  className="btn primary sm"
                  onClick={() => { itemForm.reset({ price_rials: 0, staff_uuid: '' }); setItemModal('create'); }}
                >
                  <PlusIcon style={{ width: 14 }} /> سرویس جدید
                </button>
              </div>
              {itemsLoading ? (
                <div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
              ) : items.length === 0 ? (
                <div style={{ color: 'var(--text-3)', fontSize: 13 }}>سرویسی ثبت نشده است</div>
              ) : (
                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
                  <thead>
                    <tr style={{ borderBottom: '1px solid var(--border)' }}>
                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>نام سرویس</th>
                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>قیمت</th>
                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>پرسنل مسئول</th>
                      <th style={{ textAlign: 'right', padding: '8px 4px' }}>عملیات</th>
                    </tr>
                  </thead>
                  <tbody>
                    {items.map((item) => (
                      <tr key={item.uuid} style={{ borderBottom: '1px solid var(--border)' }}>
                        <td style={{ padding: '8px 4px' }}>{item.name}</td>
                        <td style={{ padding: '8px 4px' }}>{formatRial(item.price_rials)}</td>
                        <td style={{ padding: '8px 4px' }}>{item.staff?.full_name ?? '—'}</td>
                        <td style={{ padding: '8px 4px' }}>
                          <div style={{ display: 'flex', gap: 4 }}>
                            <button className="btn sm" onClick={() => openEditItem(item)}><PencilIcon style={{ width: 13 }} /></button>
                            <button className="btn sm" onClick={() => setDeleteItem(item)}><TrashIcon style={{ width: 13 }} /></button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </>
          )}
        </div>
      </div>

      {/* Modal بخش */}
      <Modal
        open={sectionModal !== null}
        onClose={() => setSectionModal(null)}
        title={sectionModal === 'create' ? 'بخش جدید' : 'ویرایش بخش'}
      >
        <form onSubmit={sectionForm.handleSubmit((d) => {
          if (sectionModal === 'create') createSection.mutate(d);
          else if (sectionModal !== null && typeof sectionModal === 'object') editSection.mutate({ uuid: sectionModal.uuid, body: d });
        })}>
          <div className="field">
            <label>نام بخش *</label>
            <input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" />
            {sectionForm.formState.errors.name && (
              <span className="field-error">{sectionForm.formState.errors.name.message}</span>
            )}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button type="submit" className="btn primary" disabled={createSection.isPending || editSection.isPending}>ذخیره</button>
            <button type="button" className="btn" onClick={() => setSectionModal(null)}>انصراف</button>
          </div>
        </form>
      </Modal>

      {/* Modal آیتم */}
      <Modal
        open={itemModal !== null}
        onClose={() => setItemModal(null)}
        title={itemModal === 'create' ? 'سرویس جدید' : 'ویرایش سرویس'}
      >
        <form onSubmit={itemForm.handleSubmit((d) => {
          if (itemModal === 'create' && selectedSection) {
            createItem.mutate({ ...d, section_uuid: selectedSection.uuid });
          } else if (itemModal !== null && typeof itemModal === 'object') {
            editItem.mutate({ uuid: itemModal.uuid, body: d });
          }
        })}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div className="field">
              <label>نام سرویس *</label>
              <input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" />
              {itemForm.formState.errors.name && (
                <span className="field-error">{itemForm.formState.errors.name.message}</span>
              )}
            </div>
            <div className="field">
              <label>قیمت (ریال) *</label>
              <input {...itemForm.register('price_rials')} type="number" min={0} placeholder="85000" dir="ltr" />
            </div>
            <div className="field">
              <label>پرسنل مسئول</label>
              <SearchableSelect
                options={staffOptions}
                value={itemForm.watch('staff_uuid') ?? ''}
                onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : undefined)}
                placeholder="انتخاب پرسنل (اختیاری)"
                isClearable
              />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
            <button type="submit" className="btn primary" disabled={createItem.isPending || editItem.isPending}>ذخیره</button>
            <button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
          </div>
        </form>
      </Modal>

      {/* Confirm حذف بخش */}
      <ConfirmDialog
        open={!!deleteSection}
        title="حذف بخش"
        message={`آیا مطمئن هستید که می‌خواهید بخش «${deleteSection?.name}» را حذف کنید؟`}
        confirmLabel="حذف"
        onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
        onCancel={() => setDeleteSection(null)}
        loading={delSection.isPending}
      />

      {/* Confirm حذف آیتم */}
      <ConfirmDialog
        open={!!deleteItem}
        title="حذف سرویس"
        message={`آیا مطمئن هستید که می‌خواهید سرویس «${deleteItem?.name}» را حذف کنید؟`}
        confirmLabel="حذف"
        onConfirm={() => deleteItem && delItem.mutate(deleteItem.uuid)}
        onCancel={() => setDeleteItem(null)}
        loading={delItem.isPending}
      />
    </>
  );
}
