import {
  ClockIcon,
  HandCoinsIcon,
  InfoIcon,
  LandmarkIcon,
  ShieldAlertIcon,
  UnlockIcon,
} from "lucide-react";
import React, { useState } from "react";
import { useNavigate } from "react-router";
import ExternalLink from "src/components/ExternalLink";

import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
import { Button } from "src/components/ui/button";
import { Checkbox } from "src/components/ui/checkbox";
import { Label } from "src/components/ui/label";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "src/components/ui/tooltip";
import { useInfo } from "src/hooks/useInfo";
import useSetupStore from "src/state/SetupStore";

export function SetupSecurity() {
  const navigate = useNavigate();
  const [hasConfirmed, setConfirmed] = useState<boolean>(false);
  const store = useSetupStore();
  const { data: info } = useInfo();

  function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    navigate("/setup/finish");
  }

  return (
    <div className="grid max-w-sm">
      <form onSubmit={onSubmit} className="flex flex-col items-center w-full">
        <TwoColumnLayoutHeader
          title="Security & Recovery"
          pageTitle="Security & Recovery"
          description="Take your time to understand how to secure and recover your funds on Alby Hub."
        />

        <div className="flex flex-col gap-6 w-full mt-6">
          {store.nodeInfo.backendType !== "CASHU" &&
            store.nodeInfo.backendType !== "BARK" && (
              <div className="flex gap-3 items-center">
                <div className="shrink-0">
                  <HandCoinsIcon className="size-6" />
                </div>
                <span className="text-sm text-muted-foreground">
                  Alby Hub is a spending wallet - do not keep all your savings
                  on it!
                </span>
              </div>
            )}
          {store.nodeInfo.backendType === "CASHU" && (
            <div className="flex gap-3 items-center">
              <div className="shrink-0">
                <LandmarkIcon className="size-6" />
              </div>
              <span className="text-sm text-muted-foreground">
                Your funds are owned by the cashu mint - use at your own risk
                with only small amounts!
              </span>
            </div>
          )}
          {store.nodeInfo.backendType === "BARK" && (
            <>
              <div className="flex gap-3 items-center">
                <LandmarkIcon className="size-6 shrink-0" />
                <span className="text-sm text-muted-foreground">
                  Bark is in beta - use at your own risk!
                </span>
              </div>
              <div className="flex gap-3 items-center">
                <ClockIcon className="size-6 shrink-0" />
                <span className="text-sm text-muted-foreground flex items-center justify-center gap-1">
                  Your funds must be refreshed periodically{" "}
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger type="button">
                        <InfoIcon className="size-4 text-muted-foreground" />
                      </TooltipTrigger>
                      <TooltipContent className="max-w-xs">
                        Your virtual UTXOs (VTXOs) will be refreshed
                        automatically to ensure you maintain ownership.
                        Refreshes may incur a small fee. Keep your Alby Hub
                        online so your funds do not expire.
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </span>
              </div>
              <div className="flex gap-3 items-center">
                <ShieldAlertIcon className="size-6 shrink-0" />
                <span className="text-sm text-muted-foreground flex items-center justify-center gap-1">
                  Unilateral exit is not implemented in Alby Hub yet{" "}
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger type="button">
                        <InfoIcon className="size-4 text-muted-foreground" />
                      </TooltipTrigger>
                      <TooltipContent className="max-w-xs">
                        You will need to take your hub wallet data and execute
                        the exit yourself.
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </span>
              </div>
              <ExternalLink
                className="text-muted-foreground flex items-center text-sm"
                to="https://second.tech/terms"
              >
                <p>
                  By using Bark you agree to{" "}
                  <span className="font-semibold underline">
                    Second&apos;s Terms of Service
                  </span>
                  .
                </p>
              </ExternalLink>
            </>
          )}
          <div className="flex gap-3 items-center">
            <div className="shrink-0">
              <UnlockIcon className="size-6" />
            </div>
            <span className="text-sm text-muted-foreground">
              Access to your Alby Hub is protected by an unlock password you
              set. It cannot be recovered or reset.
            </span>
          </div>
          {store.nodeInfo.backendType === "LND" ||
          store.nodeInfo.backendType === "CLN" ||
          store.nodeInfo.backendType === "PHOENIX" ? (
            <div className="flex gap-3 items-center">
              <div className="shrink-0">
                <ShieldAlertIcon className="size-6" />
              </div>
              <span className="text-sm text-muted-foreground">
                Channel backups{" "}
                <span className="underline">are not handled</span>
                by Alby Hub. Please take care of your own backups or go back and
                choose the LDK node type.
              </span>
            </div>
          ) : store.hasImportedMnemonic &&
            store.nodeInfo.backendType === "LDK" ? (
            <div className="flex gap-3 items-center">
              <div className="shrink-0">
                <ShieldAlertIcon className="size-6" />
              </div>
              <span className="text-sm text-muted-foreground">
                Your recovery phrase can only restore funds from lightning
                channels if you have dynamic channel backups enabled. If you had
                active channels on a different device, contact Alby support
                before proceeding.
              </span>
            </div>
          ) : (
            <div className="flex gap-3 items-center">
              <div className="shrink-0">
                <ShieldAlertIcon className="size-6" />
              </div>
              <span className="text-sm text-muted-foreground">
                Your{store.nodeInfo.backendType === "LDK" && " on-chain"}{" "}
                balance can be recovered only with your 12-word recovery phrase
                which you can access once your node has started.
                {!info?.albyUserIdentifier &&
                  store.nodeInfo.backendType === "LDK" &&
                  " You must also take care of your own channel backups."}
              </span>
            </div>
          )}
          <ExternalLink
            className="text-muted-foreground flex items-center text-sm"
            to="https://guides.getalby.com/user-guide/alby-hub/backups-and-recover"
          >
            <p>
              Learn more about backups and recovery process on{" "}
              <span className="font-semibold underline">Alby Guides</span>.
            </p>
          </ExternalLink>
          <div className="flex items-center">
            <Checkbox
              id="securePassword"
              required
              onCheckedChange={() => setConfirmed(!hasConfirmed)}
            />
            <Label htmlFor="securePassword" className="ml-2 cursor-pointer">
              I understand how to secure and recover funds
            </Label>
          </div>
          <Button className="w-full" disabled={!hasConfirmed} type="submit">
            Continue
          </Button>
        </div>
      </form>
    </div>
  );
}