"use client";

import type { DetectedTracker } from "@/app/actions";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  BarChart3,
  MousePointerClick,
  Target,
  Users,
  Database,
  Code,
  Eye,
} from "lucide-react";

interface TrackingDisplayProps {
  trackers: DetectedTracker[];
}

const trackerInfo: {
  [key: string]: { icon: React.ElementType; description: string };
} = {
  "Google Analytics": {
    icon: BarChart3,
    description: "Web analytics service that tracks and reports website traffic.",
  },
  "Google Tag Manager": {
    icon: Code,
    description:
      "Tag management system to easily deploy and manage marketing tags.",
  },
  "Facebook Pixel": {
    icon: Target,
    description:
      "Analytics tool to measure the effectiveness of advertising by understanding actions people take on a website.",
  },
  Hotjar: {
    icon: MousePointerClick,
    description:
      "Behavior analytics tool that reveals the online behavior and voice of users.",
  },
  HubSpot: {
    icon: Users,
    description: "Inbound marketing, sales, and service software.",
  },
  Segment: {
    icon: Database,
    description:
      "Customer data platform that collects, cleans, and controls customer data.",
  },
  Mixpanel: {
    icon: BarChart3,
    description:
      "Product analytics tool for tracking user interactions with web and mobile applications.",
  },
  "Vercel Analytics": {
    icon: BarChart3,
    description: "Privacy-friendly analytics for websites deployed on Vercel.",
  },
  Plausible: {
    icon: BarChart3,
    description:
      "A simple, lightweight and privacy-friendly web analytics tool.",
  },
  "Microsoft Clarity": {
    icon: Eye,
    description:
      "A free user behavior analytics tool that helps you understand how users are interacting with your website.",
  },
  Default: {
    icon: Code,
    description: "A detected tracking or analytics tool.",
  },
};

export function TrackingDisplay({ trackers }: TrackingDisplayProps) {
  return (
    <Card className="w-full shadow-lg rounded-lg">
      <CardHeader>
        <CardTitle>Tracking Analysis</CardTitle>
        <CardDescription>
          Tracking and analytics tools detected on the page.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {trackers && trackers.length > 0 ? (
          <div className="space-y-4">
            {trackers.map((tracker, index) => {
              const info = trackerInfo[tracker.name] || trackerInfo["Default"];
              const Icon = info.icon;
              return (
                <div
                  key={index}
                  className="flex items-start gap-4 p-4 border rounded-lg bg-muted/50"
                >
                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                    <Icon className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-lg">{tracker.name}</h4>
                    <p className="text-sm text-muted-foreground">
                      {info.description}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-8 text-muted-foreground">
            <p>No specific tracking tools detected.</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}