"use client";

import { defineRegistry, DataProvider, VisibilityProvider, ActionProvider } from "@json-render/react";
import { catalog } from "./catalog";
import { ReactNode } from "react";

export const { registry } = defineRegistry(catalog, {
  components: {
    RecipeHeader: ({ props }) => (
      <div className="bg-gradient-to-r from-amber-50 to-orange-50 p-8 rounded-2xl shadow-lg mb-8 border-2 border-amber-200">
        <h1 className="text-4xl font-bold text-gray-900 mb-3">{props.title}</h1>
        <div className="flex flex-wrap gap-4 text-lg">
          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
            👨‍🍳 <strong>Chef:</strong> {props.chef}
          </span>
          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
            🇫🇷 <strong>Origin:</strong> {props.origin}
          </span>
          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
            ⏱️ <strong>Prep:</strong> {props.prepTime}
          </span>
          <span className="bg-white px-4 py-2 rounded-full shadow-sm">
            🍽️ <strong>Serves:</strong> {props.servings}
          </span>
        </div>
      </div>
    ),
    ChefInfo: ({ props }) => (
      <div className="bg-blue-50 p-6 rounded-xl shadow-md mb-8 border-l-4 border-blue-500">
        <div className="flex items-start gap-4">
          {props.imageUrl && (
            <img
              src={props.imageUrl}
              alt={props.name}
              className="w-24 h-24 rounded-full object-cover shadow-lg"
            />
          )}
          <div className="flex-1">
            <h2 className="text-2xl font-bold text-gray-900 mb-2">{props.name}</h2>
            <p className="text-gray-700 mb-3">{props.bio}</p>
            <a
              href={props.sourceUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-semibold underline"
            >
              📖 View Original Recipe
            </a>
          </div>
        </div>
      </div>
    ),
    IngredientList: ({ props }) => (
      <div className="bg-green-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-green-500">
        <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
          🥚 {props.title}
        </h3>
        <ul className="space-y-2">
          {props.ingredients.map((ingredient: any, index: number) => (
            <li key={index} className="flex items-baseline gap-3 text-lg">
              <span className="text-green-600 font-bold">•</span>
              <span className="font-semibold text-gray-900 min-w-[120px]">
                {ingredient.quantity}
              </span>
              <span className="text-gray-700">{ingredient.name}</span>
            </li>
          ))}
        </ul>
      </div>
    ),
    InstructionSteps: ({ props }) => (
      <div className="bg-purple-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-purple-500">
        <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
          📝 Instructions
        </h3>
        <ol className="space-y-4">
          {props.steps.map((step: any) => (
            <li key={step.number} className="flex gap-4">
              <span className="flex-shrink-0 w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold">
                {step.number}
              </span>
              <p className="text-gray-700 text-lg pt-1">{step.instruction}</p>
            </li>
          ))}
        </ol>
      </div>
    ),
    TipCard: ({ props }) => (
      <div className="bg-yellow-50 p-6 rounded-xl shadow-md mb-6 border-l-4 border-yellow-500">
        <div className="flex items-start gap-3">
          <span className="text-3xl">💡</span>
          <div>
            <p className="text-gray-800 text-lg mb-2 italic">&ldquo;{props.tip}&rdquo;</p>
            <p className="text-gray-600 font-semibold">— {props.author}</p>
          </div>
        </div>
      </div>
    ),
    RecipeCard: ({ props, children }) => (
      <div className="bg-white p-8 rounded-2xl shadow-xl mb-8 border border-gray-200">
        {props.imageUrl && (
          <img
            src={props.imageUrl}
            alt={props.title}
            className="w-full h-64 object-cover rounded-xl mb-6 shadow-md"
          />
        )}
        <h2 className="text-3xl font-bold text-gray-900 mb-3">{props.title}</h2>
        <p className="text-gray-600 text-lg mb-6">{props.description}</p>
        {children}
      </div>
    ),
  },
});

// Provider wrapper for all required contexts - wraps entire app once
export function Provider({ children }: { children: ReactNode }) {
  return (
    <DataProvider>
      <VisibilityProvider>
        <ActionProvider>
          {children}
        </ActionProvider>
      </VisibilityProvider>
    </DataProvider>
  );
}