"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import {
  Megaphone,
  MessageSquare,
  Mail,
  Plus,
  FileText,
  Calendar,
  Receipt,
  Users,
  Sparkles,
  RefreshCcw,
  ChevronRight,
  DollarSign,
  Briefcase,
  ArrowUpRight,
  ArrowDownRight,
} from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { fetchConversations } from "@/lib/supabase/comms-actions";
import { fetchSentEmails } from "@/lib/supabase/invoicing-actions";
import { fetchAnnouncements } from "@/lib/supabase/noticeboard-actions";
import { fetchDashboardData, type DashboardData } from "@/lib/supabase/dashboard-actions";
import { getCurrentUserInfo } from "@/lib/supabase/rbac-actions";
import { generateFinancialNarrative } from "@/lib/gemini";
import { usePermissions } from "@/hooks/usePermissions";
import PageSkeleton from "./PageSkeleton";

// Quick action definitions with required permissions
interface QuickAction {
  label: string;
  icon: typeof FileText;
  href: string;
  color: string;
  requiredPermission?: "can_manage_invoices" | "can_manage_expenses" | "can_manage_noticeboard" | "can_approve_leave";
}

const ALL_QUICK_ACTIONS: QuickAction[] = [
  { label: "New Invoice", icon: FileText, href: "/invoices?view=new", color: "bg-blue-50 text-blue-600 hover:bg-blue-100", requiredPermission: "can_manage_invoices" },
  { label: "Request Leave", icon: Calendar, href: "/leave", color: "bg-purple-50 text-purple-600 hover:bg-purple-100", requiredPermission: "can_approve_leave" },
  { label: "Add Expense", icon: Receipt, href: "/expenses", color: "bg-orange-50 text-orange-600 hover:bg-orange-100", requiredPermission: "can_manage_expenses" },
  { label: "Post Update", icon: Megaphone, href: "/noticeboard", color: "bg-teal-50 text-teal-600 hover:bg-teal-100", requiredPermission: "can_manage_noticeboard" },
];

export default function HomePage() {
  const router = useRouter();
  const { hasPermission, hasAnyPermission, isOwnerOrAdmin } = usePermissions();
  const [loading, setLoading] = useState(true);
  const [userInfo, setUserInfo] = useState<any>(null);
  const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
  const [announcements, setAnnouncements] = useState<any[]>([]);
  const [conversations, setConversations] = useState<any[]>([]);
  const [sentEmails, setSentEmails] = useState<any[]>([]);
  const [aiNarrative, setAiNarrative] = useState<string | null>(null);
  const [generatingAi, setGeneratingAi] = useState(false);

  useEffect(() => {
    let cancelled = false;

    const loadData = async () => {
      try {
        const [user, dash, anns, convos, emails] = await Promise.all([
          getCurrentUserInfo().catch(() => null),
          fetchDashboardData().catch(() => null),
          fetchAnnouncements().catch(() => []),
          fetchConversations().catch(() => []),
          fetchSentEmails(10).catch(() => []),
        ]);

        if (cancelled) return;

        setUserInfo(user);
        setDashboardData(dash);
        setAnnouncements((anns as any[]).slice(0, 3));
        setConversations((convos as any[]).slice(0, 3));
        setSentEmails(emails || []);

        // Initial AI Narrative load
        if (dash && user) {
          setGeneratingAi(true);
          const narrative = await generateFinancialNarrative(dash);
          if (!cancelled) setAiNarrative(narrative);
          setGeneratingAi(false);
        }
      } catch (err) {
        console.error("Home Page data load failed:", err);
      } finally {
        if (!cancelled) setLoading(false);
      }
    };

    loadData();
    return () => { cancelled = true; };
  }, []);

  const handleRefreshAi = async () => {
    if (!dashboardData) return;
    setGeneratingAi(true);
    const narrative = await generateFinancialNarrative(dashboardData);
    setAiNarrative(narrative);
    setGeneratingAi(false);
  };

  if (loading) return <PageSkeleton name="Home" />;

  const firstName = userInfo?.fullName?.split(" ")[0] || "there";

  // Filter quick actions based on user permissions
  const visibleQuickActions = ALL_QUICK_ACTIONS.filter((action) => {
    if (isOwnerOrAdmin) return true;
    if (!action.requiredPermission) return true;
    return hasPermission(action.requiredPermission);
  });

  // Determine what dashboard sections to show based on permissions
  const canViewFinances = isOwnerOrAdmin || hasAnyPermission(["can_view_dashboard", "can_view_invoices", "can_view_expenses"]);
  const canViewNoticeboard = isOwnerOrAdmin || hasPermission("can_view_noticeboard");
  const canUseComms = isOwnerOrAdmin || hasPermission("can_use_comms");
  const canViewSentEmails = isOwnerOrAdmin || hasPermission("can_view_sent_emails");

  return (
    <div className="max-w-7xl mx-auto p-6 lg:p-10 space-y-10 animate-in fade-in duration-500">
      {/* 1. Personal Greeting & AI Summary */}
      <section className="space-y-6">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
          <div>
            <h1 className="text-4xl md:text-5xl font-serif font-bold text-gray-900 tracking-tight">
              Hello, {firstName}.
            </h1>
            <p className="text-lg text-gray-500 mt-2 font-medium">
              Everything is ready for you today.
            </p>
          </div>
          
          <div className="hidden md:flex items-center gap-2 text-sm text-gray-400 font-medium bg-gray-100/50 px-4 py-2 rounded-full">
            <Calendar className="w-4 h-4" />
            {new Date().toLocaleDateString('en-AU', { weekday: 'long', day: 'numeric', month: 'long' })}
          </div>
        </div>

        {/* AI Insight Card - Simple and approachable */}
        {aiNarrative && (
          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-[#1D9E75] to-[#0F6E56] p-1 shadow-xl shadow-teal-900/10">
            <div className="bg-white/95 backdrop-blur-sm rounded-[22px] p-6 md:p-8">
              <div className="flex items-start gap-4">
                <div className="bg-teal-100 p-3 rounded-2xl shrink-0">
                  <Sparkles className="w-6 h-6 text-teal-600" />
                </div>
                <div className="flex-1 space-y-2">
                  <div className="flex items-center justify-between">
                    <h2 className="text-xs font-bold text-teal-600 uppercase tracking-[0.2em]">Smart Summary</h2>
                    <button 
                      onClick={handleRefreshAi}
                      className="p-1.5 hover:bg-teal-50 rounded-full text-teal-400 hover:text-teal-600 transition-all cursor-pointer"
                      disabled={generatingAi}
                    >
                      <RefreshCcw className={`w-4 h-4 ${generatingAi ? 'animate-spin' : ''}`} />
                    </button>
                  </div>
                  <p className="text-lg md:text-xl text-gray-800 leading-relaxed font-medium">
                    &quot;{aiNarrative}&quot;
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}
      </section>

      {/* 2. Quick Actions - Big, friendly tiles for newbies */}
      {visibleQuickActions.length > 0 && (
        <section className="space-y-4">
          <h2 className="text-sm font-bold text-gray-400 uppercase tracking-widest px-1">Quick Actions</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
            {visibleQuickActions.map((action) => (
              <button
                key={action.label}
                onClick={() => router.push(action.href)}
                className={`flex flex-col items-center justify-center p-6 rounded-3xl transition-all duration-300 border border-transparent hover:scale-[1.02] cursor-pointer group ${action.color}`}
              >
                <action.icon className="w-8 h-8 mb-3 transition-transform duration-300 group-hover:scale-110" />
                <span className="font-bold text-sm">{action.label}</span>
              </button>
            ))}
          </div>
        </section>
      )}

      {/* 3. The Dashboard - Simplified Metrics */}
      {dashboardData && (
        <section className="space-y-4">
          <h2 className="text-sm font-bold text-gray-400 uppercase tracking-widest px-1">Your Numbers</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="rounded-3xl border-0 bg-white shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8 flex items-center gap-6">
                <div className="w-14 h-14 rounded-2xl bg-emerald-50 flex items-center justify-center shrink-0">
                  <DollarSign className="w-7 h-7 text-emerald-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">Cash Available</p>
                  <div className="flex items-baseline gap-2">
                    <p className="text-3xl font-bold text-gray-900">${(dashboardData.metrics.cash_on_hand / 100).toLocaleString()}</p>
                    {dashboardData.trends.cash && (
                      <span className={`text-xs font-bold ${dashboardData.trends.cash.direction === 'up' ? 'text-emerald-500' : 'text-red-500'}`}>
                        {dashboardData.trends.cash.direction === 'up' ? '↑' : '↓'}{dashboardData.trends.cash.value}%
                      </span>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="rounded-3xl border-0 bg-white shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8 flex items-center gap-6">
                <div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center shrink-0">
                  <FileText className="w-7 h-7 text-blue-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">Owed to you</p>
                  <p className="text-3xl font-bold text-gray-900">${(dashboardData.metrics.outstanding_invoices / 100).toLocaleString()}</p>
                </div>
              </CardContent>
            </Card>

            <Card className="rounded-3xl border-0 bg-white shadow-sm hover:shadow-md transition-shadow">
              <CardContent className="p-8 flex items-center gap-6">
                <div className="w-14 h-14 rounded-2xl bg-amber-50 flex items-center justify-center shrink-0">
                  <Users className="w-7 h-7 text-amber-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-gray-500 uppercase tracking-wide">Total Team</p>
                  <p className="text-3xl font-bold text-gray-900">{dashboardData.metrics.headcount}</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      )}

      {/* 4. Company Hub & Activity */}
      {(canViewNoticeboard || canUseComms || canViewSentEmails) && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
          {/* Noticeboard & Messaging */}
          {(canViewNoticeboard || canUseComms) && (
            <section className="space-y-6">
              {canViewNoticeboard && (
                <div className="flex items-center justify-between px-1">
                  <h2 className="text-sm font-bold text-gray-400 uppercase tracking-widest">Company Hub</h2>
                  <button onClick={() => router.push('/noticeboard')} className="text-xs font-bold text-teal-600 hover:underline cursor-pointer">View Noticeboard</button>
                </div>
              )}

              {canViewNoticeboard && (
                <Card className="rounded-3xl border-0 bg-white shadow-sm overflow-hidden">
                  <div className="divide-y divide-gray-50">
                    {announcements.length > 0 ? announcements.map((a) => (
                      <div key={a.id} className="p-6 hover:bg-gray-50 transition-colors cursor-pointer group" onClick={() => router.push('/noticeboard')}>
                        <div className="flex items-center gap-3 mb-2">
                          <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-teal-50 text-teal-700 uppercase tracking-wider">New</span>
                          <span className="text-xs text-gray-400 font-medium">{new Date(a.created_at).toLocaleDateString()}</span>
                        </div>
                        <h3 className="font-bold text-gray-900 group-hover:text-teal-600 transition-colors">{a.title}</h3>
                        <p className="text-sm text-gray-500 mt-1 line-clamp-1">{a.body}</p>
                      </div>
                    )) : (
                      <div className="p-10 text-center text-gray-400 italic text-sm">No recent updates</div>
                    )}
                  </div>
                </Card>
              )}

              {canUseComms && (
                <Card className="rounded-3xl border-0 bg-teal-50/50 border-dashed border-2 border-teal-100 p-6 flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 rounded-full bg-white shadow-sm flex items-center justify-center">
                      <MessageSquare className="w-5 h-5 text-teal-600" />
                    </div>
                    <div>
                      <p className="text-sm font-bold text-gray-900">Need to talk?</p>
                      <p className="text-xs text-gray-500">Jump into a team conversation</p>
                    </div>
                  </div>
                  <button
                    onClick={() => router.push('/comms')}
                    className="px-4 py-2 bg-white text-teal-600 text-xs font-bold rounded-xl shadow-sm hover:shadow-md transition-all cursor-pointer"
                  >
                    Open Comms
                  </button>
                </Card>
              )}
            </section>
          )}

          {/* Recent Emails / Activity */}
          {canViewSentEmails && (
            <section className="space-y-6">
              <div className="flex items-center justify-between px-1">
                <h2 className="text-sm font-bold text-gray-400 uppercase tracking-widest">Recent Emails</h2>
                <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
              </div>

              <Card className="rounded-3xl border-0 bg-white shadow-sm overflow-hidden">
                <div className="divide-y divide-gray-50">
                  {sentEmails.length > 0 ? sentEmails.slice(0, 5).map((e) => (
                    <div key={e.id} className="p-5 flex items-center justify-between group hover:bg-gray-50 transition-colors">
                      <div className="flex items-center gap-4 min-w-0">
                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${e.status === 'sent' ? 'bg-emerald-50' : 'bg-red-50'}`}>
                          <Mail className={`w-5 h-5 ${e.status === 'sent' ? 'text-emerald-600' : 'text-red-600'}`} />
                        </div>
                        <div className="min-w-0">
                          <p className="text-sm font-bold text-gray-900 truncate">{e.subject}</p>
                          <p className="text-xs text-gray-400 truncate">To: {e.to_email}</p>
                        </div>
                      </div>
                      <div className="text-right shrink-0 ml-4">
                        <p className="text-[10px] font-bold text-gray-300 uppercase tracking-tighter">
                          {new Date(e.sent_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                        </p>
                      </div>
                    </div>
                  )) : (
                    <div className="p-10 text-center text-gray-400 italic text-sm">No emails sent recently</div>
                  )}
                </div>
              </Card>
            </section>
          )}

          {/* Spacer for single-column when only one section is visible */}
          {!(canViewNoticeboard || canUseComms) && canViewSentEmails && (
            <div className="hidden lg:block" />
          )}
          {(canViewNoticeboard || canUseComms) && !canViewSentEmails && (
            <div className="hidden lg:block" />
          )}
        </div>
      )}
    </div>
  );
}