"use client";

import { useState } from "react";

// Define API routes for path-based revalidation
const apiRoutePaths: Record<string, string> = {
  "Cached Static Fetch": "/api/cached-static-fetch",
  "Uncached Fetch": "/api/uncached-fetch",
  "Revalidated Fetch": "/api/revalidated-fetch",
  "Nested Fetch in API Route":
    "/api/nested-fetch-in-api-route/revalidated-fetch",
};

// Define API routes with tags for tag-based revalidation
const apiRouteTags: Record<string, string> = {
  "Revalidated Fetch in Nested API Route":
    "revalidated-fetch-revalidate3-nested-fetch-in-api-route",
  "Revalidated Fetch API": "revalidated-fetch-api",
  "Cached Static Fetch API": "cached-static-fetch-api",
  "Uncached Fetch API": "uncached-fetch-api",
};

// Revalidation Interface Component
export function RevalidationInterface() {
  const [selectedPathRoute, setSelectedPathRoute] = useState("");
  const [selectedTagRoute, setSelectedTagRoute] = useState("");
  const [revalidationStatus, setRevalidationStatus] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handlePathRevalidate = async () => {
    if (!selectedPathRoute) {
      setRevalidationStatus("Please select an API route to revalidate by path");
      return;
    }

    setIsLoading(true);
    setRevalidationStatus("Revalidating API route by path...");

    try {
      const path = apiRoutePaths[selectedPathRoute];
      const response = await fetch(`/api/revalidatePath?path=${path}`);
      const data = await response.json();

      if (response.ok) {
        setRevalidationStatus(
          `Successfully revalidated API route by path: ${selectedPathRoute} (${path})`
        );
      } else {
        setRevalidationStatus(`Error: ${data.error || "Unknown error"}`);
      }
    } catch (error: unknown) {
      const errorMessage =
        error instanceof Error ? error.message : "Unknown error";
      setRevalidationStatus(`Error: ${errorMessage}`);
    } finally {
      setIsLoading(false);
    }
  };

  const handleTagRevalidate = async () => {
    if (!selectedTagRoute) {
      setRevalidationStatus("Please select an API route to revalidate by tag");
      return;
    }

    setIsLoading(true);
    setRevalidationStatus("Revalidating API route by tag...");

    try {
      const tag = apiRouteTags[selectedTagRoute];
      const response = await fetch(`/api/revalidateTag?tag=${tag}`);
      const data = await response.json();

      if (response.ok) {
        setRevalidationStatus(
          `Successfully revalidated API route by tag: ${selectedTagRoute} (tag: ${tag})`
        );
      } else {
        setRevalidationStatus(`Error: ${data.error || "Unknown error"}`);
      }
    } catch (error: unknown) {
      const errorMessage =
        error instanceof Error ? error.message : "Unknown error";
      setRevalidationStatus(`Error: ${errorMessage}`);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div
      style={{
        border: "1px solid #eaeaea",
        padding: "25px",
        borderRadius: "8px",
        boxShadow: "0 4px 6px rgba(0,0,0,0.05)",
        backgroundColor: "#fff",
        marginBottom: "30px",
      }}
    >
      <h3
        style={{
          fontSize: "1.4rem",
          color: "#0070f3",
          marginTop: "0",
          marginBottom: "15px",
          borderBottom: "1px solid #eaeaea",
          paddingBottom: "10px",
        }}
      >
        API Route Revalidation Interface
      </h3>

      {/* Path-based revalidation section */}
      <div
        style={{
          padding: "15px",
          marginBottom: "20px",
          backgroundColor: "#f9f9f9",
          borderRadius: "5px",
          border: "1px solid #eaeaea",
        }}
      >
        <h4
          style={{
            fontSize: "1.1rem",
            color: "#0070f3",
            marginTop: "0",
            marginBottom: "15px",
          }}
        >
          Revalidate API Route by Path
        </h4>

        <div style={{ marginBottom: "15px" }}>
          <label
            style={{ display: "block", marginBottom: "8px", fontWeight: "500" }}
          >
            Select API Route:
          </label>
          <select
            onChange={(e) => setSelectedPathRoute(e.target.value)}
            style={{
              width: "100%",
              padding: "10px",
              borderRadius: "5px",
              border: "1px solid #ddd",
              fontSize: "1rem",
            }}
            value={selectedPathRoute}
          >
            <option value="">-- Select an API route --</option>
            {Object.keys(apiRoutePaths).map((route) => (
              <option key={route} value={route}>
                {route}
              </option>
            ))}
          </select>
        </div>

        <button
          disabled={isLoading || !selectedPathRoute}
          onClick={handlePathRevalidate}
          style={{
            backgroundColor: "#0070f3",
            color: "white",
            border: "none",
            padding: "10px 20px",
            borderRadius: "5px",
            fontSize: "1rem",
            fontWeight: "500",
            cursor: isLoading || !selectedPathRoute ? "not-allowed" : "pointer",
            opacity: isLoading || !selectedPathRoute ? 0.7 : 1,
            transition: "all 0.2s",
          }}
        >
          {isLoading ? "Revalidating..." : "Revalidate by Path"}
        </button>
      </div>

      {/* Tag-based revalidation section */}
      <div
        style={{
          padding: "15px",
          marginBottom: "20px",
          backgroundColor: "#f9f9f9",
          borderRadius: "5px",
          border: "1px solid #eaeaea",
        }}
      >
        <h4
          style={{
            fontSize: "1.1rem",
            color: "#0070f3",
            marginTop: "0",
            marginBottom: "15px",
          }}
        >
          Revalidate API Route by Tag
        </h4>

        <div style={{ marginBottom: "15px" }}>
          <label
            style={{ display: "block", marginBottom: "8px", fontWeight: "500" }}
          >
            Select API Route with Tag:
          </label>
          <select
            onChange={(e) => setSelectedTagRoute(e.target.value)}
            style={{
              width: "100%",
              padding: "10px",
              borderRadius: "5px",
              border: "1px solid #ddd",
              fontSize: "1rem",
            }}
            value={selectedTagRoute}
          >
            <option value="">-- Select an API route with tag --</option>
            {Object.keys(apiRouteTags).map((route) => (
              <option key={route} value={route}>
                {route}
              </option>
            ))}
          </select>
        </div>

        <button
          disabled={isLoading || !selectedTagRoute}
          onClick={handleTagRevalidate}
          style={{
            backgroundColor: "#0070f3",
            color: "white",
            border: "none",
            padding: "10px 20px",
            borderRadius: "5px",
            fontSize: "1rem",
            fontWeight: "500",
            cursor: isLoading || !selectedTagRoute ? "not-allowed" : "pointer",
            opacity: isLoading || !selectedTagRoute ? 0.7 : 1,
            transition: "all 0.2s",
          }}
        >
          {isLoading ? "Revalidating..." : "Revalidate by Tag"}
        </button>
      </div>

      {/* Status display */}
      {revalidationStatus && (
        <div
          style={{
            marginTop: "15px",
            padding: "10px",
            borderRadius: "5px",
            backgroundColor: revalidationStatus.includes("Error")
              ? "#ffebee"
              : "#e3f2fd",
            color: revalidationStatus.includes("Error") ? "#c62828" : "#0070f3",
            border: `1px solid ${revalidationStatus.includes("Error") ? "#ffcdd2" : "#bbdefb"}`,
          }}
        >
          {revalidationStatus}
        </div>
      )}
    </div>
  );
}