import {
  deleteIntegration,
  redeliverIntegration,
  runGithubJob,
  testIntegration,
  updateIntegration,
} from "~/fns/integrations";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/components/ui/Button";
import { CheckboxField, ErrorBanner, SelectField, TextAreaField, TextField } from "~/components/ui/Field";
import { Badge, Panel, RelativeTime } from "~/components/ui/Primitives";
import {
  DEFAULT_LINEAR_MAPPING,
  INTEGRATION_EVENT_LABELS,
  INTEGRATION_EVENTS,
  INTEGRATION_KIND_LABELS,
} from "~/lib/integrations";
import type { GithubMirrorDirection, IntegrationEvent, SlackChannelRoute } from "~/lib/integrations";
import type { IntegrationsData, ScopeParams } from "./IntegrationsPage";

type Integration = IntegrationsData["integrations"][number];

const DELIVERY_OPTIONS = [
  { value: "instant", label: "Instant" },
  { value: "digest", label: "Digest (batched)" },
];
const MIRROR_OPTIONS = [
  { value: "none", label: "Off" },
  { value: "push", label: "gitfor → GitHub" },
  { value: "pull", label: "GitHub → gitfor (force mirror, overwrites)" },
];
const STATUS_TONE = { success: "green", failed: "red", dead: "red", pending: "amber" } as const;

function isEvent(value: string): value is IntegrationEvent {
  return INTEGRATION_EVENTS.some((event) => event === value);
}

/** One channel per line: `C0123ABCD: pull_request, release`. */
function parseChannels(text: string): SlackChannelRoute[] {
  return text
    .split("\n")
    .map((line) => line.trim())
    .filter(Boolean)
    .map((line) => {
      const [channel, events = ""] = line.split(":", 2);
      return {
        channel: channel.trim(),
        events: events
          .split(",")
          .map((event) => event.trim())
          .filter(isEvent),
      };
    });
}

function formatChannels(routes: SlackChannelRoute[] | undefined): string {
  return (routes ?? []).map((route) => `${route.channel}: ${route.events.join(", ")}`).join("\n");
}

function Deliveries({ integration, scope }: { integration: Integration; scope: ScopeParams }) {
  const redeliver = useAction(redeliverIntegration);
  return (
    <div className="border-t border-gray-800">
      <h3 className="px-4 pt-3 text-xs font-medium uppercase tracking-wide text-gray-500">Recent deliveries</h3>
      <ErrorBanner message={redeliver.error} />
      <ul className="divide-y divide-gray-800 p-2" data-testid="delivery-log">
        {integration.deliveries.length === 0 && <li className="px-2 py-2 text-xs text-gray-500">No deliveries yet</li>}
        {integration.deliveries.map((delivery) => (
          <li key={delivery.id} className="flex items-center gap-3 px-2 py-1.5 text-xs">
            <Badge tone={STATUS_TONE[delivery.status as keyof typeof STATUS_TONE] ?? "neutral"}>
              {delivery.status}
              {delivery.status_code ? ` ${delivery.status_code}` : ""}
            </Badge>
            <span className="text-gray-300">{delivery.event}</span>
            {delivery.direction === "inbound" && <Badge tone="purple">inbound</Badge>}
            <span className="truncate text-gray-500">{delivery.error}</span>
            <span className="ml-auto shrink-0 text-gray-500">
              {delivery.duration_ms ?? 0}ms · try {delivery.attempt} · <RelativeTime timestamp={delivery.created_at} />
            </span>
            {delivery.direction === "outbound" && (
              <Button
                size="sm"
                variant="ghost"
                onClick={() => redeliver.run({ data: { ...scope, id: integration.id, deliveryId: delivery.id } })}
              >
                Redeliver
              </Button>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

function GithubJobs({ integration, scope }: { integration: Integration; scope: ScopeParams }) {
  const job = useAction(runGithubJob);
  return (
    <div className="space-y-2 border-t border-gray-800 p-4">
      <ErrorBanner message={job.error} />
      <div className="flex gap-2">
        <Button size="sm" onClick={() => job.run({ data: { ...scope, id: integration.id, job: "import" } })}>
          Import issues and PRs
        </Button>
        <Button size="sm" onClick={() => job.run({ data: { ...scope, id: integration.id, job: "mirror" } })}>
          Sync mirror now
        </Button>
      </div>
      {integration.jobs.map((entry) => (
        <p key={entry.id} className="text-xs text-gray-400">
          <Badge tone={entry.status === "done" ? "green" : entry.status === "failed" ? "red" : "amber"}>
            {entry.status}
          </Badge>{" "}
          import · {entry.progress} {entry.error} · <RelativeTime timestamp={entry.created_at} />
        </p>
      ))}
    </div>
  );
}

export function IntegrationCard({ integration, scope }: { integration: Integration; scope: ScopeParams }) {
  const save = useAction(updateIntegration);
  const remove = useAction(deleteIntegration);
  const test = useAction(testIntegration);
  const config = integration.config;
  const chat = integration.kind !== "linear" && integration.kind !== "github";
  const mapping = { ...DEFAULT_LINEAR_MAPPING, ...config.linearMapping };

  return (
    <Panel
      title={
        <span className="flex items-center gap-2">
          <Badge tone="accent">{INTEGRATION_KIND_LABELS[integration.kind]}</Badge>
          {integration.name}
          {!integration.active && <Badge>paused</Badge>}
          {integration.deliveryMode === "digest" && <Badge tone="purple">digest</Badge>}
        </span>
      }
      actions={
        <span className="flex gap-2">
          <Button size="sm" pending={test.pending} onClick={() => test.run({ data: { ...scope, id: integration.id } })}>
            Send test event
          </Button>
          <Button size="sm" variant="danger" onClick={() => remove.run({ data: { ...scope, id: integration.id } })}>
            Delete
          </Button>
        </span>
      }
    >
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const checked = (name: string) => form.get(name) === "on";
          const text = (name: string) => String(form.get(name) ?? "").trim();
          await save.run({
            data: {
              ...scope,
              id: integration.id,
              name: text("name") || integration.name,
              active: checked("active"),
              events: INTEGRATION_EVENTS.filter((name) => checked(`event-${name}`)),
              deliveryMode: text("deliveryMode") === "digest" ? "digest" : "instant",
              digestMinutes: Number(text("digestMinutes")) || 60,
              filters: {
                branches: text("branches")
                  .split(",")
                  .map((branch) => branch.trim())
                  .filter(Boolean),
                ciFailuresOnly: checked("ciFailuresOnly"),
                skipDrafts: checked("skipDrafts"),
                skipBots: checked("skipBots"),
              },
              slackChannels:
                integration.kind === "slack" && integration.connection === "oauth"
                  ? parseChannels(text("channels"))
                  : undefined,
              linearMapping:
                integration.kind === "linear"
                  ? { opened: text("mapOpened"), merged: text("mapMerged"), closed: text("mapClosed") }
                  : undefined,
              githubRepo: integration.kind === "github" ? text("githubRepo") : undefined,
              githubMirror: integration.kind === "github" ? (text("githubMirror") as GithubMirrorDirection) : undefined,
              githubRelayWebhooks: integration.kind === "github" ? checked("githubRelay") : undefined,
            },
          });
        }}
      >
        <ErrorBanner message={save.error ?? test.error ?? remove.error} />
        <div className="grid gap-3 md:grid-cols-2">
          <TextField label="Name" name="name" defaultValue={integration.name} />
          <div className="pt-6">
            <CheckboxField label="Active" name="active" defaultChecked={integration.active} />
          </div>
        </div>
        {chat && (
          <>
            <fieldset className="grid grid-cols-1 gap-1.5 md:grid-cols-2">
              <legend className="mb-1 text-sm font-medium text-gray-300">Events</legend>
              {INTEGRATION_EVENTS.map((name) => (
                <label key={name} className="flex items-center gap-2 text-sm text-gray-300">
                  <input
                    type="checkbox"
                    name={`event-${name}`}
                    defaultChecked={integration.events.includes(name)}
                    className="accent-accent-500"
                  />
                  {INTEGRATION_EVENT_LABELS[name]}
                </label>
              ))}
            </fieldset>
            <div className="grid gap-3 md:grid-cols-2">
              <SelectField
                label="Delivery"
                name="deliveryMode"
                defaultValue={integration.deliveryMode}
                options={DELIVERY_OPTIONS}
              />
              <TextField
                label="Digest every (minutes)"
                name="digestMinutes"
                type="number"
                min={5}
                defaultValue={integration.digestMinutes}
              />
            </div>
            <TextField
              label="Branches"
              name="branches"
              defaultValue={config.filters.branches.join(", ")}
              hint="Pushes and CI on these branches only (comma separated, * wildcards). Empty means the default branch."
            />
            <div className="grid gap-2 md:grid-cols-3">
              <CheckboxField
                label="CI failures only"
                name="ciFailuresOnly"
                defaultChecked={config.filters.ciFailuresOnly}
              />
              <CheckboxField label="Skip draft PRs" name="skipDrafts" defaultChecked={config.filters.skipDrafts} />
              <CheckboxField label="Skip bots" name="skipBots" defaultChecked={config.filters.skipBots} />
            </div>
          </>
        )}
        {integration.kind === "slack" && integration.connection === "oauth" && (
          <TextAreaField
            label="Channels"
            name="channels"
            rows={3}
            defaultValue={formatChannels(config.slackChannels)}
            hint="One channel ID per line with its events, e.g. C0123ABCD: pull_request, release"
          />
        )}
        {integration.kind === "linear" && (
          <div className="grid gap-3 md:grid-cols-3">
            <TextField label="On PR open move to" name="mapOpened" defaultValue={mapping.opened} />
            <TextField label="On merge move to" name="mapMerged" defaultValue={mapping.merged} />
            <TextField
              label="On close move to"
              name="mapClosed"
              defaultValue={mapping.closed}
              hint="Empty leaves the issue alone"
            />
          </div>
        )}
        {integration.kind === "github" && (
          <div className="grid gap-3 md:grid-cols-3">
            <TextField
              label="GitHub repository"
              name="githubRepo"
              placeholder="owner/name"
              defaultValue={config.githubRepo ?? ""}
            />
            <SelectField
              label="Mirror"
              name="githubMirror"
              defaultValue={config.githubMirror ?? "none"}
              options={MIRROR_OPTIONS}
            />
            <div className="pt-6">
              <CheckboxField
                label="Relay GitHub webhooks"
                name="githubRelay"
                defaultChecked={config.githubRelayWebhooks ?? false}
              />
            </div>
          </div>
        )}
        <Button type="submit" variant="primary" size="sm" pending={save.pending}>
          Save
        </Button>
      </form>
      {integration.kind === "github" && <GithubJobs integration={integration} scope={scope} />}
      <Deliveries integration={integration} scope={scope} />
    </Panel>
  );
}