'use client';

import { useRouter } from 'next/navigation';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { CreditCard, ArrowLeft, Edit, Trash2 } from 'lucide-react';
import type { Card as CardType } from './types';
import {
  CARD_STATUS_LABELS,
  CARD_STATUS_COLORS,
  getCardCompanyLabel,
} from './types';

interface CardDetailProps {
  card: CardType;
  onEdit: () => void;
  onDelete: () => void;
}

export function CardDetail({ card, onEdit, onDelete }: CardDetailProps) {
  const router = useRouter();

  const handleBack = () => {
    router.push('/ko/hr/card-management');
  };

  // 유효기간 포맷 (MMYY -> MM/YY)
  const formatExpiryDate = (date: string) => {
    if (date.length === 4) {
      return `${date.slice(0, 2)}/${date.slice(2)}`;
    }
    return date;
  };

  return (
    <PageLayout>
      <PageHeader
        title="카드 상세"
        description="카드 정보를 관리합니다"
        icon={CreditCard}
      />

      <div className="space-y-6">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="text-base">기본 정보</CardTitle>
            <Badge className={CARD_STATUS_COLORS[card.status]}>
              {CARD_STATUS_LABELS[card.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">{getCardCompanyLabel(card.cardCompany)}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">카드번호</dt>
                <dd className="text-sm mt-1 font-mono">{card.cardNumber}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">유효기간</dt>
                <dd className="text-sm mt-1">{formatExpiryDate(card.expiryDate)}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">카드 비밀번호 앞 2자리</dt>
                <dd className="text-sm mt-1">**</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">카드명</dt>
                <dd className="text-sm mt-1">{card.cardName}</dd>
              </div>
              <div>
                <dt className="text-sm font-medium text-muted-foreground">상태</dt>
                <dd className="text-sm mt-1">
                  <Badge className={CARD_STATUS_COLORS[card.status]}>
                    {CARD_STATUS_LABELS[card.status]}
                  </Badge>
                </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">
              <div className="md:col-span-2">
                <dt className="text-sm font-medium text-muted-foreground">부서 / 이름 / 직책</dt>
                <dd className="text-sm mt-1">
                  {card.user ? (
                    <span>
                      {card.user.departmentName} / {card.user.employeeName} / {card.user.positionName}
                    </span>
                  ) : (
                    <span className="text-muted-foreground">미지정</span>
                  )}
                </dd>
              </div>
            </dl>
          </CardContent>
        </Card>

        {/* 버튼 영역 */}
        <div className="flex items-center justify-between">
          <Button variant="outline" onClick={handleBack}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            목록으로
          </Button>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={onDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
              <Trash2 className="w-4 h-4 mr-2" />
              삭제
            </Button>
            <Button onClick={onEdit}>
              <Edit className="w-4 h-4 mr-2" />
              수정
            </Button>
          </div>
        </div>
      </div>
    </PageLayout>
  );
}