"use client";

import { useQuery } from "@tanstack/react-query";
import { Spinner } from "@heroui/react";
import { TagDollar, ChartLine } from "@gravity-ui/icons";
import { api, type PriceTier, type TariffConfig, type TariffSlot } from "@/lib/api";

// ── Tier meta (matches admin pricing editor colors) ───────────────────────────

const TIER_META: Record<
  PriceTier,
  { label: string; sublabel: string; cellBg: string; text: string; border: string; dot: string }
> = {
  peak: {
    label: "峰时",
    sublabel: "高峰时段",
    cellBg: "bg-orange-500/70",
    text: "text-orange-500",
    border: "border-orange-500/40",
    dot: "bg-orange-500",
  },
  flat: {
    label: "平时",
    sublabel: "肩峰时段",
    cellBg: "bg-neutral-400/45",
    text: "text-neutral-400",
    border: "border-neutral-400/40",
    dot: "bg-neutral-400",
  },
  valley: {
    label: "谷时",
    sublabel: "低谷时段",
    cellBg: "bg-blue-500/65",
    text: "text-blue-500",
    border: "border-blue-500/40",
    dot: "bg-blue-500",
  },
};

// ── Slot cards ────────────────────────────────────────────────────────────────

function SlotCards({ tariff }: { tariff: TariffConfig }) {
  const sorted = [...tariff.slots].sort((a, b) => a.start - b.start);
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
      {sorted.map((slot: TariffSlot, i) => {
        const meta = TIER_META[slot.tier];
        const p = tariff.prices[slot.tier];
        const total = p.electricityPrice + p.serviceFee;
        return (
          <div key={i} className={`rounded-xl border bg-surface p-4 space-y-3 ${meta.border}`}>
            {/* Header */}
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className={`size-2.5 rounded-sm ${meta.cellBg}`} />
                <span className={`text-sm font-semibold ${meta.text}`}>{meta.label}</span>
                <span className="text-xs text-muted">{meta.sublabel}</span>
              </div>
              <span className="tabular-nums text-xs font-medium text-muted">
                {String(slot.start).padStart(2, "0")}:00 – {String(slot.end).padStart(2, "0")}:00
              </span>
            </div>
            {/* Prices */}
            <div className="divide-y divide-border rounded-lg border border-border overflow-hidden text-sm">
              <div className="flex divide-x divide-border">
                <div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
                  <span className="text-muted">电费</span>
                  <span className="tabular-nums font-medium text-foreground">
                    ¥{p.electricityPrice.toFixed(4)}
                    <span className="text-xs text-muted font-normal">/kWh</span>
                  </span>
                </div>
                <div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
                  <span className="text-muted">服务费</span>
                  <span className="tabular-nums font-medium text-foreground">
                    ¥{p.serviceFee.toFixed(4)}
                    <span className="text-xs text-muted font-normal">/kWh</span>
                  </span>
                </div>
              </div>
              <div className="flex items-center justify-between bg-surface px-3 py-2">
                <span className="font-semibold text-foreground">单价</span>
                <span className={`tabular-nums font-bold ${meta.text}`}>
                  ¥{total.toFixed(4)}
                  <span className="text-xs font-normal">/kWh</span>
                </span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ── Page ─────────────────────────────────────────────────────────────────────

export default function PricingPage() {
  const {
    data: tariff,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["tariff"],
    queryFn: () => api.tariff.get(),
  });

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <div className="flex size-9 items-center justify-center rounded-xl bg-accent/10">
          <TagDollar className="size-5 text-accent" />
        </div>
        <div>
          <h1 className="text-xl font-bold text-foreground">电价标准</h1>
          <p className="text-sm text-muted">今日实行的电价标准</p>
        </div>
      </div>

      {isLoading && (
        <div className="flex justify-center py-20">
          <Spinner />
        </div>
      )}

      {isError && (
        <div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
          电价信息加载失败，请刷新页面重试。
        </div>
      )}

      {!isLoading && !isError && !tariff && (
        <div className="rounded-2xl border border-border bg-surface px-6 py-12 text-center">
          <TagDollar className="mx-auto mb-3 size-10 text-muted" />
          <p className="font-medium text-foreground">尚未配置峰谷电价</p>
          <p className="mt-1 text-sm text-muted">
            各充电桩使用独立固定电价，请查看充电桩详情页了解具体费率。
          </p>
        </div>
      )}

      {tariff && (
        <>
          {/* Timeline + legend */}
          <div className="rounded-xl border border-border bg-surface-secondary">
            <div className="flex items-center gap-3 border-b border-border px-5 py-4">
              <div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
                <ChartLine className="size-5 text-accent" />
              </div>
              <div>
                <p className="text-sm font-semibold text-foreground">24 小时时段分布</p>
                <p className="text-xs text-muted">实际扣费以交易完成时系统计算为准</p>
              </div>
            </div>

            <div className="space-y-3 px-5 py-5">
              {/* Tick labels */}
              <div className="relative h-4">
                {[0, 6, 12, 18, 24].map((h) => (
                  <span
                    key={h}
                    className="absolute text-[10px] tabular-nums text-muted"
                    style={{
                      left: `${(h / 24) * 100}%`,
                      transform:
                        h === 24 ? "translateX(-100%)" : h > 0 ? "translateX(-50%)" : undefined,
                    }}
                  >
                    {String(h).padStart(2, "0")}:00
                  </span>
                ))}
              </div>

              {/* Colored bar */}
              <div className="flex h-12 overflow-hidden rounded-lg">
                {(() => {
                  const hourTier: PriceTier[] = Array(24).fill("flat" as PriceTier);
                  for (const slot of tariff.slots) {
                    for (let h = slot.start; h < slot.end; h++) hourTier[h] = slot.tier;
                  }
                  return hourTier.map((tier, h) => (
                    <div
                      key={h}
                      className={`flex-1 ${TIER_META[tier].cellBg} transition-opacity hover:opacity-100 opacity-90 flex items-center justify-center`}
                      title={`${String(h).padStart(2, "0")}:00 — ${TIER_META[tier].label}`}
                    >
                      <span className="hidden text-[10px] font-semibold text-white drop-shadow lg:block">
                        {String(h).padStart(2, "0")}
                      </span>
                    </div>
                  ));
                })()}
              </div>

              {/* Legend */}
              <div className="flex flex-wrap items-center gap-3 gap-y-1 pt-0.5">
                {(["peak", "flat", "valley"] as PriceTier[]).map((tier) => {
                  const meta = TIER_META[tier];
                  const hours = tariff.slots
                    .filter((s) => s.tier === tier)
                    .reduce((acc, s) => acc + (s.end - s.start), 0);
                  const total =
                    tariff.prices[tier].electricityPrice + tariff.prices[tier].serviceFee;
                  return (
                    <div key={tier} className="flex items-center gap-1.5">
                      <span className={`size-3 rounded-sm ${meta.cellBg}`} />
                      <span className="text-xs text-muted">
                        <span className={`font-semibold ${meta.text}`}>{meta.label}</span>
                        <span className="ml-1 text-muted/70">
                          {hours}h · ¥{total.toFixed(4)}/kWh
                        </span>
                      </span>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Slot cards */}
          <div className="space-y-3">
            <h2 className="text-sm font-semibold text-foreground">各时段费率</h2>
            <SlotCards tariff={tariff} />
            <p className="text-xs text-muted">
              合计费率 = 电费 + 服务费。实际扣费以交易完成时系统计算为准。
            </p>
          </div>
        </>
      )}
    </div>
  );
}