import { Hono } from "hono";
import { html, raw } from "hono/html";
import { layout } from "../views/layouts/main";
import { requireAuth, type Session } from "../lib/session";
import { csrfField } from "../lib/csrf";
import { isValidTID } from "../lib/validation";
import {
	createMarkdownContent,
	getDocumentContentText,
} from "../lib/content-types";
import { marked } from "marked";
import type { AppVariables } from "../types";

export const documentRoutes = new Hono<{ Variables: AppVariables }>();

const DOCUMENT_COLLECTION = "site.standard.document";
const PUBLICATION_COLLECTION = "site.standard.publication";

// List all documents
documentRoutes.get("/", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const filter = c.req.query("filter") || "all";

	try {
		const response = await session.agent!.com.atproto.repo.listRecords({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			limit: 100,
		});

		let documents = response.data.records;

		// Filter by draft/published status
		if (filter === "drafts") {
			documents = documents.filter((doc: any) => {
				const tags = doc.value.tags || [];
				return tags.includes("draft");
			});
		} else if (filter === "published") {
			documents = documents.filter((doc: any) => {
				const tags = doc.value.tags || [];
				return !tags.includes("draft");
			});
		}

		// Sort by publishedAt or updatedAt
		documents.sort((a: any, b: any) => {
			const dateA = new Date(
				a.value.updatedAt || a.value.publishedAt,
			).getTime();
			const dateB = new Date(
				b.value.updatedAt || b.value.publishedAt,
			).getTime();
			return dateB - dateA;
		});

		const content = html`
      <div class="documents">
        <div class="documents-header">
          <h1>Documents</h1>
          <a href="/documents/new" class="btn btn-primary">New Document</a>
        </div>

        <div class="filters">
          <a
            href="/documents"
            class="filter ${filter === "all" ? "active" : ""}"
            >All</a
          >
          <a
            href="/documents?filter=drafts"
            class="filter ${filter === "drafts" ? "active" : ""}"
            >Drafts</a
          >
          <a
            href="/documents?filter=published"
            class="filter ${filter === "published" ? "active" : ""}"
            >Published</a
          >
        </div>

        ${
					documents.length === 0
						? html`
              <p class="empty">
                No documents yet.
                <a href="/documents/new">Create your first document</a>.
              </p>
            `
						: html`
              <ul class="document-list">
                ${documents.map((doc: any) => {
									const rkey = doc.uri.split("/").pop();
									const value = doc.value;
									const isDraft = (value.tags || []).includes("draft");
									const date = value.publishedAt
										? new Date(value.publishedAt).toLocaleDateString()
										: "";

									return html`
                    <li
                      class="document-item ${isDraft ? "draft" : "published"}"
                    >
                      <a href="/documents/${rkey}">
                        <span class="title">${value.title}</span>
                        <span class="meta">
                          ${
														isDraft
															? html`<span class="badge badge-draft">Draft</span>`
															: ""
													}
                          <span class="date">${date}</span>
                        </span>
                      </a>
                    </li>
                  `;
								})}
              </ul>
            `
				}
      </div>
    `;

		return c.html(layout(content, { title: "Documents - sitebase", session }));
	} catch (error) {
		console.error("Error fetching documents:", error);
		const content = html`<p class="error">
      Error loading documents. Please try again.
    </p>`;
		return c.html(layout(content, { title: "Documents - sitebase", session }));
	}
});

// New document form
documentRoutes.get("/new", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	// Get publication to use as site reference
	let publicationUri = "";
	try {
		const response = await session.agent!.com.atproto.repo.listRecords({
			repo: session.did!,
			collection: PUBLICATION_COLLECTION,
			limit: 1,
		});
		if (response.data.records[0]) {
			publicationUri = response.data.records[0].uri;
		}
	} catch (e) {
		// No publication yet, will need URL
	}

	const csrfToken = c.get("csrfToken") as string;

	const content = html`
    <div class="form-page">
      <h1>New Document</h1>

      <form action="/documents/new" method="POST" class="document-form">
        ${csrfField(csrfToken)}
        <input type="hidden" name="publicationUri" value="${publicationUri}" />

        <div class="form-group">
          <label for="title">Title *</label>
          <input type="text" id="title" name="title" required maxlength="128" />
        </div>

        <div class="form-group">
          <label for="path">Path</label>
          <input type="text" id="path" name="path" placeholder="/my-post" />
          <small>The URL path for this document (e.g., /my-post)</small>
        </div>

        <div class="form-group">
          <label for="description">Description</label>
          <textarea
            id="description"
            name="description"
            rows="2"
            maxlength="300"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="content">Content (Markdown)</label>
          <textarea
            id="content"
            name="content"
            rows="20"
            class="content-editor"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="publishDate">Publish Date</label>
          <input type="datetime-local" id="publishDate" name="publishDate" />
          <small
            >Only past dates allowed. Leave empty to use current date when
            publishing.</small
          >
        </div>

        <div class="form-group">
          <label for="tags">Tags (comma-separated)</label>
          <input
            type="text"
            id="tags"
            name="tags"
            placeholder="draft, tutorial"
            value="draft"
          />
        </div>

        <div class="form-actions">
          <button
            type="submit"
            name="action"
            value="save"
            class="btn btn-secondary"
          >
            Save Draft
          </button>
          <button
            type="submit"
            name="action"
            value="publish"
            class="btn btn-primary"
          >
            Publish
          </button>
        </div>
      </form>
    </div>

    <script>
      // Set default publish date to current date/time
      const publishDateInput = document.getElementById("publishDate");
      if (publishDateInput) {
        const now = new Date();
        now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
        publishDateInput.value = now.toISOString().slice(0, 16);
      }

      // Auto-save functionality
      const form = document.querySelector(".document-form");
      const contentField = document.getElementById("content");
      let saveTimeout;

      contentField.addEventListener("input", () => {
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(() => {
          // Could implement auto-save here
          console.log("Would auto-save...");
        }, 2000);
      });

      // Validate publish date is not in the future
      form.addEventListener("submit", (e) => {
        const publishDate = publishDateInput?.value;
        if (publishDate) {
          const selectedDate = new Date(publishDate);
          const now = new Date();
          if (selectedDate > now) {
            e.preventDefault();
            alert("Publish date must be in the past or present.");
            publishDateInput.focus();
          }
        }
      });
    </script>
  `;

	return c.html(layout(content, { title: "New Document - sitebase", session }));
});

// Handle document creation
documentRoutes.post("/new", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const body = await c.req.parseBody();
	const title = body.title as string;
	const path = (body.path as string) || undefined;
	const description = (body.description as string) || undefined;
	const content = (body.content as string) || undefined;
	const tagsStr = (body.tags as string) || "";
	const action = body.action as string;
	const publicationUri = body.publicationUri as string;
	const publishDateStr = body.publishDate as string;

	// Parse tags
	let tags = tagsStr
		.split(",")
		.map((t) => t.trim())
		.filter((t) => t);

	// If publishing, remove draft tag
	if (action === "publish") {
		tags = tags.filter((t) => t !== "draft");
	} else if (!tags.includes("draft")) {
		tags.push("draft");
	}

	const now = new Date().toISOString();

	// Determine publish date
	let publishedAt: string | undefined;
	if (action === "publish") {
		if (publishDateStr) {
			const parsedDate = new Date(publishDateStr);
			if (!isNaN(parsedDate.getTime())) {
				publishedAt = parsedDate.toISOString();
			}
		}
		if (!publishedAt) {
			publishedAt = now;
		}
	}

	try {
		const rkey = generateTID();

		// Determine site reference
		let site = publicationUri;
		if (!site) {
			// Fall back to a URL if no publication
			site = `https://${session.handle}.bsky.social`;
		}

		const record: Record<string, any> = {
			$type: DOCUMENT_COLLECTION,
			title,
			site,
			publishedAt,
			updatedAt: now,
		};

		if (path) record.path = path.startsWith("/") ? path : `/${path}`;
		if (description) record.description = description;
		if (content) {
			record.content = createMarkdownContent(content);
			record.textContent = content;
		}
		if (tags.length > 0) record.tags = tags;

		await session.agent!.com.atproto.repo.createRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
			record,
		});

		return c.redirect(`/documents/${rkey}`);
	} catch (error) {
		console.error("Error creating document:", error);
		return c.redirect("/documents/new?error=create_failed");
	}
});

// View single document
documentRoutes.get("/:rkey", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	// Validate rkey format
	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	try {
		const response = await session.agent!.com.atproto.repo.getRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		const doc = response.data.value as any;
		const isDraft = (doc.tags || []).includes("draft");
		const csrfToken = c.get("csrfToken") as string;

		const content = html`
      <div class="document-view">
        <div class="document-header">
          <h1>${doc.title}</h1>
          <div class="document-meta">
            ${
							isDraft
								? html`<span class="badge badge-draft">Draft</span>`
								: html`<span class="badge badge-published">Published</span>`
						}
            ${
							doc.publishedAt
								? html`<span class="date"
                  >Published:
                  ${new Date(doc.publishedAt).toLocaleDateString()}</span
                >`
								: ""
						}
            ${doc.path ? html`<span class="path">Path: ${doc.path}</span>` : ""}
          </div>
        </div>

        ${
					doc.description
						? html`<p class="description">${doc.description}</p>`
						: ""
				}

        <div class="document-content">
          ${(() => {
						const text = getDocumentContentText(doc);
						if (!text) return html`<p class="empty">(No content)</p>`;
						const htmlContent = marked.parse(text) as string;
						return html`<div class="markdown-body">${raw(htmlContent)}</div>`;
					})()}
        </div>

        <div class="actions">
          <a href="/documents/${rkey}/edit" class="btn btn-primary">Edit</a>
          ${
						isDraft
							? html`
                <form
                  action="/documents/${rkey}/publish"
                  method="POST"
                  style="display:inline"
                >
                  ${csrfField(csrfToken)}
                  <button type="submit" class="btn btn-success">Publish</button>
                </form>
              `
							: html`
                <form
                  action="/documents/${rkey}/unpublish"
                  method="POST"
                  style="display:inline"
                >
                  ${csrfField(csrfToken)}
                  <button type="submit" class="btn btn-secondary">
                    Unpublish
                  </button>
                </form>
              `
					}
          <form
            action="/documents/${rkey}/delete"
            method="POST"
            style="display:inline"
            onsubmit="return confirm('Are you sure you want to delete this document?')"
          >
            ${csrfField(csrfToken)}
            <button type="submit" class="btn btn-danger">Delete</button>
          </form>
          <a href="/documents" class="btn btn-secondary">Back to List</a>
        </div>
      </div>
    `;

		return c.html(
			layout(content, { title: `${doc.title} - sitebase`, session }),
		);
	} catch (error) {
		console.error("Error fetching document:", error);
		return c.redirect("/documents");
	}
});

// Edit document form
documentRoutes.get("/:rkey/edit", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	try {
		const response = await session.agent!.com.atproto.repo.getRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		const doc = response.data.value as any;
		const csrfToken = c.get("csrfToken") as string;

		const content = html`
      <div class="form-page">
        <h1>Edit Document</h1>

        <form
          action="/documents/${rkey}/edit"
          method="POST"
          class="document-form"
        >
          ${csrfField(csrfToken)}
          <div class="form-group">
            <label for="title">Title *</label>
            <input
              type="text"
              id="title"
              name="title"
              value="${doc.title}"
              required
              maxlength="128"
            />
          </div>

          <div class="form-group">
            <label for="path">Path</label>
            <input
              type="text"
              id="path"
              name="path"
              value="${doc.path || ""}"
            />
          </div>

          <div class="form-group">
            <label for="description">Description</label>
            <textarea
              id="description"
              name="description"
              rows="2"
              maxlength="300"
            >
${doc.description || ""}</textarea
            >
          </div>

          <div class="form-group">
            <label for="content">Content (Markdown)</label>
            <textarea
              id="content"
              name="content"
              rows="20"
              class="content-editor"
            >
${getDocumentContentText(doc) || ""}</textarea
            >
          </div>

          <div class="form-group">
            <label for="tags">Tags (comma-separated)</label>
            <input
              type="text"
              id="tags"
              name="tags"
              value="${(doc.tags || []).join(", ")}"
            />
          </div>

          <div class="form-group">
            <label for="publishDate">Publish Date</label>
            <input
              type="datetime-local"
              id="publishDate"
              name="publishDate"
              value="${
								doc.publishedAt
									? new Date(doc.publishedAt).toISOString().slice(0, 16)
									: ""
							}"
            />
            <small
              >Only past dates allowed. Set to change the published date.</small
            >
          </div>

          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save Changes</button>
            <a href="/documents/${rkey}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>

      <script>
        const form = document.querySelector(".document-form");
        const publishDateInput = document.getElementById("publishDate");

        form.addEventListener("submit", (e) => {
          const publishDate = publishDateInput?.value;
          if (publishDate) {
            const selectedDate = new Date(publishDate);
            const now = new Date();
            if (selectedDate > now) {
              e.preventDefault();
              alert("Publish date must be in the past or present.");
              publishDateInput.focus();
            }
          }
        });
      </script>
    `;

		return c.html(
			layout(content, { title: `Edit: ${doc.title} - sitebase`, session }),
		);
	} catch (error) {
		console.error("Error fetching document:", error);
		return c.redirect("/documents");
	}
});

// Handle document update
documentRoutes.post("/:rkey/edit", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	const body = await c.req.parseBody();

	try {
		// Get existing record
		const existing = await session.agent!.com.atproto.repo.getRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		const oldDoc = existing.data.value as any;

		const title = body.title as string;
		const path = (body.path as string) || undefined;
		const description = (body.description as string) || undefined;
		const content = (body.content as string) || undefined;
		const tagsStr = (body.tags as string) || "";
		const publishDateStr = body.publishDate as string;
		const tags = tagsStr
			.split(",")
			.map((t) => t.trim())
			.filter((t) => t);

		// Determine publishedAt
		let publishedAt = oldDoc.publishedAt;
		if (publishDateStr) {
			const parsedDate = new Date(publishDateStr);
			if (!isNaN(parsedDate.getTime())) {
				publishedAt = parsedDate.toISOString();
			}
		}

		const record: Record<string, any> = {
			$type: DOCUMENT_COLLECTION,
			title,
			site: oldDoc.site,
			publishedAt,
			updatedAt: new Date().toISOString(),
		};

		if (path) record.path = path.startsWith("/") ? path : `/${path}`;
		if (description) record.description = description;
		if (content) {
			record.content = createMarkdownContent(content);
			record.textContent = content;
		}
		if (tags.length > 0) record.tags = tags;

		await session.agent!.com.atproto.repo.putRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
			record,
		});

		return c.redirect(`/documents/${rkey}`);
	} catch (error) {
		console.error("Error updating document:", error);
		return c.redirect(`/documents/${rkey}/edit?error=update_failed`);
	}
});

// Publish document
documentRoutes.post("/:rkey/publish", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	try {
		const existing = await session.agent!.com.atproto.repo.getRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		const doc = existing.data.value as any;
		const tags = (doc.tags || []).filter((t: string) => t !== "draft");

		const record = {
			...doc,
			tags: tags.length > 0 ? tags : undefined,
			publishedAt: doc.publishedAt || new Date().toISOString(),
			updatedAt: new Date().toISOString(),
		};

		await session.agent!.com.atproto.repo.putRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
			record,
		});

		return c.redirect(`/documents/${rkey}`);
	} catch (error) {
		console.error("Error publishing document:", error);
		return c.redirect(`/documents/${rkey}?error=publish_failed`);
	}
});

// Unpublish document (add draft tag)
documentRoutes.post("/:rkey/unpublish", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	try {
		const existing = await session.agent!.com.atproto.repo.getRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		const doc = existing.data.value as any;
		const tags = [...(doc.tags || []), "draft"];

		const record = {
			...doc,
			tags,
			updatedAt: new Date().toISOString(),
		};

		await session.agent!.com.atproto.repo.putRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
			record,
		});

		return c.redirect(`/documents/${rkey}`);
	} catch (error) {
		console.error("Error unpublishing document:", error);
		return c.redirect(`/documents/${rkey}?error=unpublish_failed`);
	}
});

// Delete document
documentRoutes.post("/:rkey/delete", async (c) => {
	let session: Session;
	try {
		session = requireAuth(c);
	} catch {
		return c.redirect("/auth/login");
	}

	const rkey = c.req.param("rkey");

	if (!isValidTID(rkey)) {
		return c.redirect("/documents");
	}

	try {
		await session.agent!.com.atproto.repo.deleteRecord({
			repo: session.did!,
			collection: DOCUMENT_COLLECTION,
			rkey,
		});

		return c.redirect("/documents");
	} catch (error) {
		console.error("Error deleting document:", error);
		return c.redirect(`/documents/${rkey}?error=delete_failed`);
	}
});

// Generate a TID (timestamp-based ID)
function generateTID(): string {
	const now = Date.now() * 1000;
	const clockId = Math.floor(Math.random() * 1024);
	const tid = (BigInt(now) << 10n) | BigInt(clockId);
	return tid.toString(36).padStart(13, "0");
}