import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/shared/ui/dialog"
import { ScrollArea } from "@/shared/ui/scroll-area"
import { Button } from "@/shared/ui/button"

import type { OverviewFailure } from "../api/home.types"

interface FailedStocksDialogProps {
  failures: OverviewFailure[]
  open: boolean
  onOpenChange: (open: boolean) => void
}

export function FailedStocksDialog({
  failures,
  onOpenChange,
  open,
}: FailedStocksDialogProps) {
  if (!open) return null

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-2xl" showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>失败股票详情</DialogTitle>
          <DialogDescription>
            以下股票尚未在目标交易日同时具备完整的行情和估值数据。
          </DialogDescription>
        </DialogHeader>
        <ScrollArea className="h-64 pr-3">
          <div className="space-y-3">
            {failures.map((failure) => (
              <div
                key={`${failure.ts_code}-${failure.failure_type}`}
                className="rounded-lg border bg-muted/30 p-3"
              >
                <div className="flex flex-wrap items-baseline justify-between gap-2">
                  <div>
                    <p className="font-medium">{failure.name}</p>
                    <p className="font-mono text-xs text-muted-foreground">
                      {failure.ts_code}
                    </p>
                  </div>
                  <span className="text-xs text-muted-foreground">
                    目标交易日：{failure.trade_date}
                  </span>
                </div>
                <p className="mt-3 text-sm font-medium">
                  {formatFailureType(failure.failure_type)}
                </p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {failure.reason}
                </p>
              </div>
            ))}
          </div>
        </ScrollArea>
        <DialogFooter>
          <DialogClose render={<Button variant="outline" />}>关闭</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

function formatFailureType(value: string) {
  const labels: Record<string, string> = {
    missing_daily_bar: "缺少日线行情",
    missing_daily_bar_and_valuation_snapshot: "缺少日线行情和估值快照",
    missing_valuation_snapshot: "缺少估值快照",
    recorded_stock_failure: "股票级同步失败",
  }

  return labels[value] ?? value
}