import { ReportLink } from "~/components/ReportLink";
import { createFileRoute, Link, redirect } from "@tanstack/react-router";
import { z } from "zod";
import { getAccountPage, setOrgMember, updateOrgSettings, updateProfile } from "~/fns/account";
import { getProfileExtras } from "~/fns/profile";
import { ProBadge } from "~/components/billing/ProBadge";
import { ContributionSection } from "~/components/profile/ContributionSection";
import { getContributions } from "~/fns/contributions";
import { FollowPanel } from "~/components/profile/FollowPanel";
import { useAction } from "~/hooks/use-action";
import { AvatarUploadButton } from "~/components/settings/AvatarUploadButton";
import { RepoList } from "~/components/RepoList";
import { ActivityFeed } from "~/components/ActivityFeed";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { Markdown } from "~/ui/Markdown";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";
import { ExternalLink, TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";
import { safeWebsiteUrl } from "~/lib/validation";
import { seo } from "~/utils/seo";

const TABS = [
  { id: "repositories", label: "Repositories" },
  { id: "stars", label: "Stars" },
  { id: "people", label: "People" },
] as const;

export const Route = createFileRoute("/$owner/")({
  validateSearch: z.object({
    tab: z.enum(["repositories", "stars", "people"]).optional(),
    year: z.number().int().min(1970).max(9999).optional(),
    day: z
      .string()
      .regex(/^\d{4}-\d{2}-\d{2}$/)
      .optional(),
    repoPage: z.number().int().min(1).max(500).optional(),
    activityPage: z.number().int().min(1).max(500).optional(),
  }),
  loaderDeps: ({ search }) => ({
    tab: search.tab ?? "repositories",
    year: search.year ?? null,
    day: search.day ?? null,
    repoPage: search.repoPage ?? 1,
    activityPage: search.activityPage ?? 1,
  }),
  loader: async ({ params, deps }) => {
    const page = await getAccountPage({ data: { name: params.owner, tab: deps.tab } });
    if (page.account.name.toLowerCase() !== params.owner.toLowerCase()) {
      throw redirect({ to: "/$owner", params: { owner: page.account.name }, search: { tab: deps.tab } });
    }
    const [extras, contributions] = await Promise.all([
      getProfileExtras({ data: { name: page.account.name } }),
      deps.tab === "repositories"
        ? getContributions({
            data: {
              name: page.account.name,
              year: deps.year,
              day: deps.day,
              repoPage: deps.repoPage,
              activityPage: deps.activityPage,
            },
          })
        : null,
    ]);
    return { ...page, extras, contributions };
  },
  head: ({ loaderData, match, params }) => {
    if (!loaderData) return { meta: [{ title: `${params.owner} · gitfor` }] };
    const { account } = loaderData;
    const name = account.displayName ? `${account.displayName} (${account.name})` : account.name;
    return {
      meta: seo({
        origin: match.context.publicUrl,
        path: `/${account.name}`,
        title: `${name} · gitfor`,
        description:
          account.bio ??
          (account.kind === "org" ? `The ${account.name} organization on gitfor` : `${account.name} on gitfor`),
        image: loaderData.ogImage,
        imageAlt: name,
      }),
    };
  },
  component: AccountPage,
});

function MemberForm({ org }: { org: string }) {
  const action = useAction(setOrgMember);
  return (
    <form
      className="flex items-end gap-2 border-t border-kumo-hairline p-4"
      onSubmit={(event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const role = form.get("role");
        action.run({
          data: {
            org,
            username: String(form.get("username") ?? ""),
            role: role === "owner" ? "owner" : role === "none" ? "none" : "member",
          },
        });
      }}
      title="Users who are not members yet receive an invitation they must accept."
    >
      <div className="flex-1">
        <TextField label="Username" name="username" required />
      </div>
      <SelectField
        label="Role"
        name="role"
        options={[
          { value: "member", label: "Member" },
          { value: "owner", label: "Owner" },
          { value: "none", label: "Remove" },
        ]}
      />
      <Button type="submit" pending={action.pending}>
        Apply
      </Button>
      <ErrorBanner message={action.error} />
    </form>
  );
}

type OrgSettingsValue = { defaultPermission: "none" | "read" | "write"; membersVisibility: "public" | "members" };

function OrgSettingsForm({ org, settings }: { org: string; settings: OrgSettingsValue }) {
  const action = useAction(updateOrgSettings);
  return (
    <form
      className="grid gap-3 border-t border-kumo-hairline p-4 sm:grid-cols-[1fr_1fr_auto] sm:items-end"
      onSubmit={(event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const permission = form.get("defaultPermission");
        action.run({
          data: {
            org,
            defaultPermission: permission === "none" ? "none" : permission === "write" ? "write" : "read",
            membersVisibility: form.get("membersVisibility") === "members" ? "members" : "public",
          },
        });
      }}
    >
      <SelectField
        label="Member permission on org repositories"
        name="defaultPermission"
        defaultValue={settings.defaultPermission}
        options={[
          { value: "none", label: "None (collaborators only)" },
          { value: "read", label: "Read" },
          { value: "write", label: "Write" },
        ]}
      />
      <SelectField
        label="Member list visible to"
        name="membersVisibility"
        defaultValue={settings.membersVisibility}
        options={[
          { value: "public", label: "Everyone" },
          { value: "members", label: "Members only" },
        ]}
      />
      <Button type="submit" pending={action.pending}>
        Save
      </Button>
      <ErrorBanner message={action.error} />
    </form>
  );
}

function ProfileEditor({
  name,
  displayName,
  bio,
  website,
}: {
  name: string;
  displayName: string | null;
  bio: string | null;
  website: string | null;
}) {
  const action = useAction(updateProfile);
  return (
    <form
      className="space-y-3"
      onSubmit={(event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const value = (key: string) => String(form.get(key) ?? "").trim() || null;
        action.run({
          data: { account: name, displayName: value("displayName"), bio: value("bio"), website: value("website") },
        });
      }}
    >
      <ErrorBanner message={action.error} />
      <TextField label="Display name" name="displayName" defaultValue={displayName ?? ""} />
      <TextField label="Bio" name="bio" defaultValue={bio ?? ""} />
      <TextField label="Website" name="website" defaultValue={website ?? ""} />
      <Button type="submit" size="sm" pending={action.pending}>
        Save profile
      </Button>
    </form>
  );
}

const ORG_ADMIN_LINKS = [
  { to: "/orgs/$org/runners", label: "Runners" },
  { to: "/orgs/$org/integrations", label: "Integrations" },
  { to: "/orgs/$org/containers", label: "Containers" },
  { to: "/orgs/$org/settings", label: "Settings" },
] as const;

/** Org members see where the org's usage goes; owners also get the management pages. */
function OrgManageLinks({ org, canAdmin }: { org: string; canAdmin: boolean }) {
  const linkClass = "block text-sm text-kumo-subtle hover:text-accent-400";
  return (
    <nav aria-label="Organization" className="space-y-1">
      <Link to="/orgs/$org/billing" params={{ org }} className={linkClass}>
        Billing and usage
      </Link>
      {canAdmin &&
        ORG_ADMIN_LINKS.map((item) => (
          <Link key={item.to} to={item.to} params={{ org }} className={linkClass}>
            {item.label}
          </Link>
        ))}
    </nav>
  );
}

function AccountPage() {
  const data = Route.useLoaderData();
  const { tab = "repositories" } = Route.useSearch();
  const { account, extras } = data;
  const tabs = TABS.filter((item) => (account.kind === "org" ? item.id !== "stars" : item.id !== "people"));

  return (
    <PageContainer className="grid gap-8 md:grid-cols-[260px_1fr]">
      <aside className="animate-rise space-y-4">
        <Avatar name={account.name} size="lg" src={extras.avatarUrl ? `${extras.avatarUrl}?s=160` : null} />
        {data.canAdmin && <AvatarUploadButton account={account.name} />}
        <div>
          <Heading>
            {account.displayName ?? account.name}
            {extras.pro && <ProBadge className="ml-2 align-middle" />}
          </Heading>
          <p className="font-mono text-sm text-kumo-subtle">{account.name}</p>
        </div>
        {account.kind === "org" && <Badge>Organization</Badge>}
        {account.disabled && <Badge tone="danger">Account disabled</Badge>}
        {account.kind === "org" && (data.canViewBilling || data.canAdmin) && (
          <OrgManageLinks org={account.name} canAdmin={data.canAdmin} />
        )}
        {account.kind === "user" && (
          <FollowPanel
            name={account.name}
            followers={extras.followers}
            following={extras.following}
            isFollowing={extras.isFollowing}
            canFollow={extras.canFollow}
          />
        )}
        {account.bio && <p className="text-sm text-kumo-default">{account.bio}</p>}
        <Link
          to="/projects/$owner"
          params={{ owner: account.name }}
          className="block text-sm text-kumo-subtle hover:text-accent-400"
        >
          Projects
        </Link>
        {safeWebsiteUrl(account.website) && (
          <ExternalLink
            href={safeWebsiteUrl(account.website) ?? ""}
            rel="nofollow noopener noreferrer"
            className="block truncate text-sm"
          >
            {account.website}
          </ExternalLink>
        )}
        {data.orgs.length > 0 && (
          <div>
            <h2 className="label-small mb-2 text-kumo-subtle">Organizations</h2>
            <div className="flex flex-wrap gap-2">
              {data.orgs.map((org) => (
                <Link key={org} to="/$owner" params={{ owner: org }} title={org}>
                  <Avatar name={org} size="md" />
                </Link>
              ))}
            </div>
          </div>
        )}
        <ReportLink owner={account.name} path={`/${account.name}`} label="Report account" className="block" />
        {data.canAdmin && (
          <ProfileEditor
            name={account.name}
            displayName={account.displayName}
            bio={account.bio}
            website={account.website}
          />
        )}
      </aside>
      <section className="min-w-0 space-y-4">
        {extras.readmeHtml && tab === "repositories" && (
          <Panel title={`${account.name} / README.md`}>
            <Markdown html={extras.readmeHtml} className="p-5" />
          </Panel>
        )}
        {tab === "repositories" && data.contributions && (
          <ContributionSection owner={account.name} contributions={data.contributions} />
        )}
        <nav className="flex gap-1 border-b border-kumo-hairline">
          {tabs.map((item) => (
            <Link
              key={item.id}
              to="/$owner"
              params={{ owner: account.name }}
              search={{ tab: item.id }}
              className={cn(
                "-mb-px border-b-2 px-3 py-2 text-sm",
                tab === item.id
                  ? "border-accent-500 text-white"
                  : "border-transparent text-kumo-subtle hover:text-kumo-strong",
              )}
            >
              {item.label}
            </Link>
          ))}
        </nav>
        {tab === "people" ? (
          <Panel title="Members">
            <ul className="divide-y divide-kumo-hairline">
              {data.members.map((member) => (
                <li key={member.name} className="flex items-center gap-3 px-4 py-2.5">
                  <Avatar name={member.name} size="sm" />
                  <TextLink to="/$owner" params={{ owner: member.name }} tone="subtle" className="text-sm">
                    {member.name}
                  </TextLink>
                  <Badge className="ml-auto">{member.role}</Badge>
                </li>
              ))}
            </ul>
            {data.canAdmin && data.invitations.length > 0 && (
              <ul className="divide-y divide-kumo-hairline border-t border-kumo-hairline">
                {data.invitations.map((invitation) => (
                  <li key={invitation.name} className="flex items-center gap-3 px-4 py-2.5 text-sm text-kumo-subtle">
                    <Avatar name={invitation.name} size="sm" />
                    {invitation.name}
                    <Badge className="ml-auto">invited as {invitation.role}</Badge>
                  </li>
                ))}
              </ul>
            )}
            {data.canAdmin && <MemberForm org={account.name} />}
            {data.canAdmin && data.orgSettings && <OrgSettingsForm org={account.name} settings={data.orgSettings} />}
          </Panel>
        ) : (
          <Panel>
            <RepoList repos={data.repos} showOwnerAvatar={false} />
          </Panel>
        )}
        {account.kind === "user" && tab === "repositories" && (
          <div className="space-y-2">
            <h2 className="label-small text-kumo-subtle">Recent activity</h2>
            <ActivityFeed items={data.feed} />
          </div>
        )}
      </section>
    </PageContainer>
  );
}