"use client";

import { useState, useEffect } from "react";
import { useRouter } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { useProfile } from "@/api/user/user-profile/user-profile";
import { useSubscriptionControllerGetSubscriptionStatusV1 } from "@/api/user/practitioner-subscription/practitioner-subscription";
import FreeTrialBanner from "@/components/shared/FreeTrialBanner";

import DashboardStatsCards from "./DashboardStatsCards";
import ScreeningsChart from "./ScreeningsChart";
import PatientsChart from "./PatientsChart";
import ScreeningTable from "./ScreeningTable";
import AddClientDetailsModal from "./modals/AddClientDetailsModal";
import HighRiskCasesModal from "./modals/HighRiskCasesModal";
import PendingScreenModal from "./modals/PendingScreenModal";
import ScreensCompletedModal from "./modals/ScreensCompletedModal";
import InvitationSentSuccessModal from "./modals/InvitationSentSuccessModal";

export default function PractitionerDashboard() {
  const router = useRouter();
  const t = useTranslations("practitioner");
  const [addClientOpen, setAddClientOpen] = useState(false);
  const [highRiskOpen, setHighRiskOpen] = useState(false);
  const [pendingScreenOpen, setPendingScreenOpen] = useState(false);
  const [screensCompletedOpen, setScreensCompletedOpen] = useState(false);
  const [invitationSentOpen, setInvitationSentOpen] = useState(false);

  const handleClientAdded = () => {
    setAddClientOpen(false);
    setInvitationSentOpen(true);
  };

  // Fetch user profile - will auto-update when cache is invalidated
  const { data: profileData } = useProfile();
  const userName = profileData?.data?.user?.name || "User";

  const { data: subStatusData } = useSubscriptionControllerGetSubscriptionStatusV1();
  const subStatus = subStatusData?.data;
  const trial_end = subStatus?.trial_end;
  const isTrialing = subStatus?.status === 'active' && !!trial_end && new Date(trial_end) > new Date();
  const showTrialBanner = isTrialing;

  // Use client-side state for greeting to avoid hydration mismatch
  const [greeting, setGreeting] = useState<string>("");

  useEffect(() => {
    const hour = new Date().getHours();
    if (hour < 12) {
      setGreeting(t("greetings.morning"));
    } else if (hour < 18) {
      setGreeting(t("greetings.afternoon"));
    } else {
      setGreeting(t("greetings.evening"));
    }
  }, [t]);

  return (
    <>
      {showTrialBanner && trial_end && (
        <FreeTrialBanner
          trialEnd={trial_end}
          upgradeHref="/practitioner/subscription"
        />
      )}
      <main className="pt-20 pb-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Welcome Section */}
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
            <div>
              <h1 className="text-2xl font-semibold text-gray-900">
                {greeting}{greeting ? ", " : ""}{userName}
              </h1>
              <p className="mt-1 text-sm text-gray-500">
                {t("dashboard.subtitle")}
              </p>
            </div>
            <div className="flex gap-3 mt-4 sm:mt-0">
              <button
                onClick={() => router.push("/practitioner/clients")}
                className="px-5 py-2.5 text-sm font-medium text-[#3B9EC9] bg-white border border-[#3B9EC9] rounded-lg hover:bg-[#3B9EC9]/5 transition cursor-pointer"
              >
                {t("dashboard.screening")}
              </button>
              <button
                onClick={() => {
                  setAddClientOpen(true);
                }}
                className="px-5 py-2.5 text-sm font-medium text-white bg-[#3B9EC9] rounded-lg hover:bg-[#3B9EC9]/90 transition cursor-pointer"
              >
                {t("dashboard.addClient")}
              </button>
            </div>
          </div>

          {/* Stats Cards */}
          <DashboardStatsCards
            onHighRiskClick={() => setHighRiskOpen(true)}
            onPendingScreenClick={() => setPendingScreenOpen(true)}
            onScreensCompletedClick={() => setScreensCompletedOpen(true)}
            onTotalClientsClick={() => router.push("/practitioner/clients")}
          />

          {/* Charts Section */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <ScreeningsChart />
            <PatientsChart />
          </div>

          {/* Screening Table */}
          <ScreeningTable />
        </div>
      </main>

      {/* Modals */}
      <AddClientDetailsModal
        isOpen={addClientOpen}
        onClose={() => setAddClientOpen(false)}
        onSuccess={handleClientAdded}
      />
      <HighRiskCasesModal
        isOpen={highRiskOpen}
        onClose={() => setHighRiskOpen(false)}
      />
      <PendingScreenModal
        isOpen={pendingScreenOpen}
        onClose={() => setPendingScreenOpen(false)}
      />
      <ScreensCompletedModal
        isOpen={screensCompletedOpen}
        onClose={() => setScreensCompletedOpen(false)}
      />
      <InvitationSentSuccessModal
        isOpen={invitationSentOpen}
        onClose={() => {
          setInvitationSentOpen(false);
          router.push("/practitioner/clients");
        }}
      />
    </>
  );
}