'use client';

import React from 'react';
import { Button } from '@/components/ui/button';
import { CurrencyInput } from '@/components/ui/currency-input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import type { PriceAdjustmentData } from '../types';
import { formatAmount } from '../utils';

interface PriceAdjustmentSectionProps {
  priceAdjustmentData: PriceAdjustmentData;
  isViewMode: boolean;
  onPriceChange: (key: keyof PriceAdjustmentData, value: number) => void;
  onSave: () => void;
  onApplyAll: () => void;
  onReset: () => void;
}

const PRICE_KEYS: (keyof PriceAdjustmentData)[] = [
  'caulking',
  'rail',
  'bottom',
  'boxReinforce',
  'shaft',
  'painting',
  'motor',
  'controller',
];

const PRICE_LABELS: Record<keyof PriceAdjustmentData, string> = {
  caulking: '코킹',
  rail: '레일',
  bottom: '하장',
  boxReinforce: '박스+보강',
  shaft: '샤프트',
  painting: '도장',
  motor: '모터',
  controller: '제어기',
};

export function PriceAdjustmentSection({
  priceAdjustmentData,
  isViewMode,
  onPriceChange,
  onSave,
  onApplyAll,
  onReset: _onReset,
}: PriceAdjustmentSectionProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-4">
        <CardTitle className="text-lg">품목 단가 조정</CardTitle>
        {!isViewMode && (
          <div className="flex gap-2">
            <Button
              type="button"
              variant="default"
              size="sm"
              className="bg-gray-900 hover:bg-gray-800"
              onClick={onSave}
            >
              저장
            </Button>
            <Button
              type="button"
              variant="default"
              size="sm"
              className="bg-blue-500 hover:bg-blue-600"
              onClick={onApplyAll}
            >
              전체 적용
            </Button>
            {/* 초기화 버튼 주석처리
            <Button type="button" variant="outline" size="sm" onClick={onReset}>
              초기화
            </Button>
            */}
          </div>
        )}
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <Table className="min-w-[1000px]">
            <TableHeader>
              <TableRow className="bg-gray-100">
                <TableHead className="w-[100px] text-center">단가</TableHead>
                {PRICE_KEYS.map((key) => (
                  <TableHead key={key} className="w-[100px] text-right">
                    {PRICE_LABELS[key]}
                  </TableHead>
                ))}
              </TableRow>
            </TableHeader>
            <TableBody>
              {/* 매입단가 행 */}
              <TableRow>
                <TableCell className="font-medium text-center bg-gray-50">매입단가</TableCell>
                {PRICE_KEYS.map((key) => (
                  <TableCell key={key} className="text-right">
                    {formatAmount(priceAdjustmentData[key].purchasePrice)}
                  </TableCell>
                ))}
              </TableRow>
              {/* 마진율 행 */}
              <TableRow>
                <TableCell className="font-medium text-center bg-gray-50">마진율(%)</TableCell>
                {PRICE_KEYS.map((key) => (
                  <TableCell key={key} className="text-right">
                    {priceAdjustmentData[key].marginRate.toFixed(1)}%
                  </TableCell>
                ))}
              </TableRow>
              {/* 판매단가 행 */}
              <TableRow>
                <TableCell className="font-medium text-center bg-gray-50">판매단가</TableCell>
                {PRICE_KEYS.map((key) => (
                  <TableCell key={key} className="text-right">
                    {formatAmount(priceAdjustmentData[key].sellingPrice)}
                  </TableCell>
                ))}
              </TableRow>
              {/* 조정단가 행 (입력 가능) */}
              <TableRow className="bg-orange-50">
                <TableCell className="font-medium text-center bg-orange-100">조정단가</TableCell>
                {PRICE_KEYS.map((key) => (
                  <TableCell key={key}>
                    <CurrencyInput
                      value={priceAdjustmentData[key].adjustedPrice}
                      onChange={(value) => onPriceChange(key, value ?? 0)}
                      disabled={isViewMode}
                      className={`text-right ${isViewMode ? 'bg-gray-50' : 'bg-white'}`}
                    />
                  </TableCell>
                ))}
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}