import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { TriangleAlert } from "lucide-react";

export const BeforeDashboardText = () => {
  return (
    <div className="mb-5 space-y-2">
      <div className="space-y-1">
        <h1>Dashboard</h1>
        <p className="text-lg font-semibold text-white/75">
          You are currently viewing the application&apos;s backend configuration and management
          screen.
        </p>
      </div>
      <div className="my-5">
        <Alert className="bg-orange-500/25 border-orange-500">
          <TriangleAlert className="w-8! h-8!" />
          <AlertTitle className="ml-5 text-2xl">This application is a work-in-progress!</AlertTitle>
          <AlertDescription className="ml-5 text-lg">
            <p>
              As this application is under active development, features and configurations may
              change significantly and without prior notice, including any modifications you make.{" "}
              <strong>
                Please be aware that data or work contributed may be lost during updates.
              </strong>{" "}
              Your patience and understanding are greatly appreciated.
            </p>
          </AlertDescription>
        </Alert>
      </div>
      <div>
        <p>
          If you are new to this panel, please keep in mind several important distinctions between
          this screen and the application&apos;s regular front-end:
        </p>
        <ol>
          <li>
            The <b>front-end</b> (<i>not</i> this panel) is where the magic actually happens.
            Queuing jobs, buying resources and assets, managing funds, signing up for missions, and
            all other forms of user interaction take place there. If you want to perform these sorts
            of operations, you should go there instead.
          </li>
          <li>
            The <b>back-end</b> (this screen and its children) is the &quot;developer&quot; view,
            where you can view and manage the <i>definitions</i> and <i>rules</i> of the things the
            front-end interacts with. If you want to define the different types of structures,
            create new assets and give them properties, create missions, and other app
            &quot;development&quot; operations, this is where those things happen.
          </li>
          <li>
            Before the campaign starts, this screen is where most work on the app will take place.
            After the campaign has started, you mostly won&apos;t use this screen for the majority
            of interactions, save for some exceptions (like mission building, lore writing, etc.)
          </li>
        </ol>
        <p>
          If you understand all of this, then please carry on with what you are doing! If you are
          looking for a certain action and cannot find it here, you&apos;ll probably want to go
          check the front-end to see if you can perform that action there instead.
        </p>
        <p className="font-bold">
          Thank you for all of your help and patience with this app! It means the world to me. 💖
          &mdash; Jason
        </p>
      </div>
      <hr color="#666" />
    </div>
  );
};

export default BeforeDashboardText;