import React from "react";
import { useBantOptions } from "@/hooks/use-bant-options";

export const BantOptionsExample: React.FC = () => {
  const {
    scores,
    budgets,
    authorities,
    needs,
    timelines,
    timelineIntents,
    refetchAll,
    isLoading,
    hasErrors,
  } = useBantOptions();

  const renderBantSection = (
    title: string,
    data: any[],
    isLoading: boolean,
    error: string | null,
    isValid: boolean,
    refetch: () => Promise<any>
  ) => (
    <div className="mb-6 p-4 border border-gray-200 rounded-lg">
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-md font-semibold">{title}</h3>
        <div className="flex items-center gap-2">
          <span
            className={`px-2 py-1 text-xs rounded-full ${
              isValid
                ? "bg-green-100 text-green-800"
                : "bg-yellow-100 text-yellow-800"
            }`}
          >
            {isValid ? "Validated" : "Validation Failed"}
          </span>
          <button
            onClick={refetch}
            className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Refresh
          </button>
        </div>
      </div>

      {isLoading ? (
        <div className="text-sm text-gray-600">Loading...</div>
      ) : error ? (
        <div className="text-sm text-red-600">Error: {error}</div>
      ) : data.length === 0 ? (
        <div className="text-sm text-gray-500">No {title.toLowerCase()} found</div>
      ) : (
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
          {data.map((item) => (
            <div
              key={item.id}
              className="p-2 bg-gray-50 rounded text-sm border border-gray-100"
            >
              <div className="font-medium text-gray-900">{item.name}</div>
              <div className="text-xs text-gray-500 mt-1">
                <div>ID: {item.id}</div>
                <div>Created: {new Date(item.createdAt).toLocaleDateString()}</div>
                <div
                  className={`font-medium ${
                    item.isDeleted ? "text-red-600" : "text-green-600"
                  }`}
                >
                  {item.isDeleted ? "Deleted" : "Active"}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-xl font-bold">BANT Options</h2>
        <div className="flex items-center gap-3">
          {hasErrors && (
            <span className="px-3 py-1 text-sm bg-red-100 text-red-800 rounded-full">
              Some errors detected
            </span>
          )}
          {isLoading && (
            <span className="px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full">
              Loading...
            </span>
          )}
          <button
            onClick={refetchAll}
            className="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Refresh All
          </button>
        </div>
      </div>

      <div className="space-y-4">
        {renderBantSection(
          "BANT Scores",
          scores.data,
          scores.isLoading,
          scores.error,
          scores.isValid,
          scores.refetch
        )}

        {renderBantSection(
          "BANT Budgets",
          budgets.data,
          budgets.isLoading,
          budgets.error,
          budgets.isValid,
          budgets.refetch
        )}

        {renderBantSection(
          "BANT Authorities",
          authorities.data,
          authorities.isLoading,
          authorities.error,
          authorities.isValid,
          authorities.refetch
        )}

        {renderBantSection(
          "BANT Needs",
          needs.data,
          needs.isLoading,
          needs.error,
          needs.isValid,
          needs.refetch
        )}

        {renderBantSection(
          "BANT Timelines",
          timelines.data,
          timelines.isLoading,
          timelines.error,
          timelines.isValid,
          timelines.refetch
        )}

        {renderBantSection(
          "Timeline Intents",
          timelineIntents.data,
          timelineIntents.isLoading,
          timelineIntents.error,
          timelineIntents.isValid,
          timelineIntents.refetch
        )}
      </div>

      {/* Summary */}
      <div className="mt-6 p-4 bg-gray-50 rounded-lg">
        <h3 className="text-md font-semibold mb-2">Summary</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 text-sm">
          <div>
            <div className="font-medium">Scores</div>
            <div className="text-gray-600">{scores.data.length} items</div>
          </div>
          <div>
            <div className="font-medium">Budgets</div>
            <div className="text-gray-600">{budgets.data.length} items</div>
          </div>
          <div>
            <div className="font-medium">Authorities</div>
            <div className="text-gray-600">{authorities.data.length} items</div>
          </div>
          <div>
            <div className="font-medium">Needs</div>
            <div className="text-gray-600">{needs.data.length} items</div>
          </div>
          <div>
            <div className="font-medium">Timelines</div>
            <div className="text-gray-600">{timelines.data.length} items</div>
          </div>
          <div>
            <div className="font-medium">Timeline Intents</div>
            <div className="text-gray-600">{timelineIntents.data.length} items</div>
          </div>
        </div>
      </div>
    </div>
  );
};