"use client";

import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";
import {
  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import {
  Loader2, Send, Inbox, CheckCircle, XCircle, Clock, Eye,
} from "lucide-react";
import { ScrollToTop } from "@/components/common/ScrollToTop";
import {
  getApprovalRequests,
  getApprovalRequest,
  getMyPendingApprovals,
  processApprovalLine,
  cancelApprovalRequest,
  type ApprovalRequest,
  type ApprovalLine,
} from "@/lib/api/approval";

const STATUS_MAP: Record<string, { label: string; variant: "default" | "secondary" | "destructive" | "outline" }> = {
  requested: { label: "요청", variant: "outline" },
  in_progress: { label: "진행중", variant: "default" },
  approved: { label: "승인", variant: "default" },
  rejected: { label: "반려", variant: "destructive" },
  cancelled: { label: "회수", variant: "secondary" },
  waiting: { label: "대기", variant: "outline" },
  pending: { label: "결재대기", variant: "default" },
  skipped: { label: "건너뜀", variant: "secondary" },
};

function StatusBadge({ status }: { status: string }) {
  const info = STATUS_MAP[status] || { label: status, variant: "outline" as const };
  return <Badge variant={info.variant}>{info.label}</Badge>;
}

function formatDate(dateStr?: string) {
  if (!dateStr) return "-";
  return new Date(dateStr).toLocaleDateString("ko-KR", {
    year: "numeric", month: "2-digit", day: "2-digit",
    hour: "2-digit", minute: "2-digit",
  });
}

// ============================================================
// 상신함 (내가 올린 결재)
// ============================================================
function SentTab() {
  const [requests, setRequests] = useState<ApprovalRequest[]>([]);
  const [loading, setLoading] = useState(true);
  const [detailOpen, setDetailOpen] = useState(false);
  const [selectedRequest, setSelectedRequest] = useState<ApprovalRequest | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);

  const fetchRequests = useCallback(async () => {
    setLoading(true);
    const res = await getApprovalRequests({ my_approvals: false });
    if (res.success && res.data) setRequests(res.data);
    setLoading(false);
  }, []);

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

  const openDetail = async (req: ApprovalRequest) => {
    setDetailLoading(true);
    setDetailOpen(true);
    const res = await getApprovalRequest(req.request_id);
    if (res.success && res.data) {
      setSelectedRequest(res.data);
    } else {
      setSelectedRequest(req);
    }
    setDetailLoading(false);
  };

  const handleCancel = async () => {
    if (!selectedRequest) return;
    const res = await cancelApprovalRequest(selectedRequest.request_id);
    if (res.success) {
      toast.success("결재가 회수되었습니다.");
      setDetailOpen(false);
      fetchRequests();
    } else {
      toast.error(res.error || "회수 실패");
    }
  };

  return (
    <div className="space-y-4">
      {loading ? (
        <div className="flex h-64 items-center justify-center">
          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
        </div>
      ) : requests.length === 0 ? (
        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
          <Send className="text-muted-foreground mb-2 h-8 w-8" />
          <p className="text-muted-foreground text-sm">상신한 결재가 없습니다.</p>
        </div>
      ) : (
        <div className="bg-card rounded-lg border shadow-sm">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">진행</TableHead>
                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">상태</TableHead>
                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
                <TableHead className="h-12 w-[60px] text-center text-sm font-semibold">보기</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {requests.map((req) => (
                <TableRow key={req.request_id} className="border-b transition-colors hover:bg-muted/50">
                  <TableCell className="h-14 text-sm font-medium">{req.title}</TableCell>
                  <TableCell className="text-muted-foreground h-14 text-sm">{req.target_table}</TableCell>
                  <TableCell className="h-14 text-center text-sm">
                    {req.current_step}/{req.total_steps}
                  </TableCell>
                  <TableCell className="h-14 text-center"><StatusBadge status={req.status} /></TableCell>
                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(req.created_at)}</TableCell>
                  <TableCell className="h-14 text-center">
                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openDetail(req)}>
                      <Eye className="h-4 w-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/* 상세 모달 */}
      <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[560px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">결재 상세</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              {selectedRequest?.title}
            </DialogDescription>
          </DialogHeader>
          {detailLoading ? (
            <div className="flex h-32 items-center justify-center">
              <Loader2 className="h-5 w-5 animate-spin" />
            </div>
          ) : selectedRequest && (
            <div className="max-h-[50vh] space-y-4 overflow-y-auto">
              <div className="grid grid-cols-2 gap-3 text-sm">
                <div>
                  <span className="text-muted-foreground text-xs">상태</span>
                  <div className="mt-1"><StatusBadge status={selectedRequest.status} /></div>
                </div>
                <div>
                  <span className="text-muted-foreground text-xs">진행</span>
                  <p className="mt-1 font-medium">{selectedRequest.current_step}/{selectedRequest.total_steps}단계</p>
                </div>
                <div>
                  <span className="text-muted-foreground text-xs">대상 테이블</span>
                  <p className="mt-1 font-medium">{selectedRequest.target_table}</p>
                </div>
                <div>
                  <span className="text-muted-foreground text-xs">요청일</span>
                  <p className="mt-1">{formatDate(selectedRequest.created_at)}</p>
                </div>
              </div>
              {selectedRequest.description && (
                <div>
                  <span className="text-muted-foreground text-xs">사유</span>
                  <p className="mt-1 text-sm">{selectedRequest.description}</p>
                </div>
              )}
              {/* 결재선 */}
              {selectedRequest.lines && selectedRequest.lines.length > 0 && (
                <div>
                  <span className="text-muted-foreground text-xs">결재선</span>
                  <div className="mt-2 space-y-2">
                    {selectedRequest.lines
                      .sort((a, b) => a.step_order - b.step_order)
                      .map((line) => (
                        <div key={line.line_id} className="bg-muted/30 flex items-center justify-between rounded-md border p-2">
                          <div className="flex items-center gap-2">
                            <Badge variant="outline" className="text-[10px]">{line.step_order}차</Badge>
                            <span className="text-sm font-medium">{line.approver_name || line.approver_id}</span>
                            {line.approver_position && (
                              <span className="text-muted-foreground text-xs">({line.approver_position})</span>
                            )}
                          </div>
                          <div className="flex items-center gap-2">
                            <StatusBadge status={line.status} />
                            {line.processed_at && (
                              <span className="text-muted-foreground text-[10px]">{formatDate(line.processed_at)}</span>
                            )}
                          </div>
                        </div>
                      ))}
                  </div>
                </div>
              )}
            </div>
          )}
          <DialogFooter className="gap-2 sm:gap-0">
            {selectedRequest?.status === "requested" && (
              <Button variant="destructive" onClick={handleCancel} className="h-8 text-xs sm:h-10 sm:text-sm">
                결재 회수
              </Button>
            )}
            <Button variant="outline" onClick={() => setDetailOpen(false)} className="h-8 text-xs sm:h-10 sm:text-sm">
              닫기
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ============================================================
// 수신함 (내가 결재해야 할 것)
// ============================================================
function ReceivedTab() {
  const [pendingLines, setPendingLines] = useState<ApprovalLine[]>([]);
  const [loading, setLoading] = useState(true);

  const [processOpen, setProcessOpen] = useState(false);
  const [selectedLine, setSelectedLine] = useState<ApprovalLine | null>(null);
  const [comment, setComment] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);

  const fetchPending = useCallback(async () => {
    setLoading(true);
    const res = await getMyPendingApprovals();
    if (res.success && res.data) setPendingLines(res.data);
    setLoading(false);
  }, []);

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

  const openProcess = (line: ApprovalLine) => {
    setSelectedLine(line);
    setComment("");
    setProcessOpen(true);
  };

  const handleProcess = async (action: "approved" | "rejected") => {
    if (!selectedLine) return;
    setIsProcessing(true);
    const res = await processApprovalLine(selectedLine.line_id, {
      action,
      comment: comment.trim() || undefined,
    });
    setIsProcessing(false);
    if (res.success) {
      toast.success(action === "approved" ? "승인되었습니다." : "반려되었습니다.");
      setProcessOpen(false);
      fetchPending();
    } else {
      toast.error(res.error || "처리 실패");
    }
  };

  return (
    <div className="space-y-4">
      {loading ? (
        <div className="flex h-64 items-center justify-center">
          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
        </div>
      ) : pendingLines.length === 0 ? (
        <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border shadow-sm">
          <Inbox className="text-muted-foreground mb-2 h-8 w-8" />
          <p className="text-muted-foreground text-sm">결재 대기 건이 없습니다.</p>
        </div>
      ) : (
        <div className="bg-card rounded-lg border shadow-sm">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50 border-b hover:bg-muted/50">
                <TableHead className="h-12 text-sm font-semibold">제목</TableHead>
                <TableHead className="h-12 text-sm font-semibold">요청자</TableHead>
                <TableHead className="h-12 text-sm font-semibold">대상 테이블</TableHead>
                <TableHead className="h-12 w-[80px] text-center text-sm font-semibold">단계</TableHead>
                <TableHead className="h-12 w-[140px] text-sm font-semibold">요청일</TableHead>
                <TableHead className="h-12 w-[100px] text-center text-sm font-semibold">처리</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pendingLines.map((line) => (
                <TableRow key={line.line_id} className="border-b transition-colors hover:bg-muted/50">
                  <TableCell className="h-14 text-sm font-medium">{line.title || "-"}</TableCell>
                  <TableCell className="h-14 text-sm">
                    {line.requester_name || "-"}
                    {line.requester_dept && (
                      <span className="text-muted-foreground ml-1 text-xs">({line.requester_dept})</span>
                    )}
                  </TableCell>
                  <TableCell className="text-muted-foreground h-14 text-sm">{line.target_table || "-"}</TableCell>
                  <TableCell className="h-14 text-center text-sm">
                    <Badge variant="outline">{line.step_order}차</Badge>
                  </TableCell>
                  <TableCell className="text-muted-foreground h-14 text-sm">{formatDate(line.request_created_at || line.created_at)}</TableCell>
                  <TableCell className="h-14 text-center">
                    <Button size="sm" className="h-8 text-xs" onClick={() => openProcess(line)}>
                      결재하기
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/* 결재 처리 모달 */}
      <Dialog open={processOpen} onOpenChange={setProcessOpen}>
        <DialogContent className="max-w-[95vw] sm:max-w-[450px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">결재 처리</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              {selectedLine?.title}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-3 text-sm">
              <div>
                <span className="text-muted-foreground text-xs">요청자</span>
                <p className="mt-1 font-medium">{selectedLine?.requester_name || "-"}</p>
              </div>
              <div>
                <span className="text-muted-foreground text-xs">결재 단계</span>
                <p className="mt-1 font-medium">{selectedLine?.step_order}차 결재</p>
              </div>
            </div>
            <div>
              <Label className="text-xs sm:text-sm">의견</Label>
              <Textarea
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="결재 의견을 입력하세요 (선택사항)"
                className="min-h-[80px] text-xs sm:text-sm"
              />
            </div>
          </div>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="destructive"
              onClick={() => handleProcess("rejected")}
              disabled={isProcessing}
              className="h-8 flex-1 gap-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              <XCircle className="h-4 w-4" />
              반려
            </Button>
            <Button
              onClick={() => handleProcess("approved")}
              disabled={isProcessing}
              className="h-8 flex-1 gap-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {isProcessing ? (
                <Loader2 className="h-4 w-4 animate-spin" />
              ) : (
                <CheckCircle className="h-4 w-4" />
              )}
              승인
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// ============================================================
// 메인 페이지
// ============================================================
export default function ApprovalBoxPage() {
  return (
    <div className="bg-background flex min-h-screen flex-col">
      <div className="space-y-6 p-6">
        <div className="space-y-2 border-b pb-4">
          <h1 className="text-3xl font-bold tracking-tight">결재함</h1>
          <p className="text-muted-foreground text-sm">
            내가 상신한 결재와 나에게 온 결재를 관리합니다.
          </p>
        </div>

        <Tabs defaultValue="received" className="space-y-4">
          <TabsList>
            <TabsTrigger value="received" className="gap-2">
              <Inbox className="h-4 w-4" />
              수신함 (결재 대기)
            </TabsTrigger>
            <TabsTrigger value="sent" className="gap-2">
              <Send className="h-4 w-4" />
              상신함 (내가 올린)
            </TabsTrigger>
          </TabsList>

          <TabsContent value="received">
            <ReceivedTab />
          </TabsContent>
          <TabsContent value="sent">
            <SentTab />
          </TabsContent>
        </Tabs>
      </div>

      <ScrollToTop />
    </div>
  );
}