import * as fs from "fs";
import * as path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// ─── Resource Definitions ───────────────────────────────────────

export interface ResourceDef {
  uri: string;
  name: string;
  description: string;
  mimeType: string;
  filePath: string;
}

const MCP_APP_DIST = path.resolve(__dirname, "../../mcp-app/dist");

export const resources: ResourceDef[] = [
  {
    uri: "reonomy://app/search",
    name: "Reonomy Search Builder",
    description: "Interactive search configuration UI for Reonomy property filters",
    mimeType: "text/html",
    filePath: path.join(MCP_APP_DIST, "search", "index.html"),
  },
  {
    uri: "reonomy://app/results",
    name: "Reonomy Results Viewer",
    description: "Property results table with sorting, filtering, and export",
    mimeType: "text/html",
    filePath: path.join(MCP_APP_DIST, "results", "index.html"),
  },
  {
    uri: "reonomy://app/dashboard",
    name: "Reonomy Dashboard",
    description: "Scraping stats overview with job history and usage metrics",
    mimeType: "text/html",
    filePath: path.join(MCP_APP_DIST, "dashboard", "index.html"),
  },
];

// ─── Resource Reader ────────────────────────────────────────────

export function readResource(uri: string): { uri: string; mimeType: string; text: string } | null {
  const resource = resources.find((r) => r.uri === uri);
  if (!resource) return null;

  try {
    const html = fs.readFileSync(resource.filePath, "utf-8");
    return {
      uri: resource.uri,
      mimeType: resource.mimeType,
      text: html,
    };
  } catch (err) {
    // Return a placeholder if the app hasn't been built yet
    const placeholder = buildPlaceholderHtml(resource.name, resource.uri);
    return {
      uri: resource.uri,
      mimeType: resource.mimeType,
      text: placeholder,
    };
  }
}

// ─── Placeholder HTML ───────────────────────────────────────────

function buildPlaceholderHtml(name: string, uri: string): string {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>${name}</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
      background: var(--color-background-primary, #0f172a);
      color: var(--color-text-primary, #e2e8f0);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem;
    }
    .container {
      text-align: center;
      max-width: 480px;
    }
    h1 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: var(--color-text-primary, #f1f5f9);
    }
    p {
      color: var(--color-text-secondary, #94a3b8);
      line-height: 1.6;
    }
    code {
      background: var(--color-background-secondary, #1e293b);
      padding: 0.15rem 0.4rem;
      border-radius: 4px;
      font-size: 0.875rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>${name}</h1>
    <p>This MCP App hasn't been built yet.</p>
    <p style="margin-top: 0.5rem;">
      Build the app with <code>cd mcp-app && npm run build</code>
    </p>
    <p style="margin-top: 0.5rem; font-size: 0.8rem;">
      Resource: <code>${uri}</code>
    </p>
  </div>
</body>
</html>`;
}
