"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  Mail, 
  Send, 
  Inbox, 
  FileText, 
  RefreshCw, 
  TrendingUp,
  Users,
  Calendar,
  ArrowRight,
  Trash2,
  Edit
} from "lucide-react";
import { getMailAccounts, getMailTemplates, getMailStatistics, getTodayReceivedCount } from "@/lib/api/mail";
import MailNotifications from "@/components/mail/MailNotifications";

interface DashboardStats {
  totalAccounts: number;
  totalTemplates: number;
  sentToday: number;
  receivedToday: number;
  sentThisMonth: number;
  successRate: number;
}

export default function MailDashboardPage() {
  const [stats, setStats] = useState<DashboardStats>({
    totalAccounts: 0,
    totalTemplates: 0,
    sentToday: 0,
    receivedToday: 0,
    sentThisMonth: 0,
    successRate: 0,
  });
  const [loading, setLoading] = useState(false);

  const loadStats = async () => {
    setLoading(true);
    try {
      const accounts = await getMailAccounts();
      const templates = await getMailTemplates();
      
      // 메일 통계 조회 (실패 시 기본값 사용)
      let mailStats = {
        todayCount: 0,
        thisMonthCount: 0,
        successRate: 0,
      };
      
      try {
        const stats = await getMailStatistics();
        if (stats && typeof stats === 'object') {
          mailStats = {
            todayCount: stats.todayCount || 0,
            thisMonthCount: stats.thisMonthCount || 0,
            successRate: stats.successRate || 0,
          };
        }
      } catch (error) {
        // console.error('메일 통계 조회 실패:', error);
        // 기본값 사용
      }

      // 오늘 수신 메일 수 조회 (IMAP 실시간 조회)
      let receivedTodayCount = 0;
      try {
        receivedTodayCount = await getTodayReceivedCount();
      } catch (error) {
        // console.error('수신 메일 수 조회 실패:', error);
        // 실패 시 0으로 표시
      }

      setStats({
        totalAccounts: accounts.length,
        totalTemplates: templates.length,
        sentToday: mailStats.todayCount,
        receivedToday: receivedTodayCount,
        sentThisMonth: mailStats.thisMonthCount,
        successRate: mailStats.successRate,
      });
    } catch (error) {
      // console.error('통계 로드 실패:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadStats();
  }, []);

  const statCards = [
    {
      title: "등록된 계정",
      value: stats.totalAccounts,
      icon: Users,
      color: "blue",
      bgColor: "bg-primary/10",
      iconColor: "text-primary",
      href: "/admin/mail/accounts",
    },
    {
      title: "템플릿 수",
      value: stats.totalTemplates,
      icon: FileText,
      color: "green",
      bgColor: "bg-emerald-100",
      iconColor: "text-emerald-600",
      href: "/admin/mail/templates",
    },
    {
      title: "오늘 발송",
      value: stats.sentToday,
      icon: Send,
      color: "orange",
      bgColor: "bg-amber-100",
      iconColor: "text-amber-600",
      href: "/admin/mail/sent",
    },
    {
      title: "오늘 수신",
      value: stats.receivedToday,
      icon: Inbox,
      color: "purple",
      bgColor: "bg-purple-100",
      iconColor: "text-purple-600",
      href: "/admin/mail/receive",
    },
  ];

  const quickLinks = [
    {
      title: "계정 관리",
      description: "메일 계정 설정",
      href: "/admin/mail/accounts",
      icon: Users,
      color: "blue",
    },
    {
      title: "템플릿 관리",
      description: "템플릿 편집",
      href: "/admin/mail/templates",
      icon: FileText,
      color: "green",
    },
    {
      title: "메일 발송",
      description: "메일 보내기",
      href: "/admin/mail/send",
      icon: Send,
      color: "orange",
    },
    {
      title: "대량 발송",
      description: "CSV로 대량 발송",
      href: "/admin/mail/bulk-send",
      icon: Users,
      color: "teal",
    },
    {
      title: "보낸메일함",
      description: "발송 이력 확인",
      href: "/admin/mail/sent",
      icon: Mail,
      color: "indigo",
    },
    {
      title: "수신함",
      description: "받은 메일 확인",
      href: "/admin/mail/receive",
      icon: Inbox,
      color: "purple",
    },
    {
      title: "임시 저장",
      description: "작성 중인 메일",
      href: "/admin/mail/drafts",
      icon: Edit,
      color: "amber",
    },
    {
      title: "휴지통",
      description: "삭제된 메일",
      href: "/admin/mail/trash",
      icon: Trash2,
      color: "red",
    },
  ];

  return (
    <div className="min-h-screen bg-background">
      <div className="mx-auto w-full max-w-[1920px] space-y-3 p-3 sm:p-4 2xl:p-5">
        {/* 페이지 제목 */}
        <div className="flex items-center justify-between bg-card rounded-lg border p-4 2xl:p-5">
          <div className="flex items-center gap-3">
            <div className="p-2.5 bg-primary/10 rounded-lg">
              <Mail className="w-6 h-6 text-primary" />
            </div>
            <div>
              <h1 className="text-xl 2xl:text-2xl font-bold text-foreground leading-tight">메일 관리 대시보드</h1>
              <p className="text-xs 2xl:text-sm text-muted-foreground">메일 시스템의 전체 현황을 한눈에 확인하세요</p>
            </div>
          </div>
          <div className="flex gap-2">
            <MailNotifications />
            <Button
              variant="outline"
              size="sm"
              onClick={loadStats}
              disabled={loading}
              className="h-9 gap-2"
            >
              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
              새로고침
            </Button>
          </div>
        </div>

        {/* 통계 카드 */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          {statCards.map((stat, index) => (
            <Link key={index} href={stat.href}>
              <Card className="hover:shadow-md transition-all hover:scale-[1.02] cursor-pointer h-full">
                <CardContent className="p-4">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1 min-w-0">
                      <p className="text-xs 2xl:text-sm font-medium text-muted-foreground mb-1.5">
                        {stat.title}
                      </p>
                      <p className="text-2xl 2xl:text-3xl font-bold text-foreground leading-none">
                        {stat.value}
                      </p>
                    </div>
                    <div className="p-2.5 bg-muted rounded-lg shrink-0">
                      <stat.icon className="w-5 h-5 text-muted-foreground" />
                    </div>
                  </div>
                  {/* 진행 바 */}
                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
                    <div
                      className="h-full bg-primary transition-all duration-1000"
                      style={{ width: `${Math.min((stat.value / 10) * 100, 100)}%` }}
                    ></div>
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>

        {/* 본문: 이번 달 통계 + 시스템 상태 + 빠른 액세스 (FullHD에서 3열 그리드) */}
        <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3">
          <Card>
            <CardHeader className="border-b py-3 px-4">
              <CardTitle className="text-sm 2xl:text-base flex items-center">
                <div className="p-1.5 bg-muted rounded-md mr-2">
                  <Calendar className="w-4 h-4 text-foreground" />
                </div>
                <span>이번 달 발송 통계</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-3 2xl:p-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between px-3 py-2.5 bg-muted rounded-md">
                  <span className="text-xs 2xl:text-sm font-medium text-muted-foreground">총 발송 건수</span>
                  <span className="text-lg 2xl:text-xl font-bold text-foreground">{stats.sentThisMonth} 건</span>
                </div>
                <div className="flex items-center justify-between px-3 py-2.5 bg-muted rounded-md">
                  <span className="text-xs 2xl:text-sm font-medium text-muted-foreground">성공률</span>
                  <span className="text-lg 2xl:text-xl font-bold text-foreground">{stats.successRate}%</span>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="border-b py-3 px-4">
              <CardTitle className="text-sm 2xl:text-base flex items-center">
                <div className="p-1.5 bg-muted rounded-md mr-2">
                  <Mail className="w-4 h-4 text-foreground" />
                </div>
                <span>시스템 상태</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="p-3 2xl:p-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between px-3 py-2.5 bg-muted rounded-md">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
                    <span className="text-xs 2xl:text-sm font-medium text-muted-foreground">메일 서버</span>
                  </div>
                  <span className="text-xs 2xl:text-sm font-bold text-foreground">정상 작동</span>
                </div>
                <div className="flex items-center justify-between px-3 py-2.5 bg-muted rounded-md">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-primary rounded-full"></div>
                    <span className="text-xs 2xl:text-sm font-medium text-muted-foreground">활성 계정</span>
                  </div>
                  <span className="text-base 2xl:text-lg font-bold text-foreground">{stats.totalAccounts} 개</span>
                </div>
                <div className="flex items-center justify-between px-3 py-2.5 bg-muted rounded-md">
                  <div className="flex items-center gap-2">
                    <div className="w-2 h-2 bg-primary rounded-full"></div>
                    <span className="text-xs 2xl:text-sm font-medium text-muted-foreground">사용 가능 템플릿</span>
                  </div>
                  <span className="text-base 2xl:text-lg font-bold text-foreground">{stats.totalTemplates} 개</span>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* 빠른 액세스 — FullHD에서는 우측 컬럼에 함께 배치 */}
          <Card className="2xl:row-span-1">
            <CardHeader className="border-b py-3 px-4">
              <CardTitle className="text-sm 2xl:text-base">빠른 액세스</CardTitle>
            </CardHeader>
            <CardContent className="p-3">
              <div className="grid grid-cols-2 gap-2">
                {quickLinks.map((link, index) => (
                  <a
                    key={index}
                    href={link.href}
                    className="group flex items-center gap-2 p-2.5 rounded-md border hover:border-primary/50 hover:shadow-sm transition-all bg-card hover:bg-muted/50"
                  >
                    <div className="p-1.5 bg-muted rounded-md group-hover:scale-105 transition-transform shrink-0">
                      <link.icon className="w-4 h-4 text-muted-foreground" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-semibold text-foreground text-xs 2xl:text-sm leading-tight truncate">{link.title}</p>
                      <p className="text-[10px] 2xl:text-xs text-muted-foreground truncate">{link.description}</p>
                    </div>
                    <ArrowRight className="w-3.5 h-3.5 text-muted-foreground group-hover:text-foreground group-hover:translate-x-0.5 transition-all shrink-0" />
                  </a>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
