import { Container, Heading, Button, Text, Badge, toast } from "@medusajs/ui"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { useNavigate, useSearchParams } from "react-router-dom"
import { sdk } from "../../../lib/sdk"
import { showConfirm } from "../../../lib/confirm"

type Version = {
  id: string
  template_key: string
  version: number
  subject: string
  changed_by: string | null
  changed_by_name?: string | null
  created_at?: string
}

type VersionsResponse = {
  versions: Version[]
  current_version: number
  is_production_mode?: boolean
}

export default function EmailTemplateHistoryPage() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const qc = useQueryClient()
  const templateId = searchParams.get("id")

  const { data, isLoading } = useQuery({
    queryKey: ["email-template-versions", templateId],
    queryFn: async () => {
      const r = await sdk.fetch(`/admin/email-templates/${templateId}/versions`)
      if (!r.ok) throw new Error("Failed")
      return r.json() as Promise<VersionsResponse>
    },
    enabled: !!templateId,
  })

  const restoreMutation = useMutation({
    mutationFn: async (versionNumber: number) => {
      const r = await sdk.fetch(`/admin/email-templates/${templateId}/restore`, {
        method: "POST",
        body: JSON.stringify({ version_number: versionNumber }),
        headers: { "Content-Type": "application/json" },
      })
      if (!r.ok) throw new Error(await r.text())
      return r.json()
    },
    onSuccess: (_, versionNumber) => {
      qc.invalidateQueries({ queryKey: ["email-templates"] })
      qc.invalidateQueries({ queryKey: ["email-template", templateId] })
      qc.invalidateQueries({ queryKey: ["email-template-versions", templateId] })
      toast.success(`Restored to version ${versionNumber}`)
    },
    onError: (e) => toast.error((e as Error).message),
  })

  const versions = data?.versions ?? []
  const currentVersion = data?.current_version
  const isProductionMode = Boolean(data?.is_production_mode)

  return (
    <Container className="px-3 sm:px-6 max-w-3xl mx-auto pb-16">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4 sm:py-6 gap-4">
        <div>
          <Heading level="h1">Version History</Heading>
          {currentVersion !== undefined && (
            <Text size="small" className="text-ui-fg-subtle mt-1">
              Current live version: <strong>v{currentVersion}</strong>
            </Text>
          )}
        </div>
        <Button size="small" variant="secondary" onClick={() => navigate(`/email-templates/edit?id=${templateId}`)}>
          ← Back to Editor
        </Button>
      </div>

      {isProductionMode && (
        <div className="mb-4 rounded-lg border border-ui-border-base bg-ui-bg-subtle p-3">
          <Text size="small" className="text-ui-fg-subtle">
            Production mode is active. Version history is view-only, so restore actions are disabled.
          </Text>
        </div>
      )}

      {isLoading && <p className="text-ui-fg-subtle py-12 text-center">Loading...</p>}

      {!isLoading && versions.length === 0 && (
        <Text className="text-ui-fg-subtle py-8 text-center">
          No version history yet. Save a change to create the first version snapshot.
        </Text>
      )}

      {!isLoading && versions.length > 0 && (
        <div className="divide-y">
          {versions.map((v) => (
            <div key={v.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4 gap-2">
              <div className="flex-1">
                <div className="flex items-center gap-2 flex-wrap">
                  <Badge color="grey" size="2xsmall">v{v.version}</Badge>
                  {v.version === currentVersion && <Badge color="green" size="2xsmall">Current</Badge>}
                  <Text size="small" weight="plus" leading="compact">{v.subject}</Text>
                </div>
                <Text size="small" className="text-ui-fg-subtle mt-0.5">
                  {v.changed_by_name ? `Changed by: ${v.changed_by_name}` : "System"}
                  {v.created_at && ` · ${new Date(v.created_at).toLocaleString()}`}
                </Text>
              </div>
              {v.version !== currentVersion && !isProductionMode && (
                <Button
                  size="small"
                  variant="secondary"
                  isLoading={restoreMutation.isPending}
                  onClick={() =>
                    showConfirm({
                      title: `Restore v${v.version}?`,
                      text: "The current version will be saved as a snapshot before restoring.",
                    }).then((r) => r.isConfirmed && restoreMutation.mutate(v.version))
                  }
                >
                  Restore v{v.version}
                </Button>
              )}
            </div>
          ))}
        </div>
      )}
    </Container>
  )
}