'use client'

import { trpc } from '@/lib/trpc/client'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
import {
  Coins,
  Zap,
  TrendingUp,
  Activity,
  Brain,
  Filter,
  Users,
  Award,
} from 'lucide-react'
import { cn } from '@/lib/utils'

const ACTION_ICONS: Record<string, typeof Zap> = {
  ASSIGNMENT: Users,
  FILTERING: Filter,
  AWARD_ELIGIBILITY: Award,
  MENTOR_MATCHING: Brain,
}

const ACTION_LABELS: Record<string, string> = {
  ASSIGNMENT: 'Jury Assignment',
  FILTERING: 'Project Filtering',
  AWARD_ELIGIBILITY: 'Award Eligibility',
  MENTOR_MATCHING: 'Mentor Matching',
}

function StatCard({
  label,
  value,
  subValue,
  icon: Icon,
  trend,
}: {
  label: string
  value: string
  subValue?: string
  icon: typeof Zap
  trend?: 'up' | 'down' | 'neutral'
}) {
  return (
    <div className="flex items-start gap-3 rounded-lg border bg-card p-4">
      <div className="rounded-md bg-muted p-2">
        <Icon className="h-4 w-4 text-muted-foreground" />
      </div>
      <div className="flex-1 space-y-1">
        <p className="text-sm font-medium text-muted-foreground">{label}</p>
        <div className="flex items-baseline gap-2">
          <p className="text-2xl font-bold">{value}</p>
          {trend && trend !== 'neutral' && (
            <TrendingUp
              className={cn(
                'h-4 w-4',
                trend === 'up' ? 'text-green-500' : 'rotate-180 text-red-500'
              )}
            />
          )}
        </div>
        {subValue && (
          <p className="text-xs text-muted-foreground">{subValue}</p>
        )}
      </div>
    </div>
  )
}

function UsageBar({
  label,
  value,
  maxValue,
  color,
}: {
  label: string
  value: number
  maxValue: number
  color: string
}) {
  const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0

  return (
    <div className="space-y-1">
      <div className="flex justify-between text-sm">
        <span className="text-muted-foreground">{label}</span>
        <span className="font-medium">{value.toLocaleString()}</span>
      </div>
      <div className="h-2 overflow-hidden rounded-full bg-muted">
        <div
          className={cn('h-full transition-all duration-500', color)}
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  )
}

export function AIUsageCard() {
  const {
    data: monthCost,
    isLoading: monthLoading,
  } = trpc.settings.getAICurrentMonthCost.useQuery(undefined, {
    staleTime: 60 * 1000, // 1 minute
  })

  const {
    data: stats,
    isLoading: statsLoading,
  } = trpc.settings.getAIUsageStats.useQuery({}, {
    staleTime: 60 * 1000,
  })

  const {
    data: history,
    isLoading: historyLoading,
  } = trpc.settings.getAIUsageHistory.useQuery({ days: 30 }, {
    staleTime: 60 * 1000,
  })

  const isLoading = monthLoading || statsLoading

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            AI Usage & Costs
          </CardTitle>
          <CardDescription>Loading usage data...</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid gap-4 sm:grid-cols-2">
            <Skeleton className="h-24" />
            <Skeleton className="h-24" />
          </div>
          <Skeleton className="h-32" />
        </CardContent>
      </Card>
    )
  }

  const hasUsage = monthCost && monthCost.requestCount > 0
  const maxTokensByAction = stats?.byAction
    ? Math.max(...Object.values(stats.byAction).map((a) => a.tokens))
    : 0

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Activity className="h-5 w-5" />
          AI Usage & Costs
        </CardTitle>
        <CardDescription>
          Token usage and estimated costs for AI features
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Current month summary */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <StatCard
            label="This Month Cost"
            value={monthCost?.costFormatted || '$0.00'}
            subValue={`${monthCost?.requestCount || 0} requests`}
            icon={Coins}
          />
          <StatCard
            label="Tokens Used"
            value={monthCost?.tokens?.toLocaleString() || '0'}
            subValue="This month"
            icon={Zap}
          />
          {stats && (
            <StatCard
              label="All-Time Cost"
              value={stats.totalCostFormatted || '$0.00'}
              subValue={`${stats.totalTokens?.toLocaleString() || 0} tokens`}
              icon={TrendingUp}
            />
          )}
        </div>

        {/* Usage by action */}
        {hasUsage && stats?.byAction && Object.keys(stats.byAction).length > 0 && (
          <div className="space-y-4">
            <h4 className="text-sm font-semibold">Usage by Feature</h4>
            <div className="space-y-3">
              {Object.entries(stats.byAction)
                .sort(([, a], [, b]) => b.tokens - a.tokens)
                .map(([action, data]) => {
                  const Icon = ACTION_ICONS[action] || Zap
                  return (
                    <div key={action} className="flex items-center gap-3">
                      <div className="rounded-md bg-muted p-1.5">
                        <Icon className="h-3.5 w-3.5 text-muted-foreground" />
                      </div>
                      <div className="flex-1">
                        <UsageBar
                          label={ACTION_LABELS[action] || action}
                          value={data.tokens}
                          maxValue={maxTokensByAction}
                          color="bg-primary"
                        />
                      </div>
                      <Badge variant="secondary" className="ml-2 text-xs">
                        {(data as { costFormatted?: string }).costFormatted}
                      </Badge>
                    </div>
                  )
                })}
            </div>
          </div>
        )}

        {/* Usage by model */}
        {hasUsage && stats?.byModel && Object.keys(stats.byModel).length > 0 && (
          <div className="space-y-4">
            <h4 className="text-sm font-semibold">Usage by Model</h4>
            <div className="flex flex-wrap gap-2">
              {Object.entries(stats.byModel)
                .sort(([, a], [, b]) => b.cost - a.cost)
                .map(([model, data]) => (
                  <Badge
                    key={model}
                    variant="outline"
                    className="flex items-center gap-2"
                  >
                    <Brain className="h-3 w-3" />
                    <span>{model}</span>
                    <span className="text-muted-foreground">
                      {(data as { costFormatted?: string }).costFormatted}
                    </span>
                  </Badge>
                ))}
            </div>
          </div>
        )}

        {/* Usage history mini chart */}
        {hasUsage && history && history.length > 0 && (
          <div className="space-y-4">
            <h4 className="text-sm font-semibold">Last 30 Days</h4>
            <div className="flex h-16 items-end gap-0.5">
              {(() => {
                const maxCost = Math.max(...history.map((d) => d.cost), 0.001)
                return history.slice(-30).map((day, i) => {
                  const height = (day.cost / maxCost) * 100
                  return (
                    <div
                      key={day.date}
                      className="group relative flex-1 cursor-pointer"
                      title={`${day.date}: ${day.costFormatted}`}
                    >
                      <div
                        className="w-full rounded-t bg-primary/60 transition-colors hover:bg-primary"
                        style={{ height: `${Math.max(height, 4)}%` }}
                      />
                    </div>
                  )
                })
              })()}
            </div>
            <div className="flex justify-between text-xs text-muted-foreground">
              <span>{history[0]?.date}</span>
              <span>{history[history.length - 1]?.date}</span>
            </div>
          </div>
        )}

        {/* No usage message */}
        {!hasUsage && (
          <div className="rounded-lg border border-dashed p-8 text-center">
            <Activity className="mx-auto h-8 w-8 text-muted-foreground" />
            <h4 className="mt-2 text-sm font-semibold">No AI usage yet</h4>
            <p className="mt-1 text-sm text-muted-foreground">
              AI usage will be tracked when you use filtering, assignments, or
              other AI-powered features.
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}