import { useEffect, useMemo, useState } from 'react';

import type {
  CustomerAppointmentInfo,
  CustomerExamAddItem,
  CustomerInfo,
  PhysicalExamProgressItem,
} from '../../api';
import { editCustomerDetail } from '../../api';
import type { ExamClient } from '../../data/mockData';

interface ExamDetailPanelProps {
  client: ExamClient;
  customerInfo: CustomerInfo | null;
  appointmentInfo: CustomerAppointmentInfo | null;
  addItemInfoList: CustomerExamAddItem[] | null;
  progressList: PhysicalExamProgressItem[] | null;
  loading: boolean;
  onCustomerUpdated?: () => void;
}

const getMaritalCodeFromText = (text: string): number => {
  if (text.includes('未婚') || text === '未婚') return 10;
  if (text.includes('已婚') || text === '已婚') return 20;
  return 20;
};

const getMaritalText = (code: number): string => (code === 10 ? '未婚' : '已婚');

export const ExamDetailPanel = ({
  client,
  customerInfo,
  appointmentInfo,
  addItemInfoList,
  progressList,
  loading,
  onCustomerUpdated,
}: ExamDetailPanelProps) => {
  const basePhone = customerInfo?.phone || (client['mobile' as keyof ExamClient] as string | undefined) || '';
  const baseMaritalText =
    customerInfo?.patient_marital_status_name ||
    (client['maritalStatus' as keyof ExamClient] as string | undefined) ||
    '—';
  const baseMaritalCode = baseMaritalText === '—' ? 20 : getMaritalCodeFromText(baseMaritalText);

  const [phone, setPhone] = useState(basePhone || '—');
  const [maritalCode, setMaritalCode] = useState(baseMaritalCode);
  const [phoneEditing, setPhoneEditing] = useState(false);
  const [maritalEditing, setMaritalEditing] = useState(false);
  const [editLoading, setEditLoading] = useState(false);
  const [editMessage, setEditMessage] = useState<string | null>(null);

  // 当接口返回 customerInfo 后，更新 phone 和 maritalCode
  useEffect(() => {
    if (customerInfo && !phoneEditing) {
      const newPhone = customerInfo.phone || '—';
      setPhone(newPhone);
    }
  }, [customerInfo, phoneEditing]);

  useEffect(() => {
    if (customerInfo && !maritalEditing) {
      const newMaritalText = customerInfo.patient_marital_status_name;
      if (newMaritalText && newMaritalText !== '—') {
        const newMaritalCode = getMaritalCodeFromText(newMaritalText);
        setMaritalCode(newMaritalCode);
      }
    }
  }, [customerInfo, maritalEditing]);

  // const customerChannel = client.customerType === '团客' ? '团体客户' : '散客客户';
  // 等待接口返回后再显示，如果接口已返回但数据为空才显示 '—'
  const familyDoctor = loading
    ? ''
    : (customerInfo?.family_doctor_name || (client['familyDoctor' as keyof ExamClient] as string | undefined) || '—');
  const bookingTime = loading
    ? ''
    : (appointmentInfo?.appointment_time || (client['bookingTime' as keyof ExamClient] || '—'));
  const signTime = loading
    ? ''
    : (appointmentInfo?.sign_in_time || (client['signTime' as keyof ExamClient] || '—'));
  const addonSummary = loading
    ? ''
    : (addItemInfoList && addItemInfoList.length > 0
      ? addItemInfoList.map((i) => `${i.dept_name ?? ''} ${i.combination_name ?? ''}`.trim()).join('、')
      : client['addonSummary' as keyof ExamClient] || '—');

  const handleSavePhone = async () => {
    if (!phone || phone.trim() === '' || phone === '—') {
      setEditMessage('请输入联系电话');
      return;
    }

    const idNo = customerInfo?.id_no;
    if (!idNo) {
      setEditMessage('无法获取证件号，请稍后重试');
      return;
    }

    setEditLoading(true);
    setEditMessage(null);

    try {
      const res = await editCustomerDetail({
        marital_status: maritalCode,
        id_no: idNo,
        phone: phone.trim(),
      });

      if (res.Status === 200) {
        setEditMessage('保存成功');
        setPhoneEditing(false);
        onCustomerUpdated?.();
        setTimeout(() => setEditMessage(null), 2000);
      } else {
        setEditMessage(res.Message || '保存失败');
      }
    } catch (err) {
      console.error('保存客户信息失败', err);
      setEditMessage('保存失败，请稍后重试');
    } finally {
      setEditLoading(false);
    }
  };

  const handleSaveMarital = async () => {
    const idNo = customerInfo?.id_no;
    if (!idNo) {
      setEditMessage('无法获取证件号，请稍后重试');
      return;
    }

    setEditLoading(true);
    setEditMessage(null);

    try {
      const res = await editCustomerDetail({
        id_no: idNo,
        phone: phone.trim(),
        marital_status: maritalCode,
      });

      if (res.Status === 200) {
        setEditMessage('保存成功');
        setMaritalEditing(false);
        onCustomerUpdated?.();
        setTimeout(() => setEditMessage(null), 2000);
      } else {
        setEditMessage(res.Message || '保存失败');
      }
    } catch (err) {
      console.error('保存客户信息失败', err);
      setEditMessage('保存失败，请稍后重试');
    } finally {
      setEditLoading(false);
    }
  };

  const progressGroups = useMemo(() => {
    const checked: string[] = [];
    const abandoned: string[] = [];
    const pending: string[] = [];
    const deferred: string[] = [];
    (progressList || []).forEach((p) => {
      const name = p.project_name || p.department_name || '项目';
      switch (p.exam_status) {
        case 1:
          checked.push(name);
          break;
        case 2:
          abandoned.push(name);
          break;
        case 4:
          deferred.push(name);
          break;
        default:
          pending.push(name);
      }
    });
    return { checked, abandoned, pending, deferred };
  }, [progressList]);

  return (
    <div className='space-y-4 text-sm max-h-[calc(95vh-200px)] overflow-y-auto custom-scroll'>
      {loading && (
        <div className='text-xs text-gray-500'>
          加载中…
        </div>
      )}
      {editMessage && (
        <div
          className={`text-xs px-3 py-2 rounded-lg ${editMessage.includes('成功') ? 'bg-green-50 text-green-600' : 'bg-amber-50 text-amber-600'
            }`}
        >
          {editMessage}
        </div>
      )}
      <div className='space-y-2 text-xs text-gray-700'>
        <div className='text-gray-900 font-bold text-base'>基础信息</div>
        <div className='grid grid-cols-2 gap-x-8 gap-y-1'>
          <div className='flex items-center gap-3'>
            <div className='w-14 h-14 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden'>
              <div className='w-full h-full rounded-full bg-gray-300 flex items-center justify-center text-[10px] text-gray-500'>
                头像
              </div>
            </div>
            <div>
              姓名：<span className='text-gray-900'>{customerInfo?.customer_name || client.name}</span>
            </div>
          </div>
          <div>
            证件号：<span className='text-gray-900'>{loading ? '' : (customerInfo?.id_no || '—')}</span>
            <br />
            卡号：<span className='text-gray-900'>{loading ? '' : (customerInfo?.card_number || '—')}</span>
          </div>
          <div className='flex items-center'>
            <span>手机号：</span>
            {!phoneEditing ? (
              <span className='text-gray-900 flex items-center'>
                {phone}
                <button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setPhoneEditing(true)}>
                  ✏️ 编辑
                </button>
              </span>
            ) : (
              <span className='flex items-center gap-1'>
                <input
                  className='w-28 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  disabled={editLoading}
                />
                <button
                  className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
                  onClick={handleSavePhone}
                  disabled={editLoading}
                >
                  {editLoading ? '保存中...' : '保存'}
                </button>
                <button
                  className='px-2 py-0.5 rounded-xl border text-[11px]'
                  onClick={() => {
                    setPhoneEditing(false);
                    setPhone(basePhone || '—');
                    setEditMessage(null);
                  }}
                  disabled={editLoading}
                >
                  取消
                </button>
              </span>
            )}
          </div>
          <div>
            性别/年龄：
            <span className='text-gray-900'>
              {customerInfo?.gender_name || client.gender} / {customerInfo?.age || client.age}
            </span>
          </div>
          <div>
            客户级别：<span className='text-gray-900'>{client.level}</span>
          </div>
          {/* <div>
            所属渠道：<span className='text-gray-900'>{customerChannel}</span>
          </div> */}
          <div className='flex items-center'>
            <span>婚姻状况：</span>
            {!maritalEditing ? (
              <span className='text-gray-900 flex items-center'>
                {getMaritalText(maritalCode)}
                <button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setMaritalEditing(true)}>
                  ✏️ 编辑
                </button>
              </span>
            ) : (
              <span className='flex items-center gap-2'>
                <label className='flex items-center gap-1 cursor-pointer'>
                  <input
                    type='radio'
                    name='marital'
                    value='10'
                    checked={maritalCode === 10}
                    onChange={(e) => setMaritalCode(Number(e.target.value))}
                    disabled={editLoading}
                    className='w-3 h-3'
                  />
                  <span className='text-[11px]'>未婚</span>
                </label>
                <label className='flex items-center gap-1 cursor-pointer'>
                  <input
                    type='radio'
                    name='marital'
                    value='20'
                    checked={maritalCode === 20}
                    onChange={(e) => setMaritalCode(Number(e.target.value))}
                    disabled={editLoading}
                    className='w-3 h-3'
                  />
                  <span className='text-[11px]'>已婚</span>
                </label>
                <button
                  className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
                  onClick={handleSaveMarital}
                  disabled={editLoading}
                >
                  {editLoading ? '保存中...' : '保存'}
                </button>
                <button
                  className='px-2 py-0.5 rounded-xl border text-[11px]'
                  onClick={() => {
                    setMaritalEditing(false);
                    setMaritalCode(baseMaritalCode);
                    setEditMessage(null);
                  }}
                  disabled={editLoading}
                >
                  取消
                </button>
              </span>
            )}
          </div>
          <div>
            家医：<span className='text-gray-900'>{familyDoctor}</span>
          </div>
          <div>
            团标签：<span className='text-gray-900'>{loading ? '' : ((customerInfo?.customer_type ?? 0) === 1 ? '团客' : '散客')}</span>
          </div>
        </div>
      </div>

      <div className='space-y-2 text-xs text-gray-700'>
        <div className='text-gray-900 font-bold text-base'>预约信息</div>
        <div className='grid grid-cols-2 gap-x-8 gap-y-1'>
          <div>
            预约时间：<span className='text-gray-900'>{bookingTime as string}</span>
          </div>
          <div>
            签到时间：<span className='text-gray-900'>{signTime as string}</span>
          </div>
          <div>
            已消耗时长：
            <span className='text-gray-900'>
              {loading ? '' : (appointmentInfo?.time_spent || client.elapsed)}
            </span>
          </div>
          <div className='col-span-2'>
            体检套餐名称：<span className='text-gray-900'>{client.packageName}</span>
          </div>
          <div className='col-span-2'>
            预约备注：
            <span className='text-gray-900'>
              {loading ? '' : ((client['appointmentRemarks' as keyof ExamClient] as string | null | undefined) || '—')}
            </span>
          </div>
          <div className='col-span-2'>
            加项内容：<span className='text-gray-900'>{addonSummary as string}</span>
          </div>
        </div>
      </div>

      <div className='grid grid-cols-2 gap-4 text-xs'>
        <div className='p-3 rounded-2xl bg-green-50 border max-h-48 overflow-auto custom-scroll'>
          <div className='font-medium mb-2'>已查项目 共 {progressGroups.checked.length} 项</div>
          <div className='flex flex-wrap gap-2'>
            {(progressGroups.checked.length ? progressGroups.checked : client.checkedItems).map((i) => (
              <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
                {i}
              </span>
            ))}
          </div>
        </div>
        <div className='p-3 rounded-2xl bg-red-50 border max-h-48 overflow-auto custom-scroll'>
          <div className='font-medium mb-2'>弃检项目 共 {progressGroups.abandoned.length} 项</div>
          <div className='flex flex-wrap gap-2'>
            {progressGroups.abandoned.length ? (
              progressGroups.abandoned.map((i) => (
                <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
                  {i}
                </span>
              ))
            ) : (
              <span className='text-gray-400 text-[11px]'>暂无弃检项目</span>
            )}
          </div>
        </div>
        <div className='p-3 rounded-2xl bg-yellow-50 border max-h-48 overflow-auto custom-scroll'>
          <div className='font-medium mb-2'>未查项目 共 {progressGroups.pending.length} 项</div>
          <div className='flex flex-wrap gap-2'>
            {(progressGroups.pending.length ? progressGroups.pending : client.pendingItems).map((i) => (
              <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
                {i}
              </span>
            ))}
          </div>
        </div>
        <div className='p-3 rounded-2xl bg-blue-50 border max-h-48 overflow-auto custom-scroll'>
          <div className='font-medium mb-2'>延期项目 共 {progressGroups.deferred.length} 项</div>
          <div className='flex flex-wrap gap-2'>
            {progressGroups.deferred.length ? (
              progressGroups.deferred.map((i) => (
                <span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
                  {i}
                </span>
              ))
            ) : (
              <span className='text-gray-400 text-[11px]'>暂无延期项目</span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};