'use client';

/**
 * 사원 상세 컴포넌트
 * IntegratedDetailTemplate 마이그레이션 완료 (2026-01-20)
 *
 * 특이사항:
 * - 기본정보, 인사정보, 사용자정보 카드
 * - 수정/삭제 버튼 표시
 */

import { useCallback } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
import { employeeConfig } from './employeeConfig';
import type { Employee } from './types';
import {
  EMPLOYEE_STATUS_LABELS,
  EMPLOYEE_STATUS_COLORS,
  EMPLOYMENT_TYPE_LABELS,
  GENDER_LABELS,
  USER_ROLE_LABELS,
  USER_ACCOUNT_STATUS_LABELS,
} from './types';
import { formatNumber } from '@/lib/utils/amount';

interface EmployeeDetailProps {
  employee: Employee;
  onEdit: () => void;
  onDelete: () => void;
}

export function EmployeeDetail({ employee, onEdit, onDelete }: EmployeeDetailProps) {
  // onDelete 핸들러 (Promise 반환)
  const handleFormDelete = useCallback(async () => {
    onDelete();
    return { success: true };
  }, [onDelete]);

  // 폼 콘텐츠 렌더링
  const renderFormContent = useCallback(() => (
    <div className="space-y-6">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-base">기본 정보</CardTitle>
            <Badge className={EMPLOYEE_STATUS_COLORS[employee.status]}>
              {EMPLOYEE_STATUS_LABELS[employee.status]}
            </Badge>
          </CardHeader>
          <CardContent>
            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <dt className="text-sm font-medium text-muted-foreground">이름</dt>
                <dd className="text-sm mt-1">{employee.name}</dd>
              </div>
              {employee.employeeCode && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">사원코드</dt>
                  <dd className="text-sm mt-1">{employee.employeeCode}</dd>
                </div>
              )}
              {employee.residentNumber && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">주민등록번호</dt>
                  <dd className="text-sm mt-1">{employee.residentNumber}</dd>
                </div>
              )}
              {employee.gender && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">성별</dt>
                  <dd className="text-sm mt-1">{GENDER_LABELS[employee.gender]}</dd>
                </div>
              )}
              {employee.phone && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">휴대폰</dt>
                  <dd className="text-sm mt-1">{employee.phone}</dd>
                </div>
              )}
              {employee.email && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">이메일</dt>
                  <dd className="text-sm mt-1">{employee.email}</dd>
                </div>
              )}
              {employee.salary && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">연봉</dt>
                  <dd className="text-sm mt-1">{formatNumber(employee.salary)}원</dd>
                </div>
              )}
              {employee.bankAccount && (
                <div className="md:col-span-2">
                  <dt className="text-sm font-medium text-muted-foreground">급여계좌</dt>
                  <dd className="text-sm mt-1">
                    {employee.bankAccount.bankName} {employee.bankAccount.accountNumber} ({employee.bankAccount.accountHolder})
                  </dd>
                </div>
              )}
              {employee.address && (
                <div className="md:col-span-2">
                  <dt className="text-sm font-medium text-muted-foreground">주소</dt>
                  <dd className="text-sm mt-1">
                    ({employee.address.zipCode}) {employee.address.address1} {employee.address.address2}
                  </dd>
                </div>
              )}
            </dl>
          </CardContent>
        </Card>

        {/* 인사 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">인사 정보</CardTitle>
          </CardHeader>
          <CardContent>
            <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {employee.hireDate && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">입사일</dt>
                  <dd className="text-sm mt-1">{new Date(employee.hireDate).toLocaleDateString('ko-KR')}</dd>
                </div>
              )}
              {employee.employmentType && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">고용형태</dt>
                  <dd className="text-sm mt-1">{EMPLOYMENT_TYPE_LABELS[employee.employmentType]}</dd>
                </div>
              )}
              {employee.rank && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">직급</dt>
                  <dd className="text-sm mt-1">{employee.rank}</dd>
                </div>
              )}
              {employee.departmentPositions.length > 0 && (
                <div className="md:col-span-2">
                  <dt className="text-sm font-medium text-muted-foreground">부서/직책</dt>
                  <dd className="text-sm mt-1">
                    <div className="space-y-1">
                      {employee.departmentPositions.map((dp) => (
                        <div key={dp.id} className="flex items-center gap-2">
                          <span>{dp.departmentName}</span>
                          <span className="text-muted-foreground">-</span>
                          <span>{dp.positionName}</span>
                        </div>
                      ))}
                    </div>
                  </dd>
                </div>
              )}
              {employee.clockInLocation && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">출근 위치</dt>
                  <dd className="text-sm mt-1">{employee.clockInLocation}</dd>
                </div>
              )}
              {employee.clockOutLocation && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">퇴근 위치</dt>
                  <dd className="text-sm mt-1">{employee.clockOutLocation}</dd>
                </div>
              )}
              {employee.concurrentPosition && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">겸서</dt>
                  <dd className="text-sm mt-1">{employee.concurrentPosition}</dd>
                </div>
              )}
              {employee.concurrentReason && (
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">겸직사유</dt>
                  <dd className="text-sm mt-1">{employee.concurrentReason}</dd>
                </div>
              )}
            </dl>
          </CardContent>
        </Card>

        {/* 사용자 정보 */}
        {employee.userInfo && (
          <Card>
            <CardHeader>
              <CardTitle className="text-base">사용자 정보</CardTitle>
            </CardHeader>
            <CardContent>
              <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">아이디</dt>
                  <dd className="text-sm mt-1">{employee.userInfo.userId}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">권한</dt>
                  <dd className="text-sm mt-1">{USER_ROLE_LABELS[employee.userInfo.role]}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">계정상태</dt>
                  <dd className="text-sm mt-1">{USER_ACCOUNT_STATUS_LABELS[employee.userInfo.accountStatus]}</dd>
                </div>
              </dl>
            </CardContent>
          </Card>
        )}

    </div>
  ), [employee]);

  return (
    <IntegratedDetailTemplate
      config={employeeConfig}
      mode="view"
      initialData={employee as unknown as Record<string, unknown>}
      itemId={employee.id}
      onEdit={onEdit}
      onDelete={handleFormDelete}
      renderView={() => renderFormContent()}
      renderForm={() => renderFormContent()}
    />
  );
}