"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight, DockIcon as Docker, Globe, Server, X } from "lucide-react";
import Link from "next/link";

export const SitesSplashCard = () => {
    const [isDismissed, setIsDismissed] = useState(true);

    const key = "sites-splash-card-dismissed";

    useEffect(() => {
        const dismissed = localStorage.getItem(key);
        if (dismissed === "true") {
            setIsDismissed(true);
        } else {
            setIsDismissed(false);
        }
    }, []);

    const handleDismiss = () => {
        setIsDismissed(true);
        localStorage.setItem(key, "true");
    };

    if (isDismissed) {
        return null;
    }

    return (
        <Card className="w-full mx-auto overflow-hidden mb-8 hidden md:block relative">
            <button
                onClick={handleDismiss}
                className="absolute top-2 right-2 p-2"
                aria-label="Dismiss"
            >
                <X className="w-5 h-5" />
            </button>
            <CardContent className="grid gap-6 p-6 sm:grid-cols-2">
                <div className="space-y-4">
                    <h3 className="text-xl font-semibold flex items-center gap-2">
                        <Globe className="text-blue-500" />
                        Newt (Recommended)
                    </h3>
                    <p className="text-sm">
                        For the best user experience, use Newt. It uses
                        WireGuard under the hood and allows you to address your
                        private resources by their LAN address on your private
                        network from within the Pangolin dashboard.
                    </p>
                    <ul className="text-sm text-muted-foreground space-y-2">
                        <li className="flex items-center gap-2">
                            <Server className="text-green-500 w-4 h-4" />
                            Runs in Docker
                        </li>
                        <li className="flex items-center gap-2">
                            <Server className="text-green-500 w-4 h-4" />
                            Runs in shell on macOS, Linux, and Windows
                        </li>
                    </ul>

                    <div className="mt-4">
                        <Link
                            href="https://docs.fossorial.io/Newt/install"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <Button
                                className="w-full flex items-center"
                                variant="secondary"
                            >
                                Install Newt{" "}
                                <ArrowRight className="ml-2 w-4 h-4" />
                            </Button>
                        </Link>
                    </div>
                </div>
                <div className="space-y-4">
                    <h3 className="text-xl font-semibold flex items-center gap-2">
                        Basic WireGuard
                    </h3>
                    <p className="text-sm">
                        Use any WireGuard client to connect. You will have to
                        address your internal resources using the peer IP.
                    </p>
                    <ul className="text-sm text-muted-foreground space-y-2">
                        <li className="flex items-center gap-2">
                            <Docker className="text-purple-500 w-4 h-4" />
                            Compatible with all WireGuard clients
                        </li>
                        <li className="flex items-center gap-2">
                            <Server className="text-purple-500 w-4 h-4" />
                            Manual configuration required
                        </li>
                    </ul>
                </div>
            </CardContent>
        </Card>
    );
};

export default SitesSplashCard;