import { createFileRoute, Link } from "@tanstack/react-router";
import { changePassword } from "~/fns/account";
import { getSecuritySettings } from "~/fns/account-security";
import { getAccountDataSettings } from "~/fns/account-data";
import { AvatarPanel } from "~/components/settings/AvatarPanel";
import { EmailPanel } from "~/components/settings/EmailPanel";
import { RenamePanel } from "~/components/settings/RenamePanel";
import { AnalyticsPanel } from "~/components/settings/AnalyticsPanel";
import { DeleteAccountPanel } from "~/components/settings/DeleteAccountPanel";
import { ExportDataPanel } from "~/components/settings/ExportDataPanel";
import { useAction } from "~/hooks/use-action";
import { useViewer } from "~/hooks/use-viewer";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/settings/")({
  loader: async () => {
    const [security, data] = await Promise.all([getSecuritySettings(), getAccountDataSettings()]);
    return { security, data };
  },
  component: AccountSettings,
});

function AccountSettings() {
  const viewer = useViewer();
  const { security, data } = Route.useLoaderData();
  const action = useAction(changePassword, { invalidate: false });
  if (!viewer) return null;

  return (
    <div className="space-y-6">
      <Panel title="Profile">
        <div className="flex items-center justify-between p-4 text-sm text-kumo-subtle">
          <span>
            Signed in as <span className="font-medium text-kumo-strong">{viewer.name}</span> ({viewer.email})
          </span>
          <Link to="/$owner" params={{ owner: viewer.name }} className={buttonClass("secondary", "sm")}>
            Edit public profile
          </Link>
        </div>
      </Panel>
      <AvatarPanel account={viewer.name} avatarUrl={security.avatarUrl} />
      <EmailPanel emails={security.emails} hasPassword={security.hasPassword} />
      <Panel title="Change password">
        <form
          method="post"
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            const result = await action.run({
              data: { current: String(form.get("current") ?? ""), next: String(form.get("next") ?? "") },
            });
            if (result) formElement.reset();
          }}
        >
          <ErrorBanner message={action.error} />
          <TextField label="Current password" name="current" type="password" autoComplete="current-password" />
          <TextField
            label="New password"
            name="next"
            type="password"
            autoComplete="new-password"
            minLength={8}
            required
          />
          <Button type="submit" pending={action.pending}>
            Update password
          </Button>
        </form>
      </Panel>
      <Panel title="Git over HTTPS">
        <div className="space-y-2 p-4 text-sm text-kumo-subtle">
          <p>
            Use your username and a <TextLink to="/settings/tokens">personal access token</TextLink> as the password
            when cloning or pushing.
          </p>
          <pre className="overflow-x-auto rounded-md border border-kumo-hairline bg-kumo-base p-3 font-mono text-xs text-kumo-default">
            git config --global credential.helper store
          </pre>
        </div>
      </Panel>
      <AnalyticsPanel />
      <ExportDataPanel pending={data.pendingExport} />
      <RenamePanel account={viewer.name} hasPassword={security.hasPassword} />
      <DeleteAccountPanel account={viewer.name} hasPassword={security.hasPassword} soleOwnedOrgs={data.soleOwnedOrgs} />
    </div>
  );
}