'use client';

import React from 'react';
import { Input } from '@/components/ui/input';
import { DatePicker } from '@/components/ui/date-picker';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { QuantityInput } from '@/components/ui/quantity-input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { FileDropzone } from '@/components/ui/file-dropzone';
import { FileList, type ExistingFile } from '@/components/ui/file-list';
import type { EstimateDetailFormData, EstimateStatus } from '../types';
import { STATUS_STYLES, STATUS_LABELS, VAT_TYPE_OPTIONS, ESTIMATE_STATUS_OPTIONS } from '../types';
import { formatAmount } from '../utils';

interface EstimateInfoSectionProps {
  formData: EstimateDetailFormData;
  isViewMode: boolean;
  onFormDataChange: (updates: Partial<EstimateDetailFormData>) => void;
  onBidInfoChange: (field: string, value: string | number) => void;
  onFilesSelect: (files: File[]) => void;
  onDocumentRemove: (docId: string | number) => void;
}

export function EstimateInfoSection({
  formData,
  isViewMode,
  onFormDataChange,
  onBidInfoChange,
  onFilesSelect,
  onDocumentRemove,
}: EstimateInfoSectionProps) {
  return (
    <>
      {/* 견적 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">견적 정보</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 1행: 견적번호, 견적자 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">견적번호</Label>
              <Input value={formData.estimateCode} disabled className="bg-gray-50" />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">견적자</Label>
              <Input value={formData.estimatorName} disabled className="bg-gray-50" />
            </div>
          </div>
          {/* 2행: 견적 회사 담당자, 견적 회사 담당자 연락처 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">견적 회사 담당자</Label>
              <Input value={formData.estimateCompanyManager} disabled className="bg-gray-50" />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">견적 회사 담당자 연락처</Label>
              <Input value={formData.estimateCompanyManagerContact} disabled className="bg-gray-50" />
            </div>
          </div>
          {/* 3행: 견적금액, 상태, 완료일자 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">견적금액</Label>
              <Input
                value={formatAmount(formData.estimateAmount)}
                disabled
                className="bg-gray-50 text-right"
              />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">상태</Label>
              {isViewMode ? (
                <div className="flex items-center h-10 px-3 border rounded-md bg-gray-50">
                  <span className={STATUS_STYLES[formData.status]}>
                    {STATUS_LABELS[formData.status]}
                  </span>
                </div>
              ) : (
                <Select
                  value={formData.status}
                  onValueChange={(val) => onFormDataChange({ status: val as EstimateStatus })}
                >
                  <SelectTrigger className="bg-white">
                    <SelectValue placeholder="상태 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {ESTIMATE_STATUS_OPTIONS.filter((opt) => opt.value !== 'all').map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        <span className={STATUS_STYLES[option.value as EstimateStatus]}>
                          {option.label}
                        </span>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              )}
            </div>
            {/* 완료일자: 견적완료 상태일 때만 표시 */}
            {formData.status === 'completed' && formData.completedDate && (
              <div className="space-y-2">
                <Label className="text-sm font-medium text-gray-700">견적완료일</Label>
                <Input
                  value={formData.completedDate}
                  disabled
                  className="bg-gray-50"
                />
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 현장설명회 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">현장설명회 정보</CardTitle>
        </CardHeader>
        <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">현설번호</Label>
            <Input value={formData.siteBriefing.briefingCode} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">거래처명</Label>
            <Input value={formData.siteBriefing.partnerName} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">현장설명회 일자</Label>
            <Input value={formData.siteBriefing.briefingDate} disabled className="bg-gray-50" />
          </div>
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">참석자</Label>
            <Input value={formData.siteBriefing.attendee} disabled className="bg-gray-50" />
          </div>
        </CardContent>
      </Card>

      {/* 입찰 정보 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-lg">입찰 정보</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">현장명</Label>
              <Input
                value={formData.bidInfo.projectName}
                onChange={(e) => onBidInfoChange('projectName', e.target.value)}
                disabled={isViewMode}
                className={isViewMode ? 'bg-gray-50' : 'bg-white'}
              />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">입찰일자</Label>
              <DatePicker
                value={formData.bidInfo.bidDate}
                onChange={(date) => onBidInfoChange('bidDate', date)}
                disabled={isViewMode}
              />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">개소</Label>
              <QuantityInput
                value={formData.bidInfo.siteCount}
                onChange={(value) => onBidInfoChange('siteCount', value ?? 0)}
                disabled={isViewMode}
                className={isViewMode ? 'bg-gray-50' : 'bg-white'}
              />
            </div>
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">공사기간</Label>
              <div className="flex items-center gap-2">
                <DatePicker
                  value={formData.bidInfo.constructionStartDate}
                  onChange={(date) => onBidInfoChange('constructionStartDate', date)}
                  disabled={isViewMode}
                />
                <span className="text-muted-foreground">~</span>
                <DatePicker
                  value={formData.bidInfo.constructionEndDate}
                  onChange={(date) => onBidInfoChange('constructionEndDate', date)}
                  disabled={isViewMode}
                />
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label className="text-sm font-medium text-gray-700">부가세</Label>
              <Select
                value={formData.bidInfo.vatType}
                onValueChange={(val) => onBidInfoChange('vatType', val)}
                disabled={isViewMode}
              >
                <SelectTrigger className={isViewMode ? 'bg-gray-50' : 'bg-white'}>
                  <SelectValue placeholder="선택" />
                </SelectTrigger>
                <SelectContent>
                  {VAT_TYPE_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* 업무 보고 */}
          <div className="space-y-2">
            <Label className="text-sm font-medium text-gray-700">업무 보고</Label>
            <Textarea
              value={formData.bidInfo.workReport}
              onChange={(e) => onBidInfoChange('workReport', e.target.value)}
              placeholder="업무 보고 내용"
              disabled={isViewMode}
              className={isViewMode ? 'bg-gray-50' : 'bg-white'}
              rows={3}
            />
          </div>

          {/* 현장설명회 자료 */}
          <div className="space-y-4">
            <Label className="text-sm font-medium text-gray-700">현장설명회 자료</Label>
            {!isViewMode && (
              <FileDropzone
                onFilesSelect={onFilesSelect}
                multiple
                maxSize={10}
                title="클릭하여 파일을 찾거나, 마우스로 파일을 끌어오세요."
              />
            )}
            <FileList
              files={[]}
              existingFiles={formData.bidInfo.documents.map((doc): ExistingFile => ({
                id: doc.id,
                name: doc.fileName,
                size: doc.fileSize,
                url: doc.fileUrl,
              }))}
              onRemoveExisting={onDocumentRemove}
              showRemove={!isViewMode}
              emptyMessage="업로드된 파일이 없습니다"
            />
          </div>
        </CardContent>
      </Card>
    </>
  );
}