"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";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { useTranslations } from 'next-intl';

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

    const key = "sites-splash-card-dismissed";
    const t = useTranslations();

    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={t('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 ({t('recommended')})
                    </h3>
                    <p className="text-sm">
                        {t('siteNewtDescription')}
                    </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" />
                            {t('siteRunsInDocker')}
                        </li>
                        <li className="flex items-center gap-2">
                            <Server className="text-green-500 w-4 h-4" />
                            {t('siteRunsInShell')}
                        </li>
                    </ul>

                    <div className="mt-4">
                        <Link
                            href="https://docs.pangolin.net/manage/sites/install-site"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            <Button
                                className="w-full flex items-center"
                                variant="secondary"
                            >
                                {t('siteInstallNewt')}{" "}
                                <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">
                        {t('siteWg')}
                    </h3>
                    <p className="text-sm">
                        {t('siteWgAnyClients')}
                    </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" />
                            {t('siteWgCompatibleAllClients')}
                        </li>
                        <li className="flex items-center gap-2">
                            <Server className="text-purple-500 w-4 h-4" />
                            {t('siteWgManualConfigurationRequired')}
                        </li>
                    </ul>
                </div>
            </CardContent>
        </Card>
    );
};

export default SitesSplashCard;