'use client';

import React from 'react';
import { FileText, Download, Eye, CheckCircle2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import type { Day1CheckItem, StandardDocument } from '../types';

interface Day1DocumentSectionProps {
  checkItem: Day1CheckItem | null;
  selectedDocumentId: string | null;
  onDocumentSelect: (documentId: string) => void;
  onConfirmComplete: () => void;
  isCompleted: boolean;
}

export function Day1DocumentSection({
  checkItem,
  selectedDocumentId,
  onDocumentSelect,
  onConfirmComplete,
  isCompleted,
}: Day1DocumentSectionProps) {
  if (!checkItem) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 h-full flex items-center justify-center">
        <div className="text-center text-gray-400 py-12">
          <FileText className="h-12 w-12 mx-auto mb-3 opacity-50" />
          <p className="text-sm">점검표 항목을 선택하세요</p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden h-full flex flex-col">
      {/* 헤더 */}
      <div className="bg-gray-100 px-2 sm:px-4 py-2 sm:py-3 border-b border-gray-200">
        <h3 className="font-semibold text-gray-900 text-sm sm:text-base">기준 문서화</h3>
      </div>

      {/* 콘텐츠 */}
      <div className="flex-1 overflow-y-auto p-3 sm:p-4 space-y-3 sm:space-y-4">
        {/* 항목 정보 */}
        <div className="bg-blue-50 rounded-lg p-3 sm:p-4">
          <h4 className="font-medium text-blue-900 mb-1 sm:mb-2 text-sm sm:text-base">{checkItem.title}</h4>
          <p className="text-xs sm:text-sm text-blue-700">{checkItem.description}</p>
        </div>

        {/* 기준 문서 목록 */}
        <div>
          <h5 className="text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">관련 기준 문서</h5>
          <div className="space-y-1.5 sm:space-y-2">
            {checkItem.standardDocuments.map((doc) => (
              <DocumentRow
                key={doc.id}
                document={doc}
                isSelected={selectedDocumentId === doc.id}
                onSelect={() => onDocumentSelect(doc.id)}
              />
            ))}
          </div>
        </div>

        {/* 확인 버튼 */}
        <div className="pt-3 sm:pt-4 border-t border-gray-200">
          <Button
            onClick={onConfirmComplete}
            disabled={isCompleted}
            className={cn(
              'w-full',
              isCompleted
                ? 'bg-green-500 hover:bg-green-500 cursor-default'
                : 'bg-blue-600 hover:bg-blue-700'
            )}
          >
            {isCompleted ? (
              <>
                <CheckCircle2 className="h-4 w-4 mr-2" />
                확인 완료
              </>
            ) : (
              <>
                {checkItem.buttonLabel}
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}

interface DocumentRowProps {
  document: StandardDocument;
  isSelected: boolean;
  onSelect: () => void;
}

function DocumentRow({ document, isSelected, onSelect }: DocumentRowProps) {
  return (
    <div
      className={cn(
        'flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border cursor-pointer transition-colors',
        isSelected
          ? 'bg-blue-50 border-blue-300'
          : 'bg-gray-50 border-gray-200 hover:bg-gray-100'
      )}
      onClick={onSelect}
    >
      {/* 아이콘 */}
      <div className={cn(
        'flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center',
        document.fileName?.endsWith('.pdf')
          ? 'bg-red-100 text-red-600'
          : 'bg-green-100 text-green-600'
      )}>
        <FileText className="h-4 w-4 sm:h-5 sm:w-5" />
      </div>

      {/* 문서 정보 */}
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-gray-900 truncate">{document.title}</p>
        <p className="text-xs text-gray-500">
          {document.version !== '-' && <span className="mr-2">{document.version}</span>}
          <span>{document.date}</span>
        </p>
      </div>

      {/* 액션 버튼 */}
      <div className="flex items-center gap-1">
        <button
          type="button"
          className="p-1.5 rounded hover:bg-gray-200 text-gray-500 hover:text-blue-600 transition-colors"
          title="미리보기"
          onClick={(e) => {
            e.stopPropagation();
            onSelect();
          }}
        >
          <Eye className="h-4 w-4" />
        </button>
        <button
          type="button"
          className="p-1.5 rounded hover:bg-gray-200 text-gray-500 hover:text-blue-600 transition-colors"
          title="다운로드"
          onClick={(e) => {
            e.stopPropagation();
            // TODO: 다운로드 기능
          }}
        >
          <Download className="h-4 w-4" />
        </button>
      </div>
    </div>
  );
}