sam-react-prod/src/components/clients/ClientDetail.tsx

/**
 * 거래처 상세 보기 컴포넌트
 *
 * 스크린샷 기준 4개 섹션:
 * 1. 기본 정보
 * 2. 연락처 정보
 * 3. 결제 정보
 * 4. 악성채권 정보 (있는 경우 빨간 테두리)
 */

"use client";

import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import {
  Building2,
  Phone,
  CreditCard,
  AlertTriangle,
  ArrowLeft,
  Edit,
  Trash2,
  MapPin,
  Mail,
} from "lucide-react";
import { Client } from "../../hooks/useClientList";
import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { useMenuStore } from "@/stores/menuStore";
import { formatNumber } from "@/lib/utils/amount";

interface ClientDetailProps {
  client: Client;
  onBack: () => void;
  onEdit: () => void;
  onDelete: () => void;
}

// 상세 항목 표시 컴포넌트
function DetailItem({
  label,
  value,
  icon,
  valueClassName,
}: {
  label: string;
  value: React.ReactNode;
  icon?: React.ReactNode;
  valueClassName?: string;
}) {
  return (
    <div>
      <p className="text-xs text-muted-foreground mb-1">{label}</p>
      <div className={`flex items-center gap-2 ${valueClassName || ""}`}>
        {icon}
        <span className="font-medium">{value || "-"}</span>
      </div>
    </div>
  );
}

export function ClientDetail({
  client,
  onBack,
  onEdit,
  onDelete,
}: ClientDetailProps) {
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);

  // 금액 포맷
  const formatCurrency = (amount: string) => {
    if (!amount) return "-";
    return `₩${formatNumber(Number(amount))}`;
  };

  return (
    <PageLayout maxWidth="2xl">
      {/* 헤더 */}
      <PageHeader
        title={client.name}
        description="거래처 상세 정보"
        icon={Building2}
      />

      <div className="space-y-6 pb-24">
        {/* 1. 기본 정보 */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <Building2 className="h-5 w-5 text-primary" />
            <CardTitle>기본 정보</CardTitle>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <DetailItem label="CODE" value={client.code} />
            <DetailItem label="사업자번호" value={client.businessNo} />
            <DetailItem
              label="거래처 유형"
              value={
                <Badge
                  variant={
                    client.clientType === "매출"
                      ? "default"
                      : client.clientType === "매입"
                        ? "secondary"
                        : "outline"
                  }
                >
                  {client.clientType}
                </Badge>
              }
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <DetailItem label="거래처명" value={client.name} />
            <DetailItem label="대표자" value={client.representative} />
            <DetailItem
              label="상태"
              value={
                <Badge
                  variant={client.status === "활성" ? "default" : "secondary"}
                  className={
                    client.status === "활성"
                      ? "bg-green-100 text-green-800"
                      : ""
                  }
                >
                  {client.status}
                </Badge>
              }
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <DetailItem
              label="주소"
              value={client.address}
              icon={<MapPin className="h-4 w-4 text-muted-foreground" />}
            />
            <DetailItem label="업태" value={client.businessType} />
            <DetailItem label="종목" value={client.businessItem} />
          </div>

          {client.memo && (
            <DetailItem label="비고" value={client.memo} />
          )}
        </CardContent>
      </Card>

      {/* 2. 연락처 정보 */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <Phone className="h-5 w-5 text-primary" />
            <CardTitle>연락처 정보</CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <DetailItem
              label="전화"
              value={client.phone}
              icon={<Phone className="h-4 w-4 text-muted-foreground" />}
            />
            <DetailItem
              label="휴대전화"
              value={client.mobile}
              icon={<Phone className="h-4 w-4 text-muted-foreground" />}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <DetailItem label="팩스" value={client.fax} />
            <DetailItem
              label="이메일"
              value={client.email}
              icon={<Mail className="h-4 w-4 text-muted-foreground" />}
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <DetailItem label="담당자명" value={client.managerName} />
            <DetailItem label="담당자 연락처" value={client.managerTel} />
          </div>
        </CardContent>
      </Card>

      {/* 3. 결제 정보 */}
      <Card>
        <CardHeader>
          <div className="flex items-center gap-2">
            <CreditCard className="h-5 w-5 text-primary" />
            <CardTitle>결제 정보</CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <DetailItem label="매입 결제일" value={client.purchasePaymentDay} />
            <DetailItem label="매출 결제일" value={client.salesPaymentDay} />
          </div>
        </CardContent>
      </Card>

      {/* 4. 악성채권 정보 (있는 경우에만 표시) */}
      {client.badDebt && (
        <Card className="border-red-300 bg-red-50/30">
          <CardHeader>
            <div className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-red-500" />
              <CardTitle className="text-red-700">악성채권 정보</CardTitle>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <DetailItem
                label="악성채권 금액"
                value={formatCurrency(client.badDebtAmount)}
                valueClassName="text-red-600 font-bold"
              />
              <DetailItem label="수령일" value={client.badDebtReceiveDate} />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              <DetailItem label="종료일" value={client.badDebtEndDate} />
              <DetailItem label="진행 상태" value={client.badDebtProgress} />
            </div>
          </CardContent>
        </Card>
      )}
      </div>

      {/* 하단 액션 버튼 (sticky) */}
      <div className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}>
        <Button variant="outline" onClick={onBack} size="sm" className="md:size-default">
          <ArrowLeft className="h-4 w-4 md:mr-2" />
          <span className="hidden md:inline">목록으로</span>
        </Button>
        <div className="flex items-center gap-1 md:gap-2">
          <Button variant="outline" onClick={onDelete} size="sm" className="text-destructive hover:bg-destructive hover:text-destructive-foreground md:size-default">
            <Trash2 className="h-4 w-4 md:mr-2" />
            <span className="hidden md:inline">삭제</span>
          </Button>
          <Button onClick={onEdit} size="sm" className="md:size-default">
            <Edit className="h-4 w-4 md:mr-2" />
            <span className="hidden md:inline">수정</span>
          </Button>
        </div>
      </div>
    </PageLayout>
  );
}