"use client";

import { useState } from "react";

export default function DeveloperPage() {
  const [output, setOutput] = useState<string[]>([]);

  async function clearCache() {
    setOutput((prev) => [...prev, "Clearing cache..."]);
    try {
      const res = await fetch("/api/admin/developer/clear-cache", { method: "POST" });
      const data = await res.json();
      setOutput((prev) => [...prev, data.message || "Cache cleared"]);
    } catch {
      setOutput((prev) => [...prev, "Error clearing cache"]);
    }
  }

  async function checkHealth() {
    setOutput((prev) => [...prev, "Checking system health..."]);
    try {
      const res = await fetch("/api/admin/developer/health");
      const data = await res.json();
      setOutput((prev) => [
        ...prev,
        `DB: ${data.db ? "OK" : "FAIL"}`,
        `Users: ${data.counts?.users || 0}`,
        `Escorts: ${data.counts?.escorts || 0}`,
        `Photos: ${data.counts?.photos || 0}`,
        `Galleries: ${data.counts?.galleries || 0}`,
        "---",
      ]);
    } catch {
      setOutput((prev) => [...prev, "Health check failed"]);
    }
  }

  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-6">Developer Tools</h1>

      <div className="flex gap-4 mb-6">
        <button
          onClick={checkHealth}
          className="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium transition-colors"
        >
          System Health Check
        </button>
        <button
          onClick={clearCache}
          className="px-4 py-2 bg-surface-light hover:bg-surface text-text rounded-lg font-medium transition-colors"
        >
          Clear Cache
        </button>
      </div>

      {output.length > 0 && (
        <div className="bg-black rounded-lg p-4 font-mono text-sm text-green-400 max-h-96 overflow-y-auto">
          {output.map((line, i) => (
            <div key={i}>{line}</div>
          ))}
        </div>
      )}
    </div>
  );
}