import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { 
  TrendingUp, 
  TrendingDown, 
  DollarSign, 
  FileText,
  CheckCircle,
  Calculator,
  Calendar,
  ArrowUpRight,
  ArrowDownRight
} from "lucide-react";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";

export function AccountantDashboard() {
  // 승인 대기 데이터 (회계 담당자 핵심 업무)
  const pendingApprovals = [
    { id: 1, type: "할인율", content: "ABC 건설 - 15% 할인 요청", amount: "2,500만원", requestedBy: "김판매", date: "2024-01-15" },
    { id: 2, type: "할인율", content: "XYZ 산업 - 12% 할인 요청", amount: "1,800만원", requestedBy: "이영업", date: "2024-01-14" },
    { id: 3, type: "수주", content: "DEF 건설 - 프로젝트 A 수주 승인", amount: "5,200만원", requestedBy: "박판매", date: "2024-01-13" },
  ];

  // 재무 통계 (회계 핵심 지표)
  const financialStats = [
    { label: "이번달 매출", value: "2억 3,500만원", change: "+15%", trend: "up", icon: TrendingUp },
    { label: "이번달 매입", value: "1억 4,200만원", change: "+8%", trend: "up", icon: TrendingDown },
    { label: "미수금", value: "4,800만원", change: "-5%", trend: "down", icon: DollarSign },
    { label: "미지급금", value: "2,100만원", change: "-12%", trend: "down", icon: FileText },
  ];

  return (
    <PageLayout>
      <PageHeader 
        title="회계 담당자 대시보드"
        description="승인 대기 항목 및 재무 현황을 확인하세요"
        icon={Calculator}
      />

      {/* 재무 통계 카드 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {financialStats.map((stat, index) => (
          <Card key={index}>
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-muted-foreground">{stat.label}</p>
                  <p className="text-2xl font-bold mt-1">{stat.value}</p>
                  <div className={`flex items-center gap-1 mt-2 text-sm ${
                    stat.trend === 'up' ? 'text-red-600' : 'text-green-600'
                  }`}>
                    {stat.trend === 'up' ? <ArrowUpRight className="w-4 h-4" /> : <ArrowDownRight className="w-4 h-4" />}
                    <span>{stat.change}</span>
                  </div>
                </div>
                <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
                  index === 0 ? 'bg-blue-100' :
                  index === 1 ? 'bg-orange-100' :
                  index === 2 ? 'bg-purple-100' :
                  'bg-green-100'
                }`}>
                  <stat.icon className={`w-6 h-6 ${
                    index === 0 ? 'text-blue-600' :
                    index === 1 ? 'text-orange-600' :
                    index === 2 ? 'text-purple-600' :
                    'text-green-600'
                  }`} />
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 승인 대기 목록 (회계담당자 주요 업무) */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <CheckCircle className="w-5 h-5 text-orange-600" />
            할인율 및 수주 승인 대기
            <Badge variant="destructive" className="ml-2">{pendingApprovals.length}건</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {pendingApprovals.map((item) => (
              <div key={item.id} className="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors">
                <div className="flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <Badge variant={item.type === "할인율" ? "secondary" : "default"}>
                      {item.type}
                    </Badge>
                    <span className="font-medium">{item.content}</span>
                  </div>
                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
                    <span className="flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      {item.date}
                    </span>
                    <span>요청자: {item.requestedBy}</span>
                    <span className="text-blue-600 font-semibold">{item.amount}</span>
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button size="sm" variant="outline" className="text-red-600 hover:text-red-700">
                    거부
                  </Button>
                  <Button size="sm" className="bg-green-600 hover:bg-green-700">
                    승인
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </PageLayout>
  );
}
