import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { 
  FileText, 
  ShoppingCart, 
  TrendingUp, 
  Target,
  Briefcase,
  DollarSign
} from "lucide-react";
import { PageLayout } from "./organisms/PageLayout";
import { PageHeader } from "./organisms/PageHeader";

export function SalesManagerDashboard() {
  // 견적 현황
  const quoteStats = {
    total: 45,
    pending: 12,
    approved: 28,
    rejected: 5,
  };

  // 수주 현황
  const orderStats = {
    total: 28,
    inProgress: 15,
    completed: 10,
    cancelled: 3,
  };

  // 월간 매출 목표
  const salesTarget = {
    target: 50000,
    current: 42500,
    percentage: 85,
  };

  // 최근 견적 요청 (판매 담당자 핵심 업무)
  const recentQuotes = [
    { id: 1, client: "ABC 건설", project: "오피스텔 A동", amount: "5,200만원", status: "승인대기", date: "2024-01-15" },
    { id: 2, client: "XYZ 산업", project: "공장 신축", amount: "3,800만원", status: "진행중", date: "2024-01-14" },
    { id: 3, client: "DEF 기업", project: "사무실 리모델링", amount: "2,100만원", status: "승인", date: "2024-01-13" },
    { id: 4, client: "GHI 건설", project: "아파트 B동", amount: "6,500만원", status: "검토중", date: "2024-01-12" },
  ];

  return (
    <PageLayout>
      <PageHeader 
        title="판매 담당자 대시보드"
        description="견적 및 수주 현황을 확인하세요"
        icon={Briefcase}
      />

      {/* 판매 주요 지표 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">총 견적</p>
                <p className="text-3xl font-bold mt-1">{quoteStats.total}</p>
                <div className="flex gap-2 mt-2">
                  <Badge variant="secondary" className="text-xs">대기 {quoteStats.pending}</Badge>
                  <Badge variant="default" className="text-xs bg-green-600">승인 {quoteStats.approved}</Badge>
                </div>
              </div>
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                <FileText className="w-6 h-6 text-blue-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">수주 건수</p>
                <p className="text-3xl font-bold mt-1">{orderStats.total}</p>
                <div className="flex gap-2 mt-2">
                  <Badge variant="secondary" className="text-xs">진행 {orderStats.inProgress}</Badge>
                  <Badge variant="default" className="text-xs bg-green-600">완료 {orderStats.completed}</Badge>
                </div>
              </div>
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                <ShoppingCart className="w-6 h-6 text-purple-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">월간 매출</p>
                <p className="text-3xl font-bold mt-1">{(salesTarget.current / 10000).toFixed(0)}백만</p>
                <div className="flex items-center gap-1 mt-2 text-sm text-green-600">
                  <TrendingUp className="w-4 h-4" />
                  <span>{salesTarget.percentage}% 달성</span>
                </div>
              </div>
              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                <DollarSign className="w-6 h-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">목표 달성률</p>
                <p className="text-3xl font-bold mt-1">{salesTarget.percentage}%</p>
                <div className="flex items-center gap-1 mt-2 text-sm text-blue-600">
                  <Target className="w-4 h-4" />
                  <span>목표 대비</span>
                </div>
              </div>
              <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
                <Target className="w-6 h-6 text-orange-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 월간 매출 목표 달성률 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Target className="w-5 h-5 text-green-600" />
            월간 매출 목표 달성률
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">목표 금액</p>
                <p className="text-2xl font-bold">{(salesTarget.target / 10000).toFixed(0)}백만원</p>
              </div>
              <div className="text-right">
                <p className="text-sm text-muted-foreground">현재 매출</p>
                <p className="text-2xl font-bold text-blue-600">{(salesTarget.current / 10000).toFixed(0)}백만원</p>
              </div>
              <div className="text-right">
                <p className="text-sm text-muted-foreground">달성률</p>
                <p className="text-3xl font-bold text-green-600">{salesTarget.percentage}%</p>
              </div>
            </div>
            <div className="w-full bg-gray-200 rounded-full h-4">
              <div 
                className="bg-gradient-to-r from-green-500 to-green-600 h-4 rounded-full transition-all duration-500 flex items-center justify-end pr-2"
                style={{ width: `${salesTarget.percentage}%` }}
              >
                <span className="text-xs text-white font-semibold">{salesTarget.percentage}%</span>
              </div>
            </div>
            <div className="flex items-center justify-between text-sm text-muted-foreground">
              <span>남은 금액: {((salesTarget.target - salesTarget.current) / 10000).toFixed(0)}백만원</span>
              <span>남은 기간: 15일</span>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 최근 견적 요청 (핵심 업무) */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="w-5 h-5 text-blue-600" />
            최근 견적 요청
            <Badge variant="destructive" className="ml-2">{quoteStats.pending}건 대기</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {recentQuotes.map((quote) => (
              <div key={quote.id} className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors">
                <div className="flex-1">
                  <p className="font-medium">{quote.client}</p>
                  <p className="text-sm text-muted-foreground">{quote.project}</p>
                  <div className="flex items-center gap-2 mt-1">
                    <Badge variant={
                      quote.status === "승인" ? "default" :
                      quote.status === "승인대기" ? "secondary" :
                      quote.status === "진행중" ? "outline" :
                      "secondary"
                    }>
                      {quote.status}
                    </Badge>
                    <span className="text-xs text-muted-foreground">{quote.date}</span>
                  </div>
                </div>
                <div className="text-right">
                  <p className="font-semibold text-blue-600">{quote.amount}</p>
                  <Button size="sm" variant="ghost" className="mt-1">
                    상세보기
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </PageLayout>
  );
}
