"use client";

import { useEffect, useState, useCallback } from "react";
import { Plus, Video, Clock, CalendarClock, CheckCircle2, Search, RotateCcw, Mic } from "lucide-react";
import { useMeetingsStore, useUIStore, useServiceStore, useUserStore } from "@/store";
import { useMeetings } from "@/hooks/use-meetings";
import { useDebounce } from "@/hooks/use-debounce";
import { getMe } from "@/lib/api";
import { NewMeetingDialog } from "@/components/features/new-meeting-dialog";
import { SimpleTooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ErrorBanner } from "@/components/ui/page-components";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import Link from "next/link";
import { cn, getTimeBasedGreeting } from "@/lib/utils";

import { StatCard } from "./components/StatCard";
import { SegmentTab } from "./components/SegmentTab";
import { AllTab } from "./components/AllTab";
import { InvitedMeetingsTab } from "./components/InvitedMeetingsTab";
import { SEGMENT_CONFIG, SEGMENT_ORDER } from "./components/dashboard-constants";

export default function DashboardPage() {
  const loading          = useMeetingsStore((s) => s.loading);
  const error            = useMeetingsStore((s) => s.error);
  const listSummary      = useMeetingsStore((s) => s.listSummary);
  const segmentCounts    = useMeetingsStore((s) => s.segmentCounts);

  const newMeetingDialogOpen    = useUIStore((s) => s.newMeetingDialogOpen);
  const setNewMeetingDialogOpen = useUIStore((s) => s.setNewMeetingDialogOpen);
  const isDown = useServiceStore((s) => s.isDown);
  const { displayName, onboardingDone, setOnboardingDone, userId, setMe, email } = useUserStore();

  const [activeTab, setActiveTab] = useState<"my-meetings" | "invited-meetings">("my-meetings");

  useEffect(() => {
    const savedTab = sessionStorage.getItem("dashboard_active_tab");
    if (savedTab === "my-meetings" || savedTab === "invited-meetings") {
      setActiveTab(savedTab);
    }
  }, []);

  const handleTabChange = (tab: "my-meetings" | "invited-meetings") => {
    setActiveTab(tab);
    sessionStorage.setItem("dashboard_active_tab", tab);
  };

  const [searchQuery, setSearchQuery] = useState("");
  const debouncedSearchQuery = useDebounce(searchQuery, 400);
  const [platformFilter, setPlatformFilter] = useState("all");
  const [dateFilter, setDateFilter] = useState("all");
  const [typeFilter, setTypeFilter] = useState("all");
  const [sortBy, setSortBy] = useState("all");
  const [activeSubTab, setActiveSubTab] = useState<string>("all");

  const hasActiveFilters = searchQuery !== "" || platformFilter !== "all" || dateFilter !== "all" || typeFilter !== "all" || sortBy !== "all";

  const resetFilters = useCallback(() => {
    setSearchQuery("");
    setPlatformFilter("all");
    setDateFilter("all");
    setTypeFilter("all");
    setSortBy("all");
    setActiveSubTab("all");
  }, []);

  useEffect(() => {
    if (!userId && email) {
      getMe()
        .then((res) => {
          if (res.success && res.data) {
            const { name, role, approval_status, id } = res.data;
            setMe({
              email,
              name,
              role,
              approval_status,
              userId: id ?? null,
            });
          }
        })
        .catch((err) => {
          console.error("Failed to fetch user ID on dashboard mount", err);
        });
    }
  }, [userId, email, setMe]);

  const { refetch } = useMeetings({ skip: true });

  const allCount = Object.values(segmentCounts).reduce((a, b) => a + b, 0);
  const hasCounts = Object.keys(segmentCounts).length > 0;

  const recordedTimeValue = listSummary
    ? listSummary.total_recorded_duration_formatted.replace(/^0:/, "")
    : "0m";

  const stats = [
    { label: "Total",     value: allCount,                      icon: Video,        tooltip: "Total meetings",                    gradient: "bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700" },
    { label: "Completed", value: segmentCounts.completed ?? 0,  icon: CheckCircle2, tooltip: "Completed meetings with transcripts", gradient: "bg-gradient-to-br from-emerald-500 to-emerald-600 dark:from-emerald-600 dark:to-emerald-700" },
    { label: "Recorded",  value: recordedTimeValue,              icon: Clock,        tooltip: "Total recorded time",               gradient: "bg-gradient-to-br from-violet-500 to-violet-600 dark:from-violet-600 dark:to-violet-700" },
    { label: "Scheduled", value: segmentCounts.scheduled ?? 0,  icon: CalendarClock,tooltip: "Upcoming calendar meetings",         gradient: "bg-gradient-to-br from-orange-500 to-orange-600 dark:from-orange-600 dark:to-orange-700" },
  ];

  const orderedSegments = SEGMENT_ORDER;

  const greeting = getTimeBasedGreeting(displayName ?? undefined);

  return (
    <div className="flex flex-col h-full overflow-hidden space-y-4">

      {/* Header */}
      <div className="flex items-start justify-between gap-4 shrink-0">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{greeting}</h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
            {activeTab === "my-meetings"
              ? (hasCounts
                  ? `${allCount} meeting${allCount !== 1 ? "s" : ""} total`
                  : "Manage your meeting transcriptions and summaries")
              : "Meetings you have been invited to participate in"}
          </p>
        </div>
        <SimpleTooltip content="Start a new meeting recording session">
          <Button onClick={() => setNewMeetingDialogOpen(true)} className="shrink-0">
            <Plus className="h-4 w-4" />
            New Recording
          </Button>
        </SimpleTooltip>
      </div>

      {/* Top Level Tabs Switcher */}
      <div className="flex border-b border-gray-200 dark:border-gray-800 shrink-0">
        <button
          onClick={() => handleTabChange("my-meetings")}
          className={cn(
            "pb-3 text-sm font-semibold border-b-2 -mb-px px-4 transition-colors",
            activeTab === "my-meetings"
              ? "border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500"
              : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
          )}
        >
          My Meetings
        </button>
        <button
          onClick={() => handleTabChange("invited-meetings")}
          className={cn(
            "pb-3 text-sm font-semibold border-b-2 -mb-px px-4 transition-colors",
            activeTab === "invited-meetings"
              ? "border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500"
              : "border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
          )}
        >
          Invited Meetings
        </button>
      </div>

      {activeTab === "my-meetings" ? (
        <>
          {/* Stats */}
          <div className="grid gap-3 md:gap-4 grid-cols-2 lg:grid-cols-4 shrink-0">
            {stats.map((s) => <StatCard key={s.label} {...s} loading={loading} />)}
          </div>

          {error && !isDown && <div className="shrink-0"><ErrorBanner message={error} onRetry={refetch} /></div>}

          {/* Onboarding banner */}
          {!onboardingDone && (
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 rounded-2xl border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/40 px-5 py-4 shrink-0">
              <div className="flex items-start gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-900">
                  <Mic className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                  <p className="font-semibold text-blue-900 dark:text-blue-200 text-sm">New to IIH Notetaker?</p>
                  <p className="text-sm text-blue-700 dark:text-blue-400 mt-0.5">
                    Learn how to transcribe your first Google Meet in 2 minutes.
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <SimpleTooltip content="View 2-minute setup guide">
                  <Button asChild size="sm" className="bg-blue-600 hover:bg-blue-700">
                    <Link href="/onboarding">View guide →</Link>
                  </Button>
                </SimpleTooltip>
                <button onClick={() => setOnboardingDone()} className="text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors text-xl leading-none px-1">×</button>
              </div>
            </div>
          )}

          {/* Search and Filters Bar */}
          <div className="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center bg-white dark:bg-gray-900 p-3 rounded-2xl border border-gray-200 dark:border-gray-800 shadow-sm transition-all duration-200 shrink-0">
            {/* Search */}
            <div className="relative flex-1">
              <Search className={cn("absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 pointer-events-none transition-colors duration-200", searchQuery ? "text-blue-500" : "text-gray-400 dark:text-gray-500")} />
              <Input
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search meetings by title or participant..."
                className={cn(
                  "pl-9 pr-8 bg-transparent border-gray-200 dark:border-gray-800 focus-visible:ring-blue-500 rounded-xl transition-all duration-200",
                  searchQuery && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-900 dark:text-blue-100"
                )}
              />
              {searchQuery && (
                <button
                  onClick={() => setSearchQuery("")}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xs font-medium"
                >
                  Clear
                </button>
              )}
            </div>

            {/* Filter Selectors */}
            <div className="flex flex-wrap items-center gap-2">
              {/* Platform Filter */}
              <div className="w-[130px] sm:w-[140px]">
                <Select value={platformFilter} onValueChange={setPlatformFilter}>
                  <SelectTrigger className={cn(
                    "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                    platformFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
                  )}>
                    <SelectValue placeholder="Platform" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Platforms</SelectItem>
                    <SelectItem value="google_meet">Google Meet</SelectItem>
                    <SelectItem value="zoom">Zoom</SelectItem>
                    <SelectItem value="microsoft_teams">MS Teams</SelectItem>
                    <SelectItem value="jitsi">Jitsi</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Type Filter */}
              <div className="w-[120px] sm:w-[130px]">
                <Select value={typeFilter} onValueChange={setTypeFilter}>
                  <SelectTrigger className={cn(
                    "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                    typeFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
                  )}>
                    <SelectValue placeholder="Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="recurring">Recurring</SelectItem>
                    <SelectItem value="one_time">One-time</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Date Filter */}
              <div className="w-[120px] sm:w-[130px]">
                <Select value={dateFilter} onValueChange={setDateFilter}>
                  <SelectTrigger className={cn(
                    "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                    dateFilter !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
                  )}>
                    <SelectValue placeholder="Date" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Time</SelectItem>
                    <SelectItem value="today">Today</SelectItem>
                    <SelectItem value="yesterday">Yesterday</SelectItem>
                    <SelectItem value="7days">Last 7 Days</SelectItem>
                    <SelectItem value="30days">Last 30 Days</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Sort Filter */}
              <div className="w-[130px] sm:w-[140px]">
                <Select value={sortBy} onValueChange={setSortBy}>
                  <SelectTrigger className={cn(
                    "bg-transparent border-gray-200 dark:border-gray-800 rounded-xl h-10 transition-all duration-200",
                    sortBy !== "all" && "border-blue-500 dark:border-blue-400 bg-blue-50/20 dark:bg-blue-950/20 text-blue-600 dark:text-blue-400 font-semibold"
                  )}>
                    <SelectValue placeholder="Sort by" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Sort by</SelectItem>
                    <SelectItem value="newest">Newest First</SelectItem>
                    <SelectItem value="oldest">Oldest First</SelectItem>
                    <SelectItem value="title_asc">Title (A-Z)</SelectItem>
                    <SelectItem value="duration_desc">Longest First</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Reset button */}
              {hasActiveFilters && (
                <SimpleTooltip content="Reset all active filters">
                  <Button
                    variant="ghost"
                    onClick={resetFilters}
                    className="h-10 px-3 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 rounded-xl gap-1.5"
                  >
                    <RotateCcw className="h-3.5 w-3.5" />
                    <span className="hidden md:inline">Reset</span>
                  </Button>
                </SimpleTooltip>
              )}
            </div>
          </div>

          <Tabs value={activeSubTab} onValueChange={setActiveSubTab} className="flex-1 min-h-0 flex flex-col space-y-4">
            <TabsList className="flex-wrap h-auto gap-1 p-1 shrink-0 justify-start">
              <TabsTrigger value="all" className="text-xs h-7 px-3 gap-1.5">
                <Video className="h-3 w-3" />
                All
                {activeSubTab === "all" && hasCounts && (
                  <span className="ml-0.5 opacity-60">({allCount})</span>
                )}
              </TabsTrigger>

              {orderedSegments.map((segment) => {
                const cfg   = SEGMENT_CONFIG[segment];
                const count = segmentCounts[segment] ?? 0;
                const Icon  = cfg ? cfg.icon : Video;
                return (
                  <TabsTrigger key={segment} value={segment} className="text-xs h-7 px-3 gap-1.5">
                    <Icon className="h-3 w-3" />
                    {cfg?.label ?? segment}
                    {count > 0 && (
                      <span className={cn(
                        "ml-0.5 opacity-70",
                        segment === "failed" && "text-red-500 opacity-100 font-semibold"
                      )}>({count})</span>
                    )}
                  </TabsTrigger>
                );
              })}
            </TabsList>

            <TabsContent value="all" className="flex-1 min-h-0 overflow-y-auto focus-visible:outline-none pr-1">
              <AllTab
                onNewRecording={() => setNewMeetingDialogOpen(true)}
                searchQuery={debouncedSearchQuery}
                platformFilter={platformFilter}
                dateFilter={dateFilter}
                typeFilter={typeFilter}
                sortBy={sortBy}
                onResetFilters={resetFilters}
              />
            </TabsContent>

            {orderedSegments.map((segment) => (
              <TabsContent key={segment} value={segment} className="flex-1 min-h-0 overflow-y-auto focus-visible:outline-none pr-1">
                <SegmentTab
                  segment={segment}
                  onNewRecording={() => setNewMeetingDialogOpen(true)}
                  searchQuery={debouncedSearchQuery}
                  platformFilter={platformFilter}
                  dateFilter={dateFilter}
                  typeFilter={typeFilter}
                  sortBy={sortBy}
                  onResetFilters={resetFilters}
                />
              </TabsContent>
            ))}
          </Tabs>
        </>
      ) : (
        <InvitedMeetingsTab />
      )}

      <NewMeetingDialog
        open={newMeetingDialogOpen}
        onOpenChange={setNewMeetingDialogOpen}
        onSuccess={() => refetch()}
      />
    </div>
  );
}