import { useNumber } from '@/hooks/use-numer-formatter';
import { useTRPC } from '@/integrations/trpc/react';
import { useQuery } from '@tanstack/react-query';
import { Link } from '@tanstack/react-router';

import type { IServiceProject } from '@openpanel/db';

import { cn } from '@/utils/cn';
import { SettingsIcon, TrendingDownIcon, TrendingUpIcon } from 'lucide-react';
import { FadeIn } from '../fade-in';
import { SerieIcon } from '../report-chart/common/serie-icon';
import { Skeleton } from '../skeleton';
import { LinkButton } from '../ui/button';
import { ProjectChart } from './project-chart';

export function ProjectCardRoot({
  children,
  className,
}: { children: React.ReactNode; className?: string }) {
  return (
    <div
      className={cn(
        'relative card hover:-translate-y-px hover:shadow-sm',
        className,
      )}
    >
      {children}
    </div>
  );
}

export function ProjectCardSkeleton() {
  return (
    <ProjectCardRoot className="aspect-[340/116.25] p-4 col">
      <Skeleton className="h-5 w-full" />
      <div className="row mt-auto gap-4 w-1/2 ml-auto">
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-full" />
        <Skeleton className="h-3 w-full" />
      </div>
    </ProjectCardRoot>
  );
}

function ProjectCard({ id, domain, name, organizationId }: IServiceProject) {
  return (
    <ProjectCardRoot>
      <Link
        to="/$organizationId/$projectId"
        params={{
          organizationId,
          projectId: id,
        }}
        className="col p-4 transition-transform"
      >
        <div className="font-medium flex items-center gap-2 text-lg pb-2">
          <div className="row gap-2 flex-1">
            {domain && <SerieIcon name={domain ?? ''} />}
            {name}
          </div>
        </div>
        <div className="-mx-4 aspect-[8/1] mb-4">
          <ProjectChartOuter id={id} />
        </div>
        <div className="flex flex-1 gap-4 h-9 md:h-4">
          <ProjectMetrics id={id} />
        </div>
      </Link>
      <LinkButton
        variant="ghost"
        href={`/${organizationId}/${id}/settings`}
        className="text-muted-foreground absolute top-2 right-2"
      >
        <SettingsIcon size={16} />
      </LinkButton>
    </ProjectCardRoot>
  );
}

function ProjectChartOuter({ id }: { id: string }) {
  const trpc = useTRPC();
  const { data } = useQuery(
    trpc.chart.projectCard.queryOptions({
      projectId: id,
    }),
  );

  return (
    <FadeIn className="h-full w-full">
      <ProjectChart data={data?.chart || []} color={'blue'} />
    </FadeIn>
  );
}

function Metric({ value, label }: { value: React.ReactNode; label: string }) {
  return (
    <div className="flex flex-col gap-2 md:flex-row items-center">
      <div className="text-muted-foreground text-xs">{label}</div>
      <span className="font-semibold">{value}</span>
    </div>
  );
}

function ProjectMetrics({ id }: { id: string }) {
  const number = useNumber();
  const trpc = useTRPC();
  const { data } = useQuery(
    trpc.chart.projectCard.queryOptions({
      projectId: id,
    }),
  );

  return (
    <FadeIn className="flex gap-8 flex-1">
      <div className="flex-1 items-center gap-2 row">
        {typeof data?.trend?.percentage === 'number' && (
          <Metric
            label="3M DIFF"
            value={
              <span
                className={cn(
                  'font-semibold',
                  'row gap-1 items-center',
                  data?.trend?.direction === 'up'
                    ? 'text-emerald-300'
                    : data?.trend?.direction === 'down'
                      ? 'text-orange-300'
                      : 'text-muted-foreground',
                )}
              >
                {data.trend.direction === 'up' && (
                  <TrendingUpIcon className="size-4" />
                )}
                {data.trend.direction === 'down' && (
                  <TrendingDownIcon className="size-4" />
                )}
                {Math.abs(data.trend.percentage)}%
              </span>
            }
          />
        )}
        {!!data?.metrics?.revenue && (
          <Metric
            label="Revenue"
            value={number.currency(data?.metrics?.revenue / 100, {
              short: true,
            })}
          />
        )}
      </div>
      <Metric label="3M" value={number.short(data?.metrics?.months_3 ?? 0)} />
      <Metric label="30D" value={number.short(data?.metrics?.month ?? 0)} />
      <Metric label="24H" value={number.short(data?.metrics?.day ?? 0)} />
    </FadeIn>
  );
}

export default ProjectCard;
