"use client";

import type { TrackingTool } from "@/app/actions";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { CopyButton } from "./copy-button";
import { BarChart, Tag, Facebook, Activity, Wind } from "lucide-react";

interface TrackingDisplayProps {
  tools: TrackingTool[];
}

const toolInfo: {
  [key: string]: { icon: React.ElementType; description: string };
} = {
  "Google Tag Manager": {
    icon: Tag,
    description: "A tag management system to deploy and update marketing tags.",
  },
  "Google Analytics (GA4)": {
    icon: BarChart,
    description: "The latest version of Google's web analytics service.",
  },
  "Google Analytics (Universal)": {
    icon: BarChart,
    description: "The previous generation of Google Analytics.",
  },
  "Facebook Pixel": {
    icon: Facebook,
    description: "An analytics tool to measure the effectiveness of advertising.",
  },
  Hotjar: {
    icon: Wind,
    description: "A tool for behavior analytics and user feedback.",
  },
  HubSpot: {
    icon: Activity,
    description: "An inbound marketing, sales, and service software.",
  },
  Default: {
    icon: Activity,
    description: "A detected tracking or analytics tool.",
  },
};

export function TrackingDisplay({ tools }: TrackingDisplayProps) {
  return (
    <Card className="w-full shadow-lg rounded-lg">
      <CardHeader>
        <CardTitle>Tracking Analysis</CardTitle>
        <CardDescription>
          External analytics and marketing tools detected on the page.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {tools && tools.length > 0 ? (
          <div className="space-y-4">
            {tools.map((tool, index) => {
              const info = toolInfo[tool.name] || toolInfo["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 className="flex-grow">
                    <h4 className="font-semibold text-lg">{tool.name}</h4>
                    <p className="text-sm text-muted-foreground">
                      {info.description}
                    </p>
                    {tool.id && (
                      <div className="mt-2 flex items-center gap-2 p-2 bg-background rounded-md">
                        <span className="text-sm font-mono text-muted-foreground flex-grow break-all">
                          {tool.id}
                        </span>
                        <CopyButton textToCopy={tool.id} />
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-8 text-muted-foreground">
            <p>No external tracking tools detected.</p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}