'use client';

import { useState, useCallback } from 'react';
import { PageLayout } from '@/components/organisms/PageLayout';
import { EditableTable, EditableColumn } from '@/components/common/EditableTable';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { formatNumber } from '@/lib/utils/amount';

// 샘플 데이터 타입
interface ProductItem {
  id: string;
  name: string;
  quantity: number;
  unitPrice: number;
  unit: string;
  note: string;
}

// 품목 마스터 단가 타입
interface ProductMaster {
  name: string;
  unitPrice: number;
}

// 유니크 ID 생성
let idCounter = 0;
const generateId = () => `item-${++idCounter}`;

export default function EditableTableSamplePage() {
  // 품목별 마스터 단가
  const [masterPrices, setMasterPrices] = useState<ProductMaster[]>([
    { name: '샘플 품목 A', unitPrice: 5000 },
    { name: '샘플 품목 B', unitPrice: 12000 },
    { name: '샘플 품목 C', unitPrice: 8000 },
  ]);

  // 샘플 데이터
  const [products, setProducts] = useState<ProductItem[]>([
    { id: generateId(), name: '샘플 품목 A', quantity: 10, unitPrice: 5000, unit: 'EA', note: '' },
    { id: generateId(), name: '샘플 품목 B', quantity: 5, unitPrice: 12000, unit: 'BOX', note: '특이사항 있음' },
  ]);

  // 마스터 단가 변경 시 품목 목록도 업데이트
  const handleMasterPriceChange = useCallback((index: number, newPrice: number) => {
    const targetName = masterPrices[index].name;

    // 마스터 단가 업데이트
    setMasterPrices(prev => {
      const updated = [...prev];
      updated[index] = { ...updated[index], unitPrice: newPrice };
      return updated;
    });

    // 품목 목록에서 해당 품목의 단가도 일괄 업데이트
    setProducts(prev =>
      prev.map(product =>
        product.name === targetName
          ? { ...product, unitPrice: newPrice }
          : product
      )
    );
  }, [masterPrices]);

  // 컬럼 정의
  const columns: EditableColumn<ProductItem>[] = [
    {
      key: 'name',
      header: '품목명',
      type: 'text',
      placeholder: '품목명 입력',
      width: '200px',
    },
    {
      key: 'quantity',
      header: '수량',
      type: 'number',
      placeholder: '0',
      width: '100px',
      align: 'right',
    },
    {
      key: 'unit',
      header: '단위',
      type: 'select',
      width: '100px',
      options: [
        { label: 'EA', value: 'EA' },
        { label: 'BOX', value: 'BOX' },
        { label: 'SET', value: 'SET' },
        { label: 'KG', value: 'KG' },
        { label: 'M', value: 'M' },
      ],
    },
    {
      key: 'unitPrice',
      header: '단가',
      type: 'number',
      placeholder: '0',
      width: '120px',
      align: 'right',
    },
    {
      key: 'note',
      header: '비고',
      type: 'text',
      placeholder: '비고 입력',
    },
  ];

  // 새 행 생성 함수
  const createNewProduct = (): ProductItem => ({
    id: generateId(),
    name: '',
    quantity: 0,
    unitPrice: 0,
    unit: 'EA',
    note: '',
  });

  // 합계 계산
  const totalAmount = products.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0);

  return (
    <PageLayout>
      <div className="space-y-6">
        {/* 사용법 안내 */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">사용법</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-muted-foreground">
            <p>• <Badge variant="outline">+ 행 추가</Badge> 버튼을 클릭하여 새 행을 추가할 수 있습니다.</p>
            <p>• 각 행의 <Badge variant="outline" className="text-destructive">🗑</Badge> 버튼을 클릭하여 행을 삭제할 수 있습니다.</p>
            <p>• 셀을 클릭하여 직접 값을 수정할 수 있습니다.</p>
            <p>• <Badge variant="secondary">품목별 단가</Badge>에서 단가를 수정하면 아래 품목 목록의 단가가 일괄 변경됩니다.</p>
          </CardContent>
        </Card>

        {/* 품목별 마스터 단가 */}
        <Card>
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-base">품목별 단가</CardTitle>
              <span className="text-sm text-muted-foreground">
                단가 수정 시 아래 품목 목록에 자동 반영
              </span>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[60px] text-center">번호</TableHead>
                    <TableHead>품목명</TableHead>
                    <TableHead className="w-[150px] text-right">단가</TableHead>
                    <TableHead className="w-[100px] text-center">적용 건수</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {masterPrices.map((master, index) => {
                    // 해당 품목이 품목 목록에 몇 건 있는지 계산
                    const appliedCount = products.filter(p => p.name === master.name).length;
                    return (
                      <TableRow key={master.name}>
                        <TableCell className="text-center text-muted-foreground">
                          {index + 1}
                        </TableCell>
                        <TableCell className="font-medium">{master.name}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex items-center justify-end gap-2">
                            <Input
                              type="number"
                              value={master.unitPrice}
                              onChange={(e) => handleMasterPriceChange(index, Number(e.target.value))}
                              className="w-28 h-8 text-right"
                            />
                            <span className="text-muted-foreground text-sm">원</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-center">
                          {appliedCount > 0 ? (
                            <Badge variant="secondary">{appliedCount}건</Badge>
                          ) : (
                            <span className="text-muted-foreground text-sm">-</span>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

        {/* 편집 테이블 */}
        <EditableTable
          title="품목 목록"
          columns={columns}
          data={products}
          onChange={setProducts}
          createNewRow={createNewProduct}
          addButtonLabel="품목 추가"
          emptyMessage="품목이 없습니다. 품목을 추가해주세요."
          showRowNumber={true}
          maxRows={20}
          minRows={0}
          striped={true}
          bulkAdd={true}
          bulkAddLabel="품목 추가"
        />

        {/* 합계 표시 */}
        <Card>
          <CardContent className="py-4">
            <div className="flex justify-between items-center">
              <span className="font-medium">총 합계</span>
              <span className="text-xl font-bold text-primary">
                {formatNumber(totalAmount)}원
              </span>
            </div>
          </CardContent>
        </Card>

        {/* 현재 데이터 확인 (디버깅용) */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">현재 데이터 (JSON)</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="bg-muted p-4 rounded-md text-xs overflow-auto max-h-60">
              {JSON.stringify(products, null, 2)}
            </pre>
          </CardContent>
        </Card>
      </div>
    </PageLayout>
  );
}