"use client"

import { useMemo, useRef, useState } from "react"
import { useArtifact } from "@ai-sdk-tools/artifacts/client"
import {
  AlertTriangle,
  BarChart3,
  Calendar,
  CheckCircle2,
  DollarSign,
  Minus,
  Target,
  TrendingDown,
  TrendingUp,
} from "lucide-react"
import { useMotionValueEvent, useSpring } from "motion/react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import { Progress } from "@/components/ui/progress"

import {
  BurnRateArtifact,
  type BurnRateData,
} from "../lib/ai/artifacts/burn-rate"
import { BurnRateLoading } from "./burn-rate-loading"

// Compact Stage Progress Component
function StageProgress({
  stage,
  progress,
}: {
  stage: string
  progress: number
}) {
  const stageOrder = ["loading", "processing", "analyzing", "complete"] as const
  const currentStageIndex = stageOrder.indexOf(
    stage as (typeof stageOrder)[number]
  )

  const getStageLabel = (itemStage: string) => {
    switch (itemStage) {
      case "loading":
        return "Init"
      case "processing":
        return "Process"
      case "analyzing":
        return "Analyze"
      case "complete":
        return "Done"
      default:
        return itemStage
    }
  }

  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-muted-foreground text-sm font-medium">
          Progress
        </span>
        <span className="text-sm font-medium">{progress}%</span>
      </div>
      <Progress className="h-1.5" value={progress} />
      <div className="flex items-center justify-between">
        {stageOrder.map((itemStage, index) => {
          const isComplete = currentStageIndex > index
          const isActive = currentStageIndex === index

          return (
            <div
              className={`flex items-center gap-1.5 text-xs ${
                isComplete
                  ? "text-chart-2"
                  : isActive
                    ? "text-primary font-medium"
                    : "text-muted-foreground"
              }`}
              key={itemStage}
            >
              <div
                className={`h-1.5 w-1.5 rounded-full ${
                  isComplete
                    ? "bg-chart-2"
                    : isActive
                      ? "bg-primary"
                      : "bg-muted-foreground/30"
                }`}
              />
              <span>{getStageLabel(itemStage)}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}

// Compact Metrics Grid Component
function MetricsGrid({
  latestMonth,
  previousMonth,
  averageBurn,
  totalRevenue,
  totalExpenses,
  formatter,
}: {
  latestMonth: { burnRate: number; runway: number } | undefined
  previousMonth: { burnRate: number } | undefined
  averageBurn: number
  totalRevenue: number
  totalExpenses: number
  formatter: Intl.NumberFormat
}) {
  const monthOverMonthChange =
    latestMonth && previousMonth
      ? latestMonth.burnRate - previousMonth.burnRate
      : undefined
  const isCashFlowPositive = (latestMonth?.burnRate ?? 0) < 0
  const runway = latestMonth?.runway ?? 0

  const getChangeColor = () => {
    if (!monthOverMonthChange) {
      return "text-muted-foreground"
    }
    return monthOverMonthChange > 0 ? "text-destructive" : "text-chart-2"
  }

  const getRunwayColor = () => {
    if (runway < 6) {
      return "text-destructive"
    }
    if (runway < 12) {
      return "text-amber-600"
    }
    return "text-chart-2"
  }

  const getRunwayStatus = () => {
    if (runway < 6) {
      return "Critical"
    }
    if (runway < 12) {
      return "Warning"
    }
    return "Stable"
  }

  return (
    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
      {/* Current Burn Rate */}
      <div className="space-y-1">
        <div className="flex items-center gap-1.5">
          <DollarSign className="text-muted-foreground h-3.5 w-3.5" />
          <span className="text-muted-foreground text-xs font-medium">
            Current Burn
          </span>
        </div>
        <div className="space-y-0.5">
          <p className="text-lg font-semibold">
            {formatter.format(latestMonth?.burnRate ?? 0)}
          </p>
          {monthOverMonthChange !== undefined && (
            <p className={`text-xs ${getChangeColor()}`}>
              {monthOverMonthChange > 0 ? "+" : ""}
              {formatter.format(Math.abs(monthOverMonthChange))} vs prev
            </p>
          )}
          {isCashFlowPositive && (
            <Badge
              className="bg-chart-2 dark:bg-chart-2/50 dark:text-chart-2 text-xs text-white"
              variant="secondary"
            >
              Positive cash flow
            </Badge>
          )}
        </div>
      </div>

      {/* Average Burn */}
      <div className="space-y-1">
        <div className="flex items-center gap-1.5">
          <Target className="text-muted-foreground h-3.5 w-3.5" />
          <span className="text-muted-foreground text-xs font-medium">
            Avg Burn
          </span>
        </div>
        <p className="text-lg font-semibold">{formatter.format(averageBurn)}</p>
        <p className="text-muted-foreground text-xs">Monthly average</p>
      </div>

      {/* Runway */}
      <div className="space-y-1">
        <div className="flex items-center gap-1.5">
          <Calendar className="text-muted-foreground h-3.5 w-3.5" />
          <span className="text-muted-foreground text-xs font-medium">
            Runway
          </span>
        </div>
        <div className="space-y-0.5">
          <p className={`text-lg font-semibold ${getRunwayColor()}`}>
            {runway.toFixed(1)}m
          </p>
          <Badge
            className={`text-xs ${runway >= 12 ? "bg-chart-2 dark:bg-chart-2/50 dark:text-chart-2 text-white" : ""}`}
            variant={
              runway < 6
                ? "destructive"
                : runway < 12
                  ? "secondary"
                  : "secondary"
            }
          >
            {getRunwayStatus()}
          </Badge>
        </div>
      </div>

      {/* Revenue vs Expenses */}
      <div className="space-y-1">
        <div className="flex items-center gap-1.5">
          <BarChart3 className="text-muted-foreground h-3.5 w-3.5" />
          <span className="text-muted-foreground text-xs font-medium">
            Revenue
          </span>
        </div>
        <div className="space-y-0.5">
          <p className="text-lg font-semibold">
            {formatter.format(totalRevenue)}
          </p>
          <p className="text-muted-foreground text-xs">
            vs {formatter.format(totalExpenses)} expenses
          </p>
          {totalRevenue > 0 && totalExpenses > 0 && (
            <div className="flex items-center gap-1">
              <div className="bg-muted h-1.5 flex-1 rounded-full">
                <div
                  className="bg-chart-2 h-1.5 rounded-full"
                  style={{
                    width: `${Math.min(100, (totalRevenue / totalExpenses) * 100)}%`,
                  }}
                />
              </div>
              <span className="text-muted-foreground text-xs">
                {((totalRevenue / totalExpenses) * 100).toFixed(0)}%
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

// Compact Chart Preview Component with Clipped Area Chart
function CompactChartPreview({
  chartData,
  onOpenChart,
}: {
  chartData: Array<{
    month: string
    burnRate: number
    revenue: number
    expenses: number
  }>
  onOpenChart: () => void
}) {
  const chartRef = useRef<HTMLDivElement>(null)
  const [axis, setAxis] = useState(0)

  // motion values
  const springX = useSpring(0, {
    damping: 30,
    stiffness: 100,
  })
  const springY = useSpring(0, {
    damping: 30,
    stiffness: 100,
  })

  useMotionValueEvent(springX, "change", (latest) => {
    setAxis(latest)
  })

  const chartConfig = {
    burnRate: {
      label: "Burn Rate",
      color: "#f59e0b",
    },
  } satisfies ChartConfig

  // Calculate trend for visual indicators
  const latestBurnRate = chartData.at(-1)?.burnRate || 0
  const previousBurnRate = chartData.at(-2)?.burnRate || 0
  const trend =
    latestBurnRate < previousBurnRate
      ? "improving"
      : latestBurnRate > previousBurnRate
        ? "declining"
        : "stable"

  const getTrendColor = () => {
    switch (trend) {
      case "improving":
        return "text-chart-2"
      case "declining":
        return "text-destructive"
      default:
        return "text-muted-foreground"
    }
  }

  const getTrendIcon = () => {
    switch (trend) {
      case "improving":
        return <TrendingDown className="text-chart-2 h-3.5 w-3.5" />
      case "declining":
        return <TrendingUp className="text-destructive h-3.5 w-3.5" />
      default:
        return <Minus className="text-muted-foreground h-3.5 w-3.5" />
    }
  }

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(value)
  }

  return (
    <div
      className="bg-card hover:bg-muted/50 cursor-pointer rounded-lg border p-4 transition-all duration-200 hover:shadow-sm"
      onClick={onOpenChart}
    >
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <BarChart3 className="text-muted-foreground h-4 w-4" />
            <span className="text-sm font-medium">Burn Rate Trend</span>
            {chartData.length > 1 && getTrendIcon()}
          </div>
          <Button className="h-7 px-2 text-xs" size="sm" variant="ghost">
            View Chart
          </Button>
        </div>

        {chartData.length > 0 && (
          <div className="space-y-2">
            {/* Clipped Area Chart */}
            <ChartContainer
              className="h-36 w-full"
              config={chartConfig}
              ref={chartRef}
            >
              <AreaChart
                accessibilityLayer
                className="overflow-visible"
                data={chartData}
                margin={{
                  top: 20,
                  right: 0,
                  left: 0,
                }}
                onMouseLeave={() => {
                  springX.set(
                    chartRef.current?.getBoundingClientRect().width || 0
                  )
                  springY.jump(chartData.at(-1)?.burnRate || 0)
                }}
                onMouseMove={(state) => {
                  const x = state.activeCoordinate?.x
                  const dataValue = state.activePayload?.[0]?.value
                  if (x && dataValue !== undefined) {
                    springX.set(x)
                    springY.set(dataValue)
                  }
                }}
              >
                <CartesianGrid
                  horizontalCoordinatesGenerator={(props) => {
                    const { height } = props
                    return [0, height - 30]
                  }}
                  strokeDasharray="3 3"
                  vertical={false}
                />
                <XAxis
                  axisLine={false}
                  dataKey="month"
                  tick={{ fontSize: 10 }}
                  tickFormatter={(value) => {
                    const date = new Date(value)
                    return date.toLocaleDateString("en-US", { month: "short" })
                  }}
                  tickLine={false}
                  tickMargin={8}
                />
                <Area
                  clipPath={`inset(0 ${Number(chartRef.current?.getBoundingClientRect().width) - axis} 0 0)`}
                  dataKey="burnRate"
                  fill="url(#gradient-cliped-area-burnRate)"
                  fillOpacity={0.4}
                  stroke="var(--chart-2)"
                  type="monotone"
                />
                <line
                  stroke="var(--chart-2)"
                  strokeDasharray="3 3"
                  strokeLinecap="round"
                  strokeOpacity={0.2}
                  x1={axis}
                  x2={axis}
                  y1={0}
                  y2={"85%"}
                />
                <rect
                  fill="var(--chart-2)"
                  height={18}
                  width={50}
                  x={axis - 50}
                  y={0}
                />
                <text
                  fill="var(--primary-foreground)"
                  fontWeight={600}
                  textAnchor="middle"
                  x={axis - 25}
                  y={13}
                >
                  {formatCurrency(springY.get())}
                </text>
                {/* Ghost line behind graph */}
                <Area
                  dataKey="burnRate"
                  fill="none"
                  stroke="var(--chart-2)"
                  strokeOpacity={0.1}
                  type="monotone"
                />
                <defs>
                  <linearGradient
                    id="gradient-cliped-area-burnRate"
                    x1="0"
                    x2="0"
                    y1="0"
                    y2="1"
                  >
                    <stop
                      offset="5%"
                      stopColor="var(--chart-2)"
                      stopOpacity={0.2}
                    />
                    <stop
                      offset="95%"
                      stopColor="var(--chart-2)"
                      stopOpacity={0}
                    />
                  </linearGradient>
                </defs>
              </AreaChart>
            </ChartContainer>

            {/* Trend Summary */}
            {chartData.length > 1 && (
              <div className="flex items-center justify-between text-xs">
                <span className={`font-medium ${getTrendColor()}`}>
                  {trend === "improving"
                    ? "Improving"
                    : trend === "declining"
                      ? "Declining"
                      : "Stable"}
                </span>
                <span className="text-muted-foreground">
                  Latest: {formatCurrency(Math.abs(latestBurnRate))}
                </span>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  )
}

// Compact Alerts and Recommendations Component
function CompactAlertsAndRecommendations({
  summary,
}: {
  summary: { alerts: string[]; recommendations: string[] }
}) {
  const getAlertStyles = (alert: string) => {
    const normalized = alert.toLowerCase()
    if (normalized.includes("critical")) {
      return "border-destructive/20 bg-destructive/5 text-destructive"
    }
    if (normalized.includes("warning")) {
      return "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-500/10 dark:text-amber-200"
    }
    return "border-primary/20 bg-primary/5 text-primary"
  }

  return (
    <div className="space-y-4">
      {/* Alerts */}
      {summary.alerts.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <AlertTriangle className="text-muted-foreground h-3.5 w-3.5" />
            <span className="text-muted-foreground text-xs font-medium">
              Alerts
            </span>
          </div>
          <div className="space-y-1.5">
            {summary.alerts.map((alert: string) => (
              <div
                className={`rounded-md border px-2.5 py-1.5 text-xs font-medium ${getAlertStyles(alert)}`}
                key={alert}
              >
                {alert}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Recommendations */}
      {summary.recommendations.length > 0 && (
        <div className="space-y-2">
          <div className="flex items-center gap-1.5">
            <CheckCircle2 className="text-muted-foreground h-3.5 w-3.5" />
            <span className="text-muted-foreground text-xs font-medium">
              Recommendations
            </span>
          </div>
          <div className="space-y-1.5">
            {summary.recommendations.map((recommendation: string) => (
              <div
                className="border-chart-2 bg-chart-2/5 text-chart-2 dark:border-chart-2/60 dark:bg-chart-2/50 dark:text-chart-2 flex items-start gap-2 rounded-md border px-2.5 py-1.5 text-xs"
                key={recommendation}
              >
                <CheckCircle2 className="mt-0.5 h-3 w-3 flex-shrink-0" />
                <span>{recommendation}</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

type BurnRateAnalysisPanelProps = {
  onOpenChart: () => void
}

export function BurnRateAnalysisPanel({
  onOpenChart,
}: BurnRateAnalysisPanelProps) {
  const burnRateData = useArtifact(BurnRateArtifact)
  const data = burnRateData?.data as BurnRateData | undefined

  const formatter = useMemo(
    () =>
      new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: data?.currency ?? "USD",
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      }),
    [data?.currency]
  )

  if (!data) {
    return <BurnRateLoading />
  }

  const summary = data.summary
  const chartData = data.chartData ?? []
  const stage = data.stage ?? "loading"
  const progress = Math.round((data.progress ?? 0) * 100)

  const latestMonth = chartData.at(-1)
  const previousMonth = chartData.at(-2)
  const averageBurn =
    chartData.length > 0
      ? chartData.reduce(
          (total: number, period: any) => total + period.burnRate,
          0
        ) / chartData.length
      : 0
  const totalRevenue = chartData.reduce(
    (total: number, period: any) => total + period.revenue,
    0
  )
  const totalExpenses = chartData.reduce(
    (total: number, period: any) => total + period.expenses,
    0
  )

  const renderTrendIcon = () => {
    if (!summary) {
      return null
    }
    if (summary.trend === "improving") {
      return <TrendingDown className="text-chart-2 h-3.5 w-3.5" />
    }
    if (summary.trend === "declining") {
      return <TrendingUp className="text-destructive h-3.5 w-3.5" />
    }
    return <Minus className="text-muted-foreground h-3.5 w-3.5" />
  }

  const getStatusLabel = (currentStage: string) => {
    if (currentStage === "complete") {
      return "Analysis Complete"
    }
    if (currentStage === "analyzing") {
      return "Analyzing"
    }
    if (currentStage === "processing") {
      return "Processing"
    }
    return "Initializing"
  }

  const statusLabel = getStatusLabel(stage)

  return (
    <div className="space-y-4">
      {/* Status Header */}
      <div className="bg-card rounded-lg border p-4">
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <span className="text-sm font-medium">{statusLabel}</span>
                {summary && renderTrendIcon()}
              </div>
              {stage !== "complete" && (
                <p className="text-muted-foreground text-xs">
                  {progress}% complete
                </p>
              )}
              {stage === "complete" && summary && (
                <div className="flex items-center gap-2">
                  <Badge
                    className={`text-xs ${
                      summary.trend === "improving"
                        ? "bg-chart-2 dark:bg-chart-2/50 dark:text-chart-2 text-white"
                        : summary.trend === "declining"
                          ? "bg-destructive text-white"
                          : "bg-muted text-muted-foreground"
                    }`}
                    variant="secondary"
                  >
                    {summary.trend === "improving"
                      ? "Improving"
                      : summary.trend === "declining"
                        ? "Declining"
                        : "Stable"}
                  </Badge>
                  {latestMonth && (
                    <span className="text-muted-foreground text-xs">
                      Latest burn:{" "}
                      {formatter.format(Math.abs(latestMonth.burnRate))}
                    </span>
                  )}
                </div>
              )}
            </div>
            {stage === "complete" && (
              <Button
                className="h-8"
                onClick={onOpenChart}
                size="sm"
                variant="outline"
              >
                <BarChart3 className="mr-1.5 h-3.5 w-3.5" />
                View Chart
              </Button>
            )}
          </div>

          {/* Quick Stats Row */}
          {stage === "complete" && summary && (
            <div className="grid grid-cols-3 gap-4 border-t pt-2">
              <div className="text-center">
                <div className="text-lg font-semibold">
                  {formatter.format(totalRevenue)}
                </div>
                <div className="text-muted-foreground text-xs">
                  Total Revenue
                </div>
              </div>
              <div className="text-center">
                <div className="text-lg font-semibold">
                  {formatter.format(totalExpenses)}
                </div>
                <div className="text-muted-foreground text-xs">
                  Total Expenses
                </div>
              </div>
              <div className="text-center">
                <div
                  className={`text-lg font-semibold ${
                    totalRevenue - totalExpenses >= 0
                      ? "text-chart-2"
                      : "text-destructive"
                  }`}
                >
                  {formatter.format(totalRevenue - totalExpenses)}
                </div>
                <div className="text-muted-foreground text-xs">Net Income</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Progress for non-complete stages */}
      {stage !== "complete" && (
        <div className="bg-card rounded-lg border p-4">
          <StageProgress progress={progress} stage={stage} />
        </div>
      )}

      {/* Loading state */}
      {stage !== "complete" && <BurnRateLoading />}

      {/* Complete state */}
      {stage === "complete" && summary && (
        <div className="space-y-4">
          {/* Chart Preview */}
          <CompactChartPreview
            chartData={chartData}
            onOpenChart={onOpenChart}
          />

          {/* Metrics Grid */}
          <div className="bg-card rounded-lg border p-4">
            <MetricsGrid
              averageBurn={averageBurn}
              formatter={formatter}
              latestMonth={latestMonth}
              previousMonth={previousMonth}
              totalExpenses={totalExpenses}
              totalRevenue={totalRevenue}
            />
          </div>

          {/* Revenue & Expenses Breakdown */}
          <div className="bg-card rounded-lg border p-4">
            <div className="space-y-3">
              <div className="flex items-center gap-1.5">
                <BarChart3 className="text-muted-foreground h-3.5 w-3.5" />
                <span className="text-muted-foreground text-xs font-medium">
                  Revenue & Expenses Breakdown
                </span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                {/* Revenue */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">Total Revenue</span>
                    <span className="text-chart-2 font-semibold">
                      {formatter.format(totalRevenue)}
                    </span>
                  </div>
                  <div className="space-y-1">
                    {chartData.map((period: any, index: number) => (
                      <div
                        className="flex items-center justify-between text-xs"
                        key={index}
                      >
                        <span className="text-muted-foreground">
                          {period.month}
                        </span>
                        <span className="font-medium">
                          {formatter.format(period.revenue)}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Expenses */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">Total Expenses</span>
                    <span className="text-destructive font-semibold">
                      {formatter.format(totalExpenses)}
                    </span>
                  </div>
                  <div className="space-y-1">
                    {chartData.map((period: any, index: number) => (
                      <div
                        className="flex items-center justify-between text-xs"
                        key={index}
                      >
                        <span className="text-muted-foreground">
                          {period.month}
                        </span>
                        <span className="font-medium">
                          {formatter.format(period.expenses)}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Net Income Summary */}
              <div className="bg-muted/50 rounded-md p-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Net Income</span>
                  <span
                    className={`font-semibold ${totalRevenue - totalExpenses >= 0 ? "text-chart-2" : "text-destructive"}`}
                  >
                    {formatter.format(totalRevenue - totalExpenses)}
                  </span>
                </div>
                <div className="text-muted-foreground mt-1 text-xs">
                  {totalRevenue - totalExpenses >= 0
                    ? "Profitable"
                    : "Loss-making"}{" "}
                  over the period
                </div>
              </div>
            </div>
          </div>

          {/* Alerts and Recommendations */}
          {(summary.alerts.length > 0 ||
            summary.recommendations.length > 0) && (
            <div className="bg-card rounded-lg border p-4">
              <CompactAlertsAndRecommendations summary={summary} />
            </div>
          )}

          {/* Summary */}
          <div className="bg-card rounded-lg border p-4">
            <div className="space-y-2">
              <div className="flex items-center gap-1.5">
                <BarChart3 className="text-muted-foreground h-3.5 w-3.5" />
                <span className="text-muted-foreground text-xs font-medium">
                  Summary
                </span>
              </div>
              <p className="text-muted-foreground text-sm leading-relaxed">
                {summary.alerts.length > 0
                  ? summary.alerts[0]
                  : "Financial health appears stable based on the current dataset."}
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
ai-artifact-chart
