import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { submitAbuseReport } from "~/fns/abuse";
import { useAction } from "~/hooks/use-action";
import { ABUSE_CATEGORIES, ABUSE_CATEGORY_LABELS, ABUSE_EMAIL } from "~/lib/abuse";
import type { AbuseCategory } from "~/lib/abuse";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { SelectField, TextAreaField, TextField } from "~/ui/Field";
import { Heading } from "~/ui/Heading";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { ExternalLink } from "~/ui/TextLink";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/abuse")({
  validateSearch: z.object({ url: z.string().max(2000).optional() }),
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/abuse",
      title: "Report abuse · gitfor",
      description: "Report phishing, malware, spam or other abuse on gitfor repositories and hosted sites.",
    }),
  }),
  component: AbusePage,
});

const CATEGORY_OPTIONS = ABUSE_CATEGORIES.map((value) => ({ value, label: ABUSE_CATEGORY_LABELS[value] }));

function field(form: FormData, name: string): string {
  return String(form.get(name) ?? "");
}

function AbusePage() {
  const { url } = Route.useSearch();
  const report = useAction(submitAbuseReport, { invalidate: false });
  const [sent, setSent] = useState(false);

  return (
    <PageContainer className="max-w-3xl space-y-6 py-10">
      <div className="space-y-2">
        <Heading>Report abuse</Heading>
        <p className="text-sm text-kumo-subtle">
          Use this form to report phishing, malware, spam, illegal content or harassment on a gitfor repository or a
          hosted site, including sites on gitforstatic.dev and custom domains served by gitfor. Sites that receive
          several independent reports are paused automatically until a site administrator reviews them.
        </p>
        <p className="text-sm text-kumo-subtle">
          You can also email <ExternalLink href={`mailto:${ABUSE_EMAIL}`}>{ABUSE_EMAIL}</ExternalLink>. Include the full
          URL and what you saw. Reports are read by the gitfor maintainers.
        </p>
      </div>
      <Panel title="What are you reporting?" padding="md">
        {sent ? (
          <Callout tone="success" as="output">
            Thanks, your report was received. We review every report and act on confirmed abuse.
          </Callout>
        ) : (
          <form
            method="post"
            className="space-y-4"
            onSubmit={async (event) => {
              event.preventDefault();
              const form = new FormData(event.currentTarget);
              const result = await report.run({
                data: {
                  url: field(form, "url"),
                  category: field(form, "category") as AbuseCategory,
                  details: field(form, "details"),
                  email: field(form, "email"),
                },
              });
              if (result) setSent(true);
            }}
          >
            <ErrorBanner message={report.error} />
            <TextField
              label="URL"
              name="url"
              type="url"
              defaultValue={url}
              placeholder="https://example.gitforstatic.dev/login"
              required
            />
            <SelectField label="Category" name="category" options={CATEGORY_OPTIONS} defaultValue="phishing" />
            <TextAreaField
              label="Details"
              name="details"
              rows={6}
              maxLength={4000}
              hint="What did you see, and when? Do not include passwords or other secrets."
            />
            <TextField
              label="Your email (optional)"
              name="email"
              type="email"
              autoComplete="email"
              hint="Only used if we need to follow up."
            />
            <Button type="submit" variant="primary" pending={report.pending}>
              Send report
            </Button>
          </form>
        )}
      </Panel>
    </PageContainer>
  );
}