import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { PatientRecord } from '../types';
import type { SessionCardData } from '../components/SessionServiceCard';
import SessionStepper from '../components/SessionStepper';
import PaymentStep from '../components/session/PaymentStep';
import DetailsStep from '../components/session/DetailsStep';
import { ArrowLeftPH, ArrowLeftD, CloseModalD } from '../components/icons/FilesServiceIcons';

/**
 * تکمیل پرداخت مراجعه — پورت صفحه‌ی tauri /files/create-service در حالت payment:
 * استپر دوگامی «پرداخت ← جزییات» با تخفیف تسویه، پرداخت چندتکه و تاریخ پرداخت.
 * بدنه‌ی گام‌ها در components/session/{PaymentStep,DetailsStep} مشترک با NewSessionPage است.
 */
export default function SessionPaymentPage() {
  const { recordUuid = '', sessionUuid = '' } = useParams();
  const nav = useNavigate();

  const steps = ['پرداخت', 'جزییات'];
  const [activeStep, setActiveStep] = useState(0);

  const recordQ = useQuery<ApiResponse<PatientRecord>>({
    queryKey: ['patient-detail', recordUuid],
    queryFn: () => api.get(`/api/v1/patient/${recordUuid}`),
    enabled: !!recordUuid,
  });
  const record = recordQ.data?.data as PatientRecord | undefined;
  const patientName = record?.user_name || record?.profile?.full_name || '—';

  const sessionsQ = useQuery<ApiResponse<SessionCardData[]>>({
    queryKey: ['patient-sessions', recordUuid],
    queryFn: () => api.get(`/api/v1/patient/${recordUuid}/sessions`),
    enabled: !!recordUuid,
  });
  const session = (sessionsQ.data?.data ?? []).find((s) => s.uuid === sessionUuid);

  const walletQ = useQuery<ApiResponse<{ balance_rials: number }>>({
    queryKey: ['patient-wallet', recordUuid],
    queryFn: () => api.get(`/api/v1/patient/${recordUuid}/wallet`),
    enabled: !!recordUuid,
  });
  const walletBalance = (walletQ.data?.data as any)?.balance_rials ?? 0;

  const finish = () => nav(`/admin/patients/${recordUuid}?tab=services`);

  if (sessionsQ.isLoading) {
    return <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>در حال بارگذاری...</div>;
  }
  if (!session) {
    return <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>مراجعه یافت نشد</div>;
  }

  return (
    <div className="fade-in" style={{ width: '100%' }}>
      {/* breadcrumb — tauri AddService header */}
      <div style={{ display: 'flex', justifyContent: 'flex-start', marginBottom: 30 }}>
        <div className="dark:text-[#A1A1A1]" style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6B7280', fontSize: 12, padding: '0 16px' }}>
          <div
            onClick={() => nav(-1)}
            className="bg-white dark:bg-[#222433]"
            style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 8px', borderRadius: 12, cursor: 'pointer' }}
          >
            <ArrowLeftPH style={{ width: 18, height: 18, rotate: '180deg' }} />
            <span>بازگشت</span>
          </div>
          <ArrowLeftD />
          <span>پرونده</span>
          <ArrowLeftD />
          <span className="dark:text-[#D7D8ED]" style={{ color: '#111827' }}>{patientName}</span>
        </div>
      </div>

      {/* card — tauri width 748 centered */}
      <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
        <div className="bg-white dark:bg-[#222433]" style={{ width: 748, maxWidth: '100%', padding: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
            <button
              type="button"
              aria-label="بستن"
              onClick={() => nav(-1)}
              style={{ minWidth: 40, height: 40, marginBottom: 8, borderRadius: '50%', border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
            >
              <CloseModalD />
            </button>
          </div>

          <SessionStepper activeStep={activeStep} steps={steps} />

          {activeStep === 0 ? (
            <PaymentStep
              recordUuid={recordUuid}
              session={session}
              walletBalance={walletBalance}
              onContinue={() => setActiveStep(1)}
              onCancel={() => nav(-1)}
            />
          ) : (
            <DetailsStep session={session} recordUuid={recordUuid} onBack={() => setActiveStep(0)} onFinish={finish} />
          )}
        </div>
      </div>
    </div>
  );
}