// pages/evaluation.tsx
"use client";

import { useState, useEffect, use } from "react";
import { useParams, useRouter } from "next/navigation";
import { axiosInstance } from "@/services/axios";

// ----------------------------------------------------------------
// Chart.js and react-chartjs-2 imports for the analysis chart.
// ----------------------------------------------------------------
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

// ----------------------------------------------------------------
// Shadcn/ui components – used here for Card and Button styling.
// ----------------------------------------------------------------
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

// ----------------------------------------------------------------
// Steps Definition – each step represents a cluster evaluation.
// ----------------------------------------------------------------
const steps = [
  {
    type: "intrensic",
    questionEndpoint: "/question/Intrinsic_value",
    submissionEndpoint: "/intrinsic",
    title: "System Quality",
  },
  {
    type: "business",
    questionEndpoint: "/question/Business_value",
    submissionEndpoint: "/business",
    title: "Data/Info Quality",
  },
  {
    type: "cost",
    questionEndpoint: "/question/Cost_value",
    submissionEndpoint: "/cost",
    title: "Cost Matrix",
  },
  {
    type: "economic",
    questionEndpoint: "/question/ASGC_value",
    submissionEndpoint: "/ASGC",
    title: "ACGS Matrix",
  },
];

// ----------------------------------------------------------------
// Type Definitions
// ----------------------------------------------------------------
interface Question {
  _id: string;
  question_no: string;
  question_detail: string;
  type: string;
  answer_type: string;
  created_at: string;
  updated_at: string | null;
  answers: { [key: string]: number };
  is_active: boolean;
  created_by: string;
}

interface UserInfo {
  _id: string;
  userId: string;
  type: string;
  name: string;
  org_name: string;
  created_at: string;
  updated_at: string | null;
  cluster: { [key: string]: boolean };
  deltas: { [key: string]: number };
  is_active: boolean;
}

interface ClusterResponse {
  cluster: string;
  title: string;
  answers: { [key: string]: number };
  questionDetail: string;
  answersList: { [key: string]: number };
}

// ----------------------------------------------------------------
// Sidebar Component – used on both evaluation and final analysis screens.
// Hidden on mobile (below sm breakpoint)
// ----------------------------------------------------------------
const Sidebar = ({
  userInfo,
  currentStep,
}: {
  userInfo: UserInfo;
  currentStep: number;
}) => {
  return (
    <aside className="hidden sm:block w-64 border-r border-gray-300 p-4">
      <div className="mb-6">
        <h2 className="text-xl font-bold text-gray-800 truncate">Data Source</h2>
        <p className="text-base text-gray-700 mt-1 truncate">Name: {userInfo.name}</p>
        <p className="text-sm text-gray-600 truncate">Org: {userInfo.org_name}</p>
      </div>
      <div>
        <h3 className="text-lg font-bold text-gray-800 mb-4">Steps</h3>
        <ul>
          {steps.map((step, index) => (
            <li
              key={index}
              className={`mb-2 p-2 rounded ${
                index === currentStep
                  ? "bg-gray-800 text-white"
                  : "bg-white text-gray-800 border border-gray-300"
              }`}
            >
              {step.title}
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
};

// ----------------------------------------------------------------
// Helper: Returns a background class for the score box based on score value.
// ----------------------------------------------------------------
const getScoreBg = (scoreStr: string) => {
  // Map scores 1-5 to harmonious background colors.
  const scoreBgColors: { [key: string]: string } = {
    "1": "bg-red-100",
    "2": "bg-orange-100",
    "3": "bg-yellow-100",
    "4": "bg-blue-100",
    "5": "bg-green-100",
  };
  return scoreBgColors[scoreStr] || "bg-white";
};

// ----------------------------------------------------------------
// Main EvaluationPage Component
// ----------------------------------------------------------------
const EvaluationPage = () => {
  const { id } = useParams(); // from URL
  const router = useRouter();

  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
  const [question, setQuestion] = useState<Question | null>(null);
  // answers maps each answer key to its assigned score (as a string).
  const [answers, setAnswers] = useState<{ [key: string]: string }>({});
  const [loading, setLoading] = useState<boolean>(false);
  const [submitting, setSubmitting] = useState<boolean>(false);
  // currentStep ranges from 0 to steps.length (if completed, show analysis)
  const [currentStep, setCurrentStep] = useState<number>(0);
  // To store responses for analytics.
  const [clusterResponses, setClusterResponses] = useState<ClusterResponse[]>([]);
  // Flag to ensure auto-assignment runs only once per question.
  const [autoAssigned, setAutoAssigned] = useState<boolean>(false);
  // Used to trigger a pop effect on cards as they appear.
  const [autoPopCards, setAutoPopCards] = useState<string[]>([]);
  // visibleCards controls which answer cards are visible in the grid.
  const [visibleCards, setVisibleCards] = useState<string[]>([]);

  // ----------------------------------------------------------------
  // 1. Fetch User Info
  // ----------------------------------------------------------------
  useEffect(() => {
    if (!id) return;
    const fetchUserInfo = async () => {
      try {
        setLoading(true);
        const { data: responseData } = await axiosInstance.post(
          `/userInfo?userId=${id}`
        );
        if (responseData.data) {
          setUserInfo(responseData.data);
        }
      } catch (error) {
        console.error("Error fetching user info:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchUserInfo();
  }, [id]);

  // ----------------------------------------------------------------
  // 2. Fetch Question for Current Step and Initialize Answers
  // ----------------------------------------------------------------
  useEffect(() => {
    if (!id || currentStep >= steps.length) return;
    const fetchQuestion = async () => {
      try {
        setLoading(true);
        const endpoint = steps[currentStep].questionEndpoint;
        const { data: questionData } = await axiosInstance.post(endpoint, {});
        if (
          questionData &&
          Array.isArray(questionData) &&
          questionData.length > 0
        ) {
          const fetchedQuestion = questionData[0];
          setQuestion(fetchedQuestion);
          // Initialize all answer keys as "pool"
          const initialAnswers: { [key: string]: string } = {};
          Object.keys(fetchedQuestion.answers).forEach((key) => {
            initialAnswers[key] = "pool";
          });
          setAnswers(initialAnswers);
          setAutoAssigned(false);
          setVisibleCards([]); // reset visible cards for new question
        }
      } catch (error) {
        console.error("Error fetching question:", error);
      } finally {
        setLoading(false);
      }
    };
    fetchQuestion();
  }, [currentStep, id]);

  // ----------------------------------------------------------------
  // 3. Auto-assign random score to each answer card one by one with pop effect.
  // The card becomes visible only when assigned.
  // ----------------------------------------------------------------
  useEffect(() => {
    if (
      question &&
      !autoAssigned &&
      Object.values(answers).every((val) => val === "pool")
    ) {
      const keys = Object.keys(answers);
      keys.forEach((key, index) => {
        setTimeout(() => {
          const randomScore = (Math.floor(Math.random() * 5) + 1).toString();
          setAnswers((prev) => ({
            ...prev,
            [key]: randomScore,
          }));
          setAutoPopCards((prev) => [...prev, key]);
          // Remove the pop effect after 200ms.
          setTimeout(() => {
            setAutoPopCards((prev) => prev.filter((id) => id !== key));
          }, 200);
          // Mark card as visible.
          setVisibleCards((prev) => [...prev, key]);
          if (index === keys.length - 1) {
            setAutoAssigned(true);
          }
        }, index * 200);
      });
    }
  }, [question, autoAssigned, answers]);

  // ----------------------------------------------------------------
  // 4. Handle Next Button Click: Validate and Submit
  // ----------------------------------------------------------------
  const handleNext = async () => {
    if (!id || !question) return;
    if (Object.values(answers).some((val) => val === "pool")) {
      alert("Please wait until all answers are assigned.");
      return;
    }
    // if(userInfo?.cluster[steps[currentStep].type]){
    //   setCurrentStep(currentStep + 1);
    //   setQuestion(null);
    //   setAnswers({});
    // }
    try {
      setSubmitting(true);
      const payloadAnswers: { [key: string]: number } = {};
      Object.entries(answers).forEach(([key, value]) => {
        payloadAnswers[key] = parseInt(value, 10);
      });
      const payload = {
        type: steps[currentStep].type,
        userId: id,
        answer: payloadAnswers,
        delta: 0,
        value: {},
      };
      const { data: submissionResponse } = await axiosInstance.post(
        steps[currentStep].submissionEndpoint,
        payload
      );
      console.log("Submission response:", submissionResponse);
      setClusterResponses((prev) => [
        ...prev,
        {
          cluster: steps[currentStep].type,
          title: steps[currentStep].title,
          answers: payloadAnswers,
          questionDetail: question.question_detail,
          answersList: question.answers,
        },
      ]);
      setUserInfo((prev) => {
        if (!prev) return null;
        return {
          ...prev,
          cluster:{
            ...prev.cluster,
            [steps[currentStep].type]: true,
          }
        };
      });
      setCurrentStep(currentStep + 1);
      setQuestion(null);
      setAnswers({});
    } catch (error) {
      console.error("Error submitting data:", error);
    } finally {
      setSubmitting(false);
    }
  };

  // ----------------------------------------------------------------
  // 5. Handle Back Button Click: Return to Previous Step
  // ----------------------------------------------------------------
  const handleBack = () => {
    if (currentStep > 0) {
      const prevResponse = clusterResponses[currentStep - 1];
      if (prevResponse) {
        // Restore the previous question and answers
        setQuestion({
          _id: "",
          question_no: "",
          question_detail: prevResponse.questionDetail,
          type: "",
          answer_type: "",
          created_at: "",
          updated_at: null,
          answers: prevResponse.answersList,
          is_active: true,
          created_by: "",
        });
        const restoredAnswers: { [key: string]: string } = {};
        Object.entries(prevResponse.answers).forEach(([key, value]) => {
          restoredAnswers[key] = value.toString();
        });
        setAnswers(restoredAnswers);
        setAutoAssigned(true);
        setVisibleCards(Object.keys(restoredAnswers));
      }
      setCurrentStep(currentStep - 1);
    }
  };

  // ----------------------------------------------------------------
  // 6. Final Analysis Screen
  // Displays a grayscale bar chart (with the final bar in red, yellow, or green)
  // and a table of delta scores. The sidebar is preserved (hidden on mobile).
  // ----------------------------------------------------------------
  const FinalAnalyticsScreen = () => {
    const [finalUserInfo, setFinalUserInfo] = useState<UserInfo | null>(null);
    const [chartData, setChartData] = useState<any>(null);
    const [loadingFinal, setLoadingFinal] = useState<boolean>(false);

    useEffect(() => {
      if (!id) return;
      const fetchFinalUserInfo = async () => {
        try {
          setLoadingFinal(true);
          const { data: responseData } = await axiosInstance.post(
            `/userInfo?userId=${id}`
          );
          if (responseData.data) {
            setFinalUserInfo(responseData.data);
            const deltaKeys = Object.keys(responseData.data.deltas);
            const deltaValues = deltaKeys.map(
              (key) => responseData.data.deltas[key]
            );
            const defaultColor = "rgba(50, 50, 50, 0.8)"; // grayscale for all bars
            const lastValue = deltaValues[deltaValues.length - 1];
            let finalBarColor = "rgba(255, 0, 0, 0.8)"; // red by default
            if (lastValue >= 4) {
              finalBarColor = "rgba(0, 128, 0, 0.8)"; // green
            } else if (lastValue >= 2) {
              finalBarColor = "rgba(255, 205, 0, 0.8)"; // yellow
            }
            const backgroundColors = deltaValues.map((v, i) =>
              i === deltaValues.length - 1 ? finalBarColor : defaultColor
            );
            setChartData({
              labels: deltaKeys,
              datasets: [
                {
                  label: "Delta Values",
                  data: deltaValues,
                  backgroundColor: backgroundColors,
                  borderColor: backgroundColors,
                  borderWidth: 1,
                },
              ],
            });
          }
        } catch (error) {
          console.error("Error fetching final user info:", error);
        } finally {
          setLoadingFinal(false);
        }
      };
      fetchFinalUserInfo();
    }, [id]);

    if (loadingFinal) {
      return (
        <div className="p-4">
          <p className="text-sm text-gray-800">Loading final analysis...</p>
        </div>
      );
    }

    if (!finalUserInfo) {
      return (
        <div className="p-4">
          <p className="text-sm text-red-600">
            Failed to load final analysis data.
          </p>
        </div>
      );
    }

    return (
      <div className="flex flex-col sm:flex-row h-screen font-sans">
        <Sidebar userInfo={finalUserInfo} currentStep={steps.length} />
        <div className="flex-1 flex flex-col p-4">
          <h1 className="text-2xl font-bold text-gray-800 mb-4">
            Final Analysis
          </h1>
          <div className="flex flex-col md:flex-row gap-4 flex-1">
            <div className="flex-1">
              <div className="chart-container">
                {chartData ? (
                  <Bar
                    data={chartData}
                    options={{
                      responsive: true,
                      maintainAspectRatio: false,
                      plugins: {
                        legend: { display: false },
                        title: { display: false },
                      },
                      scales: {
                        y: {
                          beginAtZero: true,
                          ticks: { font: { size: 12 } },
                        },
                        x: {
                          ticks: { font: { size: 12 } },
                        },
                      },
                    }}
                  />
                ) : (
                  <p className="text-sm text-gray-600">
                    No delta data available.
                  </p>
                )}
              </div>
            </div>
            <div className="flex-1">
              <h2 className="text-lg font-semibold mb-2 text-gray-800">
                Delta Scores
              </h2>
              <table className="w-full border-collapse text-sm">
                <thead>
                  <tr>
                    <th className="border-b p-2 text-left border-gray-300">
                      Delta
                    </th>
                    <th className="border-b p-2 text-right border-gray-300">
                      Score
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {Object.entries(finalUserInfo.deltas).map(([key, value]) => (
                    <tr key={key}>
                      <td className="p-2 border-b border-gray-300 capitalize">{key.replaceAll("_"," ")}</td>
                      <td className="p-2 border-b border-gray-300 text-right">
                        {value.toFixed(3)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          <div className="flex justify-between mt-4">
            <Button
              onClick={() => setCurrentStep(steps.length - 1)}
              className="px-6 py-2 text-lg"
            >
              Back
            </Button>
            <Button
              onClick={() => router.push("/")}
              className="px-6 py-2 text-lg"
            >
              Finish
            </Button>
          </div>
        </div>
        {/* Responsive Chart Container Styles */}
        <style jsx>{`
          .chart-container {
            height: 300px;
          }
          @media (max-width: 640px) {
            .chart-container {
              height: 200px;
            }
          }
        `}</style>
      </div>
    );
  };

  // ----------------------------------------------------------------
  // 7. Loading / Error UI
  // ----------------------------------------------------------------
  if (loading && !question) {
    return (
      <div className="flex items-center justify-center h-screen">
        <p className="text-sm text-gray-800">Loading...</p>
      </div>
    );
  }
  if (!userInfo) {
    return (
      <div className="flex items-center justify-center h-screen">
        <p className="text-sm text-red-600">
          User not found or invalid ID.
        </p>
      </div>
    );
  }
  // If all steps have been completed, show the final analysis screen.
  if (currentStep >= steps.length) {
    return <FinalAnalyticsScreen />;
  }

  // ----------------------------------------------------------------
  // 8. Prepare Answer Cards as an Array
  // ----------------------------------------------------------------
  const answerCards = Object.entries(answers).map(([key, score]) => ({
    id: key,
    score,
  }));

  // ----------------------------------------------------------------
  // 9. Render Layout with Sidebar and Main Panel
  // ----------------------------------------------------------------
  return (
    <div className="flex flex-col sm:flex-row h-screen font-sans">
      <Sidebar userInfo={userInfo} currentStep={currentStep} />
      <main className="flex-1 flex flex-col">
        {/* Header */}
        <header className="p-4 border-b border-gray-300">
          <h1 className="text-2xl font-bold text-gray-800">
            {steps[currentStep].title}
          </h1>
          <p className="mt-2 text-base text-gray-700">
            {question?.question_detail}
          </p>
        </header>
        {/* Answer Cards Grid */}
        <section className="flex-grow p-4 overflow-x-hidden overflow-y-auto">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            {answerCards
              .filter((card) => visibleCards.includes(card.id))
              .map((card) => (
                <div
                  key={card.id}
                  className={`border border-gray-300 p-3 rounded shadow transition-transform duration-200 ${
                    autoPopCards.includes(card.id) ? "animate-pop" : ""
                  }`}
                >
                  <div className="flex justify-between items-center">
                    <div className="text-sm font-medium text-gray-800 capitalize">
                      {card.id}
                    </div>
                    <div
                      className={`text-sm font-medium text-gray-800 px-2 py-1 rounded ${getScoreBg(
                        card.score
                      )}`}
                    >
                      {card.score !== "pool" ? card.score : "-"}
                    </div>
                  </div>
                </div>
              ))}
          </div>
        </section>
        {/* Footer with Back & Next Buttons */}
        <footer className="p-4 border-t border-gray-300 flex justify-between">
          
            <Button onClick={handleBack} className="px-6 py-2 text-lg"
            disabled={!autoAssigned || submitting}
            style={{

              opacity: currentStep === 0 ? 0 : 1,
              pointerEvents: currentStep === 0 ? "none" : "auto",
            }}
            >
              Back
            </Button>
          
          <Button
            onClick={handleNext}
            disabled={!autoAssigned || submitting}
            className="px-6 py-2 text-lg"
          >
            {submitting ? "Submitting..." : "Next"}
          </Button>
        </footer>
      </main>
      {/* Pop Animation CSS */}
      <style jsx>{`
        @keyframes pop {
          0% {
            transform: scale(0.8);
          }
          50% {
            transform: scale(1.1);
          }
          100% {
            transform: scale(1);
          }
        }
        .animate-pop {
          animation: pop 0.2s ease-out;
        }
      `}</style>
    </div>
  );
};

export default EvaluationPage;