"use client";

import { XIcon, MinusIcon, SquareIcon, RefreshCwIcon } from "lucide-react";
import { useState, useEffect } from "react";
import { checkConnectionStatus } from "@/app/actions/sync";
import { toast } from "sonner";
import { SyncWorker } from "./sync-worker";
import { format } from "date-fns-jalali";
import { signOut } from "next-auth/react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

export function AppTitleBar() {
  const [isMounted, setIsMounted] = useState(false);
  const [now, setNow] = useState<Date | null>(null);
  const [syncStatus, setSyncStatus] = useState<{ configured: boolean, online: boolean } | null>(null);
  const [isChecking, setIsChecking] = useState(false);
  const [showExitAlert, setShowExitAlert] = useState(false);

  useEffect(() => {
    setIsMounted(true);
    setNow(new Date());
    const timer = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  const tehranTime = now ? new Intl.DateTimeFormat('fa-IR', {
    timeZone: 'Asia/Tehran',
    hour: '2-digit', minute: '2-digit', second: '2-digit'
  }).format(now) : "در حال دریافت...";

  const tehranDate = now ? format(now, "EEEE d MMMM yyyy") : "";

  const handleControl = (action: 'minimize' | 'maximize' | 'close') => {
    if (action === 'close') {
      setShowExitAlert(true);
      return;
    }
    if (typeof window !== 'undefined' && 'require' in window) {
      try {
        const { ipcRenderer } = (window as any).require('electron');
        ipcRenderer.invoke('window-control', action);
      } catch (e) {
        console.error("Electron IPC not available");
      }
    }
  };

  const confirmExit = async () => {
    try {
      await signOut({ redirect: false });
    } catch (e) {
      console.error("Logout error", e);
    }
    if (typeof window !== 'undefined' && 'require' in window) {
      try {
        const { ipcRenderer } = (window as any).require('electron');
        ipcRenderer.invoke('window-control', 'close');
      } catch (e) { }
    }
  };

  const handleManualCheck = async () => {
    setIsChecking(true);
    try {
      const status = await checkConnectionStatus();
      setSyncStatus({ configured: status.configured, online: status.online });
      if (status.online) {
        toast.success("ارتباط با سرور مرکزی مجدداً برقرار شد.");
      } else {
        toast.error("تلاش ناموفق. سرور مرکزی در دسترس نیست.");
      }
    } catch (e) {
      toast.error("خطا در ارتباط با شبکه.");
    } finally {
      setIsChecking(false);
    }
  };

  const isElectron = typeof window !== 'undefined' && 'require' in window && navigator.userAgent.includes('Electron');

  if (!isMounted || !isElectron) return null; // Only show TitleBar if mounted and running in Electron

  return (
    <TooltipProvider>
      <div className="h-9 w-full bg-white/40 dark:bg-zinc-950/90 border-b border-black/10 dark:border-white/10 backdrop-blur-md text-zinc-800 dark:text-slate-100 flex items-center justify-between pr-3 select-none flex-shrink-0 z-50 relative" style={{ WebkitAppRegion: 'drag' } as any}>

        {/* Title (Right in RTL) */}
      <div className="flex items-center gap-3">
        <div className="text-xs font-black tracking-widest text-zinc-700 dark:text-slate-200 ml-2">سیستم مدیریت توکان</div>
        {now && (
          <div className="text-[11px] font-medium text-zinc-500 dark:text-slate-300/80 tracking-wide font-sans flex gap-2 justify-center">
            <span>{tehranDate}</span>
            <span className="opacity-30"> </span>
            <span className="w-14 text-center">{tehranTime}</span>
          </div>
        )}
      </div>

      {/* Sync Worker & Status Indicator */}
      <SyncWorker setSyncStatus={setSyncStatus} />

      <div className="mr-auto ml-4">
        {syncStatus === null ? (
          <div className="text-[10px] font-bold text-zinc-400 dark:text-slate-400 flex items-center gap-2 opacity-80">
            <span className="w-1.5 h-1.5 rounded-full bg-slate-500 animate-pulse"></span> در حال بررسی...
          </div>
        ) : syncStatus.configured ? (
          <div className={`text-[10px] font-bold flex items-center gap-2 transition-colors duration-500 ${syncStatus.online ? 'text-emerald-400' : 'text-rose-400'}`}>
            <span className={`w-1.5 h-1.5 rounded-full transition-colors duration-500 ${syncStatus.online ? 'bg-emerald-500 shadow-[0_0_5px_#10b981] animate-pulse' : 'bg-rose-500 shadow-[0_0_5px_#f43f5e]'}`}></span>
            <span className="opacity-80">
              {syncStatus.online ? 'متصل به سرور مرکزی (آنلاین)' : 'ارتباط با سرور قطع است (آفلاین)'}
            </span>
            {!syncStatus.online && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <button
                    onClick={handleManualCheck}
                    disabled={isChecking}
                    className="ml-2 bg-white/10 hover:bg-white/20 p-1 rounded transition-colors disabled:opacity-50"
                    style={{ WebkitAppRegion: 'no-drag' } as any}
                  >
                    <RefreshCwIcon className={`w-3 h-3 ${isChecking ? 'animate-spin' : ''}`} />
                  </button>
                </TooltipTrigger>
                <TooltipContent side="bottom" className="text-xs font-sans">
                  تلاش مجدد برای اتصال
                </TooltipContent>
              </Tooltip>
            )}
          </div>
        ) : (
          <div className="text-[10px] font-bold text-zinc-400 dark:text-slate-400 flex items-center gap-2 opacity-80">
            <span className="w-1.5 h-1.5 rounded-full bg-slate-500"></span> سرور مرکزی پیکربندی نشده (مستقل)
          </div>
        )}
      </div>

      {/* Controls (Left in RTL) */}
      <div className="flex items-center h-full" style={{ WebkitAppRegion: 'no-drag' } as any}>
        <Tooltip>
          <TooltipTrigger asChild>
            <button onClick={() => handleControl('minimize')} className="w-12 h-full flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10 transition-colors group">
              <MinusIcon className="w-4 h-4 text-zinc-400 dark:text-slate-400 group-hover:text-zinc-900 dark:group-hover:text-white" />
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="font-sans text-xs">کوچک کردن</TooltipContent>
        </Tooltip>
        
        <Tooltip>
          <TooltipTrigger asChild>
            <button onClick={() => handleControl('maximize')} className="w-12 h-full flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10 transition-colors group">
              <SquareIcon className="w-3 h-3 text-zinc-400 dark:text-slate-400 group-hover:text-zinc-900 dark:group-hover:text-white" />
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="font-sans text-xs">بزرگ کردن</TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <button onClick={() => handleControl('close')} className="w-12 h-full flex items-center justify-center hover:bg-rose-500 transition-colors group">
              <XIcon className="w-4 h-4 text-zinc-400 dark:text-slate-400 group-hover:text-white" />
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="font-sans text-xs text-rose-500 font-bold">بستن سیستم</TooltipContent>
        </Tooltip>
      </div>

      <AlertDialog open={showExitAlert} onOpenChange={setShowExitAlert}>
        <AlertDialogContent dir="rtl" className="font-sans">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-right font-black">خروج از سیستم</AlertDialogTitle>
            <AlertDialogDescription className="text-right text-base font-medium mt-2">
              آیا مطمئن هستید که می‌خواهید از سیستم خارج شوید؟
              با تایید خروج، حساب کاربری شما نیز جهت امنیت بیشتر از سیستم خارج خواهد شد.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter className="flex gap-2 justify-end sm:justify-end mt-4">
            <AlertDialogCancel className="font-bold cursor-pointer">لغو</AlertDialogCancel>
            <AlertDialogAction onClick={confirmExit} className="font-bold bg-rose-600 hover:bg-rose-700 text-white cursor-pointer">
              تایید و خروج کامل
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

    </div>
    </TooltipProvider>
  );
}