import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
const RecordManagementGuide = () => {
  const [activeTab, setActiveTab] = useState("dashboard");
  const { t } = useTranslation();
  const [expandedStep, setExpandedStep] = useState<string | null>(null);
  const navigate = useNavigate();
  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    setExpandedStep(null);
    //window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const toggleStep = (stepId: string) => {
    setExpandedStep(expandedStep === stepId ? null : stepId);
  };
  const [openStatus, setOpenStatus] = useState<string | null>(null);

  const toggle = (status: string) => {
    setOpenStatus((prev) => (prev === status ? null : status));
  };
  const steps = [
    {
      id: "login",
      title: t("landingPage.login"),
      content: (
        <div className="space-y-4">
          <p className="dark:text-gray-300">
            {t("landingPage.step1")}{" "}
            <span className="font-semibold text-primary">
              {t("landingPage.signIn")}
            </span>{" "}
            {t("landingPage.headerBtn")}
          </p>
          <p className="dark:text-gray-300">{t("landingPage.step2")}</p>
          <p className="dark:text-gray-300">
            {t("landingPage.step3")}{" "}
            <span className="font-semibold text-primary">
              {t("auth.login")}
            </span>{" "}
            {t("landingPage.accessBtn")}
          </p>
          <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 mt-4">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              <span className="font-semibold">{t("landingPage.note")}</span>{" "}
              {t("landingPage.forgotIntro")}
            </p>
          </div>
        </div>
      ),
      image: "/images/login-screen.png",
    },
    {
      id: "dashboard",
      title: t("landingPage.dashboardTitle"),
      content: (
        <div className="space-y-4">
          <p className="dark:text-gray-300">{t("landingPage.dashboardDesc")}</p>
          <ul className="list-disc pl-5 space-y-2 dark:text-gray-300">
            <li>
              <span className="font-semibold">
                {t("landingPage.recordsCreated")}:
              </span>{" "}
              {t("landingPage.recordsTotal")}
            </li>
            <li>
              <span className="font-semibold">
                {t("landingPage.recordsReceived")}:
              </span>{" "}
              {t("landingPage.incomingDocs")}
            </li>
            <li>
              <span className="font-semibold">
                {t("landingPage.breakdown")}:
              </span>{" "}
              {t("landingPage.visuals")}
            </li>
            <li>
              <span className="font-semibold">
                {t("landingPage.approvalStatus")}:
              </span>{" "}
              {t("landingPage.approvalTypes")}
            </li>
          </ul>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
              <h4 className="font-medium text-gray-900 dark:text-white">
                {t("landingPage.quickActions")}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t("landingPage.createOrCheck")}
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
              <h4 className="font-medium text-gray-900 dark:text-white">
                {t("landingPage.recentActivity")}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t("landingPage.trackUpdates")}
              </p>
            </div>
          </div>
        </div>
      ),
      image: "/images/dashboard-screen.png",
    },
    {
      id: "outgoing",
      title: t("landingPage.manageOut"),
      content: (
        <div className="space-y-6">
          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.createNew")}
            </h4>
            <ol className="list-decimal pl-5 space-y-2 mt-2 dark:text-gray-300">
              <li>
                {t("landingPage.goToTab")}{" "}
                <span className="font-semibold text-primary">
                  {t("statusBar.Outgoing")}
                </span>{" "}
                {t("landingPage.tab")}
              </li>
              <li>
                {t("landingPage.click")}{" "}
                <span className="font-semibold text-primary">
                  {t("userRecord.Add Record")}
                </span>{" "}
                {t("landingPage.button")}
              </li>
              <li>{t("landingPage.fillFields")}</li>
              <li>{t("landingPage.attach")}</li>
              <li>{t("landingPage.saveOrSubmit")}</li>
            </ol>
          </div>

          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.trackStatus")}
            </h4>
            <div className="mt-2 grid grid-cols-2 md:grid-cols-4 gap-3">
              {[
                {
                  status: "Draft",
                  color: "bg-gray-200 dark:bg-gray-700",
                  detail: t("landingPage.notForwarded"),
                },
                {
                  status: "Submitted",
                  color: "bg-purple-100 dark:bg-purple-900/50",
                  detail: t("landingPage.awaiting"),
                },
                {
                  status: "Accepted",
                  color: "bg-primary-100 dark:bg-primary-900/50",
                  detail: t("landingPage.accepted"),
                },
                {
                  status: "Approved",
                  color: "bg-primary-200 dark:bg-primary-800/50",
                  detail: t("landingPage.approvedSent"),
                },
                {
                  status: "Adjustment",
                  color: "bg-yellow-100 dark:bg-yellow-900/50",
                  detail: t("landingPage.returned"),
                },
                {
                  status: "Rejected",
                  color: "bg-red-100 dark:bg-red-900/50",
                  detail: t("landingPage.rejected"),
                },
                {
                  status: "Sent",
                  color: "bg-primary-300 dark:bg-primary-700",
                  detail: t("landingPage.sent"),
                },
                {
                  status: "Returned",
                  color: "bg-gray-400 dark:bg-gray-600",
                  detail: t("landingPage.returnedByOfficer"),
                },
              ].map((item) => (
                <div
                  key={item.status}
                  className={`${item.color} p-2 rounded text-center text-sm font-medium relative`}
                >
                  <div className="flex items-center justify-between">
                    <span className="mx-auto dark:text-gray-900">
                      {t(`statusBar.${item.status}`)}
                    </span>
                    <button
                      onClick={() => toggle(item.status)}
                      className="ml-2 text-xs text-primary hover:underline"
                    >
                      <span
                        className={`inline-block transition-transform duration-200 ${
                          openStatus === item.status ? "rotate-180" : ""
                        }`}
                      >
                        ▼
                      </span>
                    </button>
                  </div>

                  {openStatus === item.status && (
                    <div className="mt-2 p-2 text-xs bg-white dark:bg-gray-700 border dark:border-gray-600 rounded shadow absolute top-full left-0 w-full z-10 dark:text-gray-200">
                      {item.detail}
                    </div>
                  )}
                </div>
              ))}
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-3">
              {t("landingPage.monitor")}
            </p>
          </div>
        </div>
      ),
      image: "/images/outgoing-screen.png",
    },
    {
      id: "incoming",
      title: t("landingPage.manageIncoming"),
      content: (
        <div className="space-y-6">
          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.incomingTypes")}
            </h4>
            <div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
              {[
                { type: "external", desc: t("landingPage.fromOthers") },
                { type: "internal", desc: t("landingPage.withinOrg") },
                { type: "cc", desc: t("landingPage.copied") },
              ].map((item) => (
                <div
                  key={item.type}
                  className="bg-white dark:bg-gray-800 p-3 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
                >
                  <h5 className="font-medium text-primary">
                    {t(`nav.${item.type}`)}
                  </h5>
                  <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.processIncoming")}
            </h4>
            <ul className="list-disc pl-5 space-y-2 mt-2">
              <li className="dark:text-gray-300">
                <span className="font-semibold">{t("userRecord.View")}:</span>{" "}
                {t("landingPage.readDoc")}
              </li>
              <li className="dark:text-gray-300">
                <span className="font-semibold">{t("statusBar.Accept")}:</span>{" "}
                {t("landingPage.acknowledge")}
              </li>
              <li className="dark:text-gray-300">
                <span className="font-semibold">{t("statusBar.Assign")}:</span>{" "}
                {t("landingPage.forward")}
              </li>
              <li className="dark:text-gray-300">
                <span className="font-semibold">
                  {t("landingPage.archive")}:
                </span>{" "}
                {t("landingPage.fileRef")}
              </li>
            </ul>
          </div>
        </div>
      ),
      image: "/images/incoming-screen.png",
    },
    {
      id: "approval",
      title: t("landingPage.approvalworkflow"),
      content: (
        <div className="space-y-6">
          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.process")}
            </h4>
            <div className="mt-4">
              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                {t("landingPage.internalFlow")}
              </h5>
              <div className="flex items-center justify-between mt-2">
                {[
                  t("landingPage.creator"),
                  t("landingPage.leader"),
                  t("landingPage.director"),
                  t("landingPage.officer"),
                ].map((role, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white font-medium text-sm">
                      {i + 1}
                    </div>
                    <span className="text-xs mt-1 text-center dark:text-gray-300">{role}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="mt-6">
              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300">
                {t("landingPage.externalFlow")}
              </h5>
              <div className="flex items-center justify-between mt-2">
                {[
                  t("landingPage.creator"),
                  t("landingPage.leader"),
                  t("landingPage.director"),
                  t("landingPage.officer"),
                ].map((role, i) => (
                  <div key={i} className="flex flex-col items-center">
                    <div className="h-10 w-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium text-sm">
                      {i + 1}
                    </div>
                    <span className="text-xs mt-1 text-center dark:text-gray-300">{role}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div>
            <h4 className="font-semibold text-gray-900 dark:text-white">
              {t("landingPage.actions")}
            </h4>
            <div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
              {[
                {
                  action: "Approve",
                  desc:t("landingPage.addTeeterAndSignature"),
                  color: "bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800",
                },
                {
                  action: "Reject",
                  desc: t("landingPage.returnWithComments"),
                  color: "bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800",
                },
                {
                  action: "Adjust",
                  desc: t("landingPage.requestModifications"),
                  color: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800",
                },
              ].map((item) => (
                <div
                  key={item.action}
                  className={`${item.color} p-3 rounded-lg border`}
                >
                  <h5 className="font-medium dark:text-gray-200">
                    {t(`statusBar.${item.action}`)}
                  </h5>
                  <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      ),
      image: "/images/approval-screen.png",
    },
    {
      id: "delegation",
      title: t("landingPage.delegation"),
      content: (
        <div className="space-y-4">
          <p className="dark:text-gray-300">{t("landingPage.delegateInfo")}</p>
          <ol className="list-decimal pl-5 space-y-2">
            <li className="dark:text-gray-300">
              {t("landingPage.delegateNav")}{" "}
              <span className="font-semibold text-primary">
                {t("delegation.title")}
              </span>{" "}
              {t("landingPage.tab")}
            </li>
            <li className="dark:text-gray-300">{t("landingPage.selectColleague")}</li>
            <li className="dark:text-gray-300">{t("landingPage.setDates")}</li>
            <li className="dark:text-gray-300">{t("landingPage.setPerms")}</li>
            <li className="dark:text-gray-300">{t("landingPage.saveDelegate")}</li>
          </ol>
          <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 mt-4">
            <p className="text-sm text-gray-600 dark:text-gray-300">
              <span className="font-semibold">{t("landingPage.note")}</span>{" "}
              {t("landingPage.autoExpire")}
            </p>
          </div>
        </div>
      ),
      image: "/images/delegation-screen.png",
    },
    {
      id: "collaboration",
      title: t("landingPage.collab"),
      content: (
        <div className="space-y-4">
          <p className="dark:text-gray-300">{t("landingPage.collabInfo")}</p>
          <ul className="list-disc pl-5 space-y-2">
            <li className="dark:text-gray-300">{t("landingPage.viewDocs")}</li>
            <li className="dark:text-gray-300">{t("landingPage.addComments")}</li>
            <li className="dark:text-gray-300">{t("landingPage.approve")}</li>
            <li className="dark:text-gray-300">{t("landingPage.trackChanges")}</li>
          </ul>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
              <h4 className="font-medium text-gray-900 dark:text-white">
                {t("landingPage.realTime")}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t("landingPage.liveChanges")}
              </p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
              <h4 className="font-medium text-gray-900 dark:text-white">
                {t("landingPage.notifications")}
              </h4>
              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
                {t("landingPage.alerts")}
              </p>
            </div>
          </div>
        </div>
      ),
      image: "/images/collaboration-screen.png",
    },
    {
      id: "teeter",
      title: t("landingPage.signatureMgmt"),
      content: (
        <div className="space-y-4">
          <p className="dark:text-gray-300">{t("landingPage.leadersOnly")}</p>
          <ol className="list-decimal pl-5 space-y-2">
            <li className="dark:text-gray-300">
              {t("landingPage.goToTab")}{" "}
              <span className="font-semibold text-primary">
                {t("landingPage.signatureTitle")}
              </span>{" "}
              {t("landingPage.tab")}
            </li>
            <li className="dark:text-gray-300">{t("landingPage.uploadTeeter")}</li>
            <li className="dark:text-gray-300">{t("landingPage.uploadSignature")}</li>
            <li className="dark:text-gray-300">{t("landingPage.defaultSignature")}</li>
            <li className="dark:text-gray-300">{t("landingPage.updateDesignation")}</li>
          </ol>
          <div className="bg-red-50 dark:bg-red-900/30 p-4 rounded-lg border border-red-200 dark:border-red-800 mt-4">
            <p className="text-sm text-red-600 dark:text-red-400">
              <span className="font-semibold">{t("landingPage.security")}</span>{" "}
              {t("landingPage.encrypted")}.
            </p>
          </div>
        </div>
      ),
      image: "/images/teeter-screen.png",
    },
  ];
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
                {t("landingPage.recordModule")}
              </h1>
              <p className="mt-2 text-lg text-gray-600 dark:text-gray-300">
                {t("landingPage.guide")}
              </p>
            </div>
            <button
              onClick={() => navigate("/")}
              className="mt-4 md:mt-0 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
            >
              {t("landingPage.back")}
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Navigation Tabs */}
        <div className="border-b border-gray-200 dark:border-gray-700">
          <nav className="-mb-px flex space-x-8 overflow-x-auto scrollbar-hidden">
            {steps.map((step) => (
              <button
                key={step.id}
                onClick={() => handleTabChange(step.id)}
                className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer ${
                  activeTab === step.id
                    ? "border-primary text-primary"
                    : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
                }`}
              >
                {step.title}
              </button>
            ))}
          </nav>
        </div>

        {/* Content Area */}
        <div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Steps List */}
          <div className="lg:col-span-1">
            <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
              <div className="p-4 bg-primary">
                <h2 className="text-lg font-medium text-white">
                  {t("landingPage.moduleGuide")}
                </h2>
              </div>
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {steps.map((step) => (
                  <div
                    key={step.id}
                    onClick={() => handleTabChange(step.id)}
                    className={`p-4 cursor-pointer transition-colors ${
                      activeTab === step.id
                        ? "bg-primary-500/5"
                        : "hover:bg-gray-50 dark:hover:bg-gray-700"
                    }`}
                  >
                    <div className="flex items-center">
                      <div
                        className={`h-8 w-8 rounded-full flex items-center justify-center mr-3 ${
                          activeTab === step.id
                            ? "bg-primary text-white"
                            : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                        }`}
                      >
                        {steps.findIndex((s) => s.id === step.id) + 1}
                      </div>
                      <h3 className="text-sm font-medium dark:text-gray-200">{step.title}</h3>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Active Tab Content */}
          <div className="lg:col-span-2">
            <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
              <div className="p-6">
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                  {steps.find((step) => step.id === activeTab)?.title}
                </h2>

                <div className="mt-6 prose prose-sm max-w-none">
                  {steps.find((step) => step.id === activeTab)?.content}
                </div>

                {/* Image placeholder - replace with actual image */}
                <div className="mt-8 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex items-center justify-center">
                  <p className="text-gray-500 dark:text-gray-400">
                    {t("landingPage.screenshotOf")}{" "}
                    {steps.find((step) => step.id === activeTab)?.title}
                  </p>
                </div>
              </div>

              {/* Navigation Buttons */}
              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700 flex justify-between">
                {steps.findIndex((step) => step.id === activeTab) > 0 && (
                  <button
                    onClick={() =>
                      handleTabChange(
                        steps[
                          steps.findIndex((step) => step.id === activeTab) - 1
                        ].id
                      )
                    }
                    className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                  >
                    {t("landingPage.previous")}
                  </button>
                )}
                {steps.findIndex((step) => step.id === activeTab) <
                  steps.length - 1 && (
                  <button
                    onClick={() =>
                      handleTabChange(
                        steps[
                          steps.findIndex((step) => step.id === activeTab) + 1
                        ].id
                      )
                    }
                    className="ml-auto inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
                  >
                    {t("landingPage.next")}
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default RecordManagementGuide;
