import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import { formatRial } from '../lib/utils';
import PageHeader from '../components/ui/PageHeader';

interface MonthlyEntry {
  month: string;
  paid: number;
  count: number;
}

interface FinancialSummary {
  total_paid: number;
  total_pending: number;
  total_refunded: number;
  count_paid: number;
  monthly_chart: MonthlyEntry[];
}

function KpiCard({ label, value, color }: { label: string; value: string; color: string }) {
  return (
    <div className="card" style={{ flex: '1 1 200px', minWidth: 0 }}>
      <div style={{ color: 'var(--text-3)', fontSize: 13, marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 700, color }}>{value}</div>
    </div>
  );
}

const BAR_MAX_HEIGHT = 120;

export default function MyFinancialPage() {
  const { data, isLoading } = useQuery<ApiResponse<FinancialSummary>>({
    queryKey: ['my-financial-summary'],
    queryFn: () => api.get('/api/v1/my/financial-summary'),
  });

  const summary = data?.data;
  const maxPaid = summary?.monthly_chart?.reduce((m, e) => Math.max(m, e.paid), 1) ?? 1;

  return (
    <div className="page">
      <PageHeader title="گزارش مالی" description="خلاصه پرداخت‌های بیماران" />

      {isLoading ? (
        <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>
      ) : (
        <>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 24 }}>
            <KpiCard label="مجموع پرداخت شده"   value={formatRial(summary?.total_paid ?? 0)}     color="var(--green)"   />
            <KpiCard label="در انتظار پرداخت"    value={formatRial(summary?.total_pending ?? 0)}  color="var(--orange)"  />
            <KpiCard label="مجموع استرداد"        value={formatRial(summary?.total_refunded ?? 0)} color="var(--red)"     />
            <KpiCard label="تعداد پرداخت موفق"   value={String(summary?.count_paid ?? 0)}          color="var(--primary)" />
          </div>

          <div className="card">
            <div style={{ fontWeight: 600, marginBottom: 20 }}>نمودار ۶ ماه اخیر</div>
            {summary?.monthly_chart?.length ? (
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, height: BAR_MAX_HEIGHT + 40 }}>
                {summary.monthly_chart.map((entry) => {
                  const barH = Math.max(4, Math.round((entry.paid / maxPaid) * BAR_MAX_HEIGHT));
                  return (
                    <div key={entry.month} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{formatRial(entry.paid)}</div>
                      <div
                        style={{ width: '100%', height: barH, borderRadius: 6, background: 'linear-gradient(to top, var(--primary), oklch(0.72 0.16 256))', transition: 'height 0.3s ease' }}
                        title={`${entry.month}: ${formatRial(entry.paid)} — ${entry.count} پرداخت`}
                      />
                      <div style={{ fontSize: 11, color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{entry.month}</div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <div style={{ textAlign: 'center', color: 'var(--text-3)', padding: 32 }}>داده‌ای برای نمایش وجود ندارد</div>
            )}
          </div>
        </>
      )}
    </div>
  );
}