import { useState } from 'react';
import { BOOKING_DOCTORS } from '../../data/mockData';
import { Button, Input, Select } from '../ui';

interface BookingModalProps {
  doctor: (typeof BOOKING_DOCTORS)[number];
  onClose: () => void;
}

export const BookingModal = ({ doctor, onClose }: BookingModalProps) => {
  const [paymentMethod, setPaymentMethod] = useState('自费');
  const [isCustomized, setIsCustomized] = useState('否');

  return (
    <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
      <div className='w-[520px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
        <div className='px-4 py-3 border-b flex items-center justify-between'>
          <div className='font-semibold'>预约申请 · {doctor.name}</div>
          <button className='text-xs text-gray-500' onClick={onClose}>
            关闭
          </button>
        </div>
        <div className='px-4 py-4 bg-gray-50/60 space-y-3 text-xs text-gray-700'>
          <div className='grid grid-cols-2 gap-3'>
            <div>
              付费方式
              <Select
                options={['自费', '单位结算']}
                value={paymentMethod}
                onChange={setPaymentMethod}
              />
            </div>
            <div>
              产品名称
              <Input placeholder='如：专家门诊咨询' className='mt-1' />
            </div>
            <div>
              是否定制
              <Select options={['否', '是']} value={isCustomized} onChange={setIsCustomized} />
            </div>
            <div>
              期望预约时间
              <Input placeholder='例如：2025-11-20 上午' className='mt-1' />
            </div>
          </div>
          <div>
            备注
            <textarea
              className='w-full mt-1 rounded-2xl border px-3 py-2 text-xs outline-none focus:ring-2 focus:ring-gray-200 min-h-[72px]'
              placeholder='可填写病情简要、既往史、特殊需求等信息'
            />
          </div>
          <div className='flex items-center justify-between text-[11px] text-gray-500'>
            <span>
              医生：{doctor.name}（{doctor.dept}）
            </span>
            <Button>提交预约申请</Button>
          </div>
        </div>
      </div>
    </div>
  );
};