import { CalendarDays, ChevronDown, Download, Loader2 } from 'lucide-react';
import { AnimatePresence, motion } from 'motion/react';
import type { FlowType } from '../../api';
import { FLOW_META } from '../FlowDetailModal';
import type { FlowStatisticsCardProps } from './types';
import { FlowDateRangePicker } from './FlowDateRangePicker';

const FLOW_TYPES: FlowType[] = ['delivered', 'returned', 'replaced'];

export function FlowStatisticsCard({
  flowRange,
  setFlowRange,
  flowLoading,
  flowStats,
  exportFlowDetails,
  flowDailyExpanded,
  setFlowDailyExpanded,
  setSelectedFlow,
}: FlowStatisticsCardProps) {
  return (
    <div className="grid grid-cols-1 gap-3 mb-4">
      <div data-testid="asset-flow-card" className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
        <div className="flex items-center justify-between gap-3">
          <div className="min-w-0">
            <div className="flex items-center gap-2 text-[13px] font-black text-slate-700">
              <CalendarDays size={14} className="text-blue-500" />
              <span>交还车统计（车次）</span>
              {flowLoading && <Loader2 size={12} className="animate-spin text-slate-400" />}
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => exportFlowDetails()}
              disabled={!flowStats?.details.length}
              className="inline-flex h-8 items-center justify-center gap-1 rounded-xl border border-slate-200 bg-slate-50 px-2.5 text-[11px] font-black text-slate-600 transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
            >
              <Download size={13} />
              导出
            </button>
          </div>
        </div>
        <p className="mt-1 text-[11px] text-slate-400">按运维签章时间统计；交车包含替换交车，合计＝交车＋还车，同车多笔业务分别计次。</p>
        <FlowDateRangePicker value={flowRange} onChange={setFlowRange} />
        <div className="mt-2 rounded-2xl border border-slate-100 bg-slate-50/70 px-2 py-2.5">
          <div className="grid grid-cols-4 items-center text-center">
            <div className="px-2">
              <div className="text-lg font-black leading-none text-slate-950">{flowStats?.totals.total ?? 0}</div>
              <div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
            </div>
            {FLOW_TYPES.map((type) => (
              <button key={type} type="button"
                data-testid={`asset-flow-total-${type}`}
                disabled={flowLoading || !flowStats?.totals[type]}
                onClick={() => flowStats && setSelectedFlow({ start: flowStats.start, end: flowStats.end, type })}
                className="border-l border-slate-200/70 px-2 transition hover:bg-slate-100 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-35">
                <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>
                  {flowStats?.totals[type] ?? 0}
                </div>
                <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
              </button>
            ))}
          </div>
        </div>
        <button
          type="button"
          data-testid="asset-flow-daily-toggle"
          onClick={() => setFlowDailyExpanded((prev) => !prev)}
          className="mt-2 flex w-full items-center justify-between rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-[12px] font-black text-slate-500 transition hover:border-blue-100 hover:bg-blue-50/50 hover:text-blue-600"
        >
          <span>{flowDailyExpanded ? '收起每日明细' : '展开每日明细'}</span>
          <span className="flex items-center gap-2 text-[11px] text-slate-400">
            {flowStats?.daily.length ?? 0} 天
            <ChevronDown size={15} className={`transition-transform ${flowDailyExpanded ? 'rotate-180' : ''}`} />
          </span>
        </button>
        <AnimatePresence initial={false}>
          {flowDailyExpanded && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              className="overflow-hidden"
            >
              <div className="mt-3 max-h-[280px] space-y-2 overflow-y-auto pr-1">
                {flowLoading && (
                  <div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">正在加载交还车统计...</div>
                )}
                {!flowLoading && flowStats?.daily.slice().sort((a, b) => b.date.localeCompare(a.date)).map((day) => (
                  <div key={day.date} className="rounded-2xl border border-slate-100 bg-white px-3 py-3 shadow-sm">
                    <div className="flex items-center justify-between">
                      <div className="text-[11px] font-black text-slate-400">{day.date}</div>
                      <div className="text-[10px] font-bold italic text-slate-300">运维签章时间</div>
                    </div>
                    <div className="mt-2 grid grid-cols-4 items-center text-center">
                      <div className="px-2">
                        <div className="text-lg font-black leading-none text-slate-900">{day.total}</div>
                        <div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
                      </div>
                      {FLOW_TYPES.map((type) => {
                        const count = day[type];
                        return (
                          <button
                            key={type}
                            type="button"
                            data-testid={`asset-flow-cell-${day.date}-${type}`}
                            disabled={count === 0}
                            onClick={() => setSelectedFlow({ date: day.date, type })}
                            className="border-l border-slate-100 px-2 text-center transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-35"
                          >
                            <div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>{count}</div>
                            <div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
                          </button>
                        );
                      })}
                    </div>
                  </div>
                ))}
                {!flowLoading && !flowStats?.daily.length && (
                  <div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">暂无交换车数据</div>
                )}
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}