import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import { Form, useFetcher, Link } from "@remix-run/react";
import { typedjson, useTypedLoaderData } from "remix-typedjson";
import { z } from "zod";
import { Button, LinkButton } from "~/components/primitives/Buttons";
import { Input } from "~/components/primitives/Input";
import { PaginationControls } from "~/components/primitives/Pagination";
import { Paragraph } from "~/components/primitives/Paragraph";
import {
  Table,
  TableBlankRow,
  TableBody,
  TableCell,
  TableHeader,
  TableHeaderCell,
  TableRow,
} from "~/components/primitives/Table";
import { prisma } from "~/db.server";
import { dashboardAction, dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
import { createSearchParams } from "~/utils/searchParams";
import { seedLlmPricing, syncLlmCatalog } from "@internal/llm-model-catalog";
import { llmPricingRegistry } from "~/v3/llmPricingRegistry.server";

const PAGE_SIZE = 50;

const SearchParams = z.object({
  page: z.coerce.number().optional(),
  search: z.string().optional(),
});

export const loader = dashboardLoader(
  { authorization: { requireSuper: true } },
  async ({ request }) => {
    const searchParams = createSearchParams(request.url, SearchParams);
    if (!searchParams.success) throw new Error(searchParams.error);
    const { page: rawPage, search } = searchParams.params.getAll();
    const page = rawPage ?? 1;

    const where = {
      projectId: null as string | null,
      ...(search ? { modelName: { contains: search, mode: "insensitive" as const } } : {}),
    };

    const [rawModels, total] = await Promise.all([
      prisma.llmModel.findMany({
        where,
        include: {
          pricingTiers: { include: { prices: true }, orderBy: { priority: "asc" } },
        },
        orderBy: { modelName: "asc" },
        skip: (page - 1) * PAGE_SIZE,
        take: PAGE_SIZE,
      }),
      prisma.llmModel.count({ where }),
    ]);

    // Convert Prisma Decimal to plain numbers for serialization
    const models = rawModels.map((m) => ({
      ...m,
      pricingTiers: m.pricingTiers.map((t) => ({
        ...t,
        prices: t.prices.map((p) => ({ ...p, price: Number(p.price) })),
      })),
    }));

    return typedjson({
      models,
      total,
      page,
      pageCount: Math.ceil(total / PAGE_SIZE),
      filters: { search },
    });
  }
);

export const action = dashboardAction(
  { authorization: { requireSuper: true } },
  async ({ request }) => {
    const formData = await request.formData();
    const _action = formData.get("_action");

    if (_action === "seed") {
      console.log("[admin] seed action started");
      const result = await seedLlmPricing(prisma);
      console.log(
        `[admin] seed complete: ${result.modelsCreated} created, ${result.modelsSkipped} skipped, ${result.modelsUpdated} updated`
      );
      await llmPricingRegistry?.reload();
      console.log("[admin] registry reloaded after seed");
      return typedjson({
        success: true,
        message: `Seeded: ${result.modelsCreated} created, ${result.modelsSkipped} skipped, ${result.modelsUpdated} updated`,
      });
    }

    if (_action === "sync") {
      console.log("[admin] sync catalog action started");
      const result = await syncLlmCatalog(prisma);
      console.log(
        `[admin] sync complete: ${result.modelsUpdated} updated, ${result.modelsSkipped} skipped`
      );
      await llmPricingRegistry?.reload();
      console.log("[admin] registry reloaded after sync");
      return typedjson({
        success: true,
        message: `Synced: ${result.modelsUpdated} updated, ${result.modelsSkipped} skipped`,
      });
    }

    if (_action === "reload") {
      console.log("[admin] reload action started");
      await llmPricingRegistry?.reload();
      console.log("[admin] registry reloaded");
      return typedjson({ success: true, message: "Registry reloaded" });
    }

    if (_action === "test") {
      const modelString = formData.get("modelString");
      if (typeof modelString !== "string" || !modelString) {
        return typedjson({ testResult: null });
      }

      // Use the registry's match() which handles prefix stripping automatically
      const matched = llmPricingRegistry?.match(modelString) ?? null;

      return typedjson({
        testResult: {
          modelString,
          match: matched ? { friendlyId: matched.friendlyId, modelName: matched.modelName } : null,
        },
      });
    }

    if (_action === "delete") {
      const modelId = formData.get("modelId");
      if (typeof modelId === "string") {
        await prisma.llmModel.delete({ where: { id: modelId } });
        await llmPricingRegistry?.reload();
      }
      return typedjson({ success: true });
    }

    return typedjson({ error: "Unknown action" }, { status: 400 });
  }
);

export default function AdminLlmModelsRoute() {
  const { models, filters, page, pageCount, total } = useTypedLoaderData<typeof loader>();
  const seedFetcher = useFetcher();
  const syncFetcher = useFetcher();
  const reloadFetcher = useFetcher();
  const testFetcher = useFetcher<{
    testResult?: {
      modelString: string;
      match: { friendlyId: string; modelName: string } | null;
    } | null;
  }>();

  const testResult = testFetcher.data?.testResult;

  return (
    <main className="flex h-full min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4">
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <Form className="flex items-center gap-2">
            <Input
              placeholder="Search models..."
              variant="medium"
              icon={MagnifyingGlassIcon}
              fullWidth={true}
              name="search"
              defaultValue={filters.search}
              autoFocus
            />
            <Button type="submit" variant="secondary/medium">
              Search
            </Button>
          </Form>

          <div className="flex items-center gap-2">
            <seedFetcher.Form method="post">
              <input type="hidden" name="_action" value="seed" />
              <Button
                type="submit"
                variant="tertiary/small"
                disabled={seedFetcher.state !== "idle"}
              >
                {seedFetcher.state !== "idle" ? "Seeding..." : "Seed defaults"}
              </Button>
            </seedFetcher.Form>

            <syncFetcher.Form method="post">
              <input type="hidden" name="_action" value="sync" />
              <Button
                type="submit"
                variant="tertiary/small"
                disabled={syncFetcher.state !== "idle"}
              >
                {syncFetcher.state !== "idle" ? "Syncing..." : "Sync catalog"}
              </Button>
            </syncFetcher.Form>

            <reloadFetcher.Form method="post">
              <input type="hidden" name="_action" value="reload" />
              <Button
                type="submit"
                variant="tertiary/small"
                disabled={reloadFetcher.state !== "idle"}
              >
                {reloadFetcher.state !== "idle" ? "Reloading..." : "Reload registry"}
              </Button>
            </reloadFetcher.Form>

            <LinkButton to="/admin/llm-models/missing" variant="tertiary/small">
              Missing models
            </LinkButton>

            <LinkButton to="/admin/llm-models/new" variant="primary/small">
              Add model
            </LinkButton>
          </div>
        </div>

        {/* Model tester */}
        <div className="rounded-md border border-grid-dimmed bg-background-bright p-3 space-y-2">
          <label className="text-xs font-medium text-text-dimmed">
            Test model string — paste a model name to see which pricing model matches
          </label>
          <testFetcher.Form method="post" className="flex items-center gap-2">
            <input type="hidden" name="_action" value="test" />
            <Input
              name="modelString"
              placeholder="e.g. anthropic/claude-haiku-4-5-20251001, gpt-4o-mini, mistral/mistral-large-3"
              variant="medium"
              fullWidth
              className="font-mono text-xs"
            />
            <Button type="submit" variant="secondary/small" disabled={testFetcher.state !== "idle"}>
              Test
            </Button>
          </testFetcher.Form>
          {testResult !== undefined && testResult !== null && (
            <div className="text-xs space-y-1">
              <span className="text-text-dimmed">
                Testing:{" "}
                <span className="font-mono text-text-bright">{testResult.modelString}</span>
              </span>
              {testResult.match ? (
                <div className="text-green-400">
                  Match:{" "}
                  <Link
                    to={`/admin/llm-models/${testResult.match.friendlyId}`}
                    className="underline font-medium"
                  >
                    {testResult.match.modelName}
                  </Link>
                </div>
              ) : (
                <div className="text-red-400">No match found — this model has no pricing data</div>
              )}
            </div>
          )}
        </div>

        <div className="flex items-center justify-between">
          <Paragraph className="text-text-dimmed">
            {total} global models (page {page} of {pageCount})
          </Paragraph>
          <PaginationControls currentPage={page} totalPages={pageCount} />
        </div>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderCell>Model Name</TableHeaderCell>
              <TableHeaderCell>Source</TableHeaderCell>
              <TableHeaderCell>Input $/tok</TableHeaderCell>
              <TableHeaderCell>Output $/tok</TableHeaderCell>
              <TableHeaderCell>Other prices</TableHeaderCell>
            </TableRow>
          </TableHeader>
          <TableBody>
            {models.length === 0 ? (
              <TableBlankRow colSpan={5}>
                <Paragraph>No models found</Paragraph>
              </TableBlankRow>
            ) : (
              models.map((model) => {
                // Get default tier prices
                const defaultTier =
                  model.pricingTiers.find((t) => t.isDefault) ?? model.pricingTiers[0];
                const priceMap = defaultTier
                  ? Object.fromEntries(defaultTier.prices.map((p) => [p.usageType, p.price]))
                  : {};
                const inputPrice = priceMap["input"];
                const outputPrice = priceMap["output"];
                const otherPrices = defaultTier
                  ? defaultTier.prices.filter(
                      (p) => p.usageType !== "input" && p.usageType !== "output"
                    )
                  : [];

                return (
                  <TableRow key={model.id}>
                    <TableCell>
                      <Link
                        to={`/admin/llm-models/${model.friendlyId}`}
                        className="font-medium text-indigo-500 underline"
                      >
                        {model.modelName}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <span
                        className={`inline-flex rounded-sm px-1.5 py-0.5 text-[11px] font-medium ${
                          model.source === "admin"
                            ? "bg-amber-500/20 text-amber-400"
                            : "bg-background-raised text-text-dimmed"
                        }`}
                      >
                        {model.source ?? "default"}
                      </span>
                    </TableCell>
                    <TableCell>
                      <span className="text-xs font-mono text-text-bright">
                        {inputPrice != null ? formatPrice(inputPrice) : "-"}
                      </span>
                    </TableCell>
                    <TableCell>
                      <span className="text-xs font-mono text-text-bright">
                        {outputPrice != null ? formatPrice(outputPrice) : "-"}
                      </span>
                    </TableCell>
                    <TableCell>
                      {otherPrices.length > 0 ? (
                        <span
                          className="text-xs text-text-dimmed"
                          title={otherPrices.map((p) => p.usageType).join(", ")}
                        >
                          +{otherPrices.length} more
                        </span>
                      ) : (
                        <span className="text-xs text-text-dimmed">-</span>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })
            )}
          </TableBody>
        </Table>

        <PaginationControls currentPage={page} totalPages={pageCount} />
      </div>
    </main>
  );
}

/** Format a per-token price as $/M tokens for readability */
function formatPrice(perToken: number): string {
  const perMillion = perToken * 1_000_000;
  if (perMillion >= 1) return `$${perMillion.toFixed(2)}/M`;
  if (perMillion >= 0.01) return `$${perMillion.toFixed(4)}/M`;
  return `$${perMillion.toFixed(6)}/M`;
}