"use client"

import { useRef } from "react"
import { motion, useInView } from "framer-motion"
import { FileText, Code, Download, ExternalLink, FileCode } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

const artefacts = [
  {
    title: "White Paper",
    description: "Technical overview of our quantum-secure verification network",
    icon: FileText,
    link: "/whitepaper",
    hash: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
    type: "PDF",
  },
  {
    title: "SDK Beta",
    description: "Prototype SDK for integrating with our verification network",
    icon: Code,
    link: "#", // Changed to avoid fetch issues
    hash: "7d865e959b2466918c9863afca942d0fb89d7c9ac0c99bafc3749504ced80fd2",
    type: "ZIP",
  },
  {
    title: "Demo Parser",
    description: "Open-source demo parser for verification responses",
    icon: FileCode,
    link: "https://github.com/quantumverify/demo-parser",
    hash: "b94d27b9934d3e08a52e52d7da7dabfac484efe37a5380ee9088f7ace2efcde9",
    type: "GitHub",
    external: true,
  },
]

export default function Artefacts() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })

  const handleDownload = (link: string, type: string) => {
    window.open(link, "_blank")

    // Fire analytics event
    if (typeof window !== "undefined" && window.gtag) {
      window.gtag("event", "download", {
        event_category: "downloads",
        event_label: type,
      })
    }
  }

  return (
    <section id="artefacts" className="container py-24 sm:py-32" ref={ref}>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
        transition={{ duration: 0.5 }}
        className="mx-auto max-w-4xl text-center"
      >
        <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Open-Source Artefacts</h2>
        <p className="mt-4 text-lg text-muted-foreground">Download our publicly timestamped resources</p>
      </motion.div>

      <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {artefacts.map((artefact, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.5, delay: index * 0.1 }}
          >
            <Card className="h-full">
              <CardHeader>
                <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                  <artefact.icon className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="flex items-center gap-2">
                  {artefact.title}
                  <Badge variant="outline" className="ml-2">
                    {artefact.type}
                  </Badge>
                </CardTitle>
                <CardDescription>{artefact.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <p className="text-xs text-muted-foreground">SHA-256:</p>
                  <p className="break-all rounded-md bg-muted p-2 text-xs font-mono">{artefact.hash}</p>
                </div>
              </CardContent>
              <CardFooter>
                <Button
                  variant="outline"
                  className="w-full"
                  onClick={() =>
                    artefact.external
                      ? window.open(artefact.link, "_blank")
                      : handleDownload(artefact.link, artefact.type)
                  }
                >
                  {artefact.external ? (
                    <>
                      <ExternalLink className="mr-2 h-4 w-4" />
                      View on GitHub
                    </>
                  ) : (
                    <>
                      <Download className="mr-2 h-4 w-4" />
                      Download
                    </>
                  )}
                </Button>
              </CardFooter>
            </Card>
          </motion.div>
        ))}
      </div>
    </section>
  )
}
