/**
 * 견적 금액 요약 패널
 *
 * - 개소별 합계 (왼쪽) - 클릭하여 상세 확인
 * - 상세별 합계 (오른쪽) - 선택 개소의 카테고리별 금액 및 품목 상세
 * - 스크롤 가능한 상세 영역
 */

"use client";

import { useMemo } from "react";
import { Coins } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { formatNumber } from "@/lib/utils/amount";

import type { LocationItem } from "./QuoteRegistration";

// =============================================================================
// 목데이터 - 상세별 합계 (공정별 + 품목 상세)
// =============================================================================

interface DetailItem {
  name: string;
  quantity: number;
  unitPrice: number;
  totalPrice: number;
}

interface DetailCategory {
  label: string;
  count: number;
  amount: number;
  items: DetailItem[];
}

// Mock 데이터 제거 - bomResult 없으면 빈 배열 반환

// =============================================================================
// Props
// =============================================================================

interface QuoteSummaryPanelProps {
  locations: LocationItem[];
  selectedLocationId: string | null;
  onSelectLocation: (id: string) => void;
  /** 할인 적용 후 총 금액 (할인이 있을 때만 표시) */
  discountedTotalAmount?: number;
}

// =============================================================================
// 컴포넌트
// =============================================================================

export function QuoteSummaryPanel({
  locations,
  selectedLocationId,
  onSelectLocation,
  discountedTotalAmount,
}: QuoteSummaryPanelProps) {
  // ---------------------------------------------------------------------------
  // 계산된 값
  // ---------------------------------------------------------------------------

  // 선택된 개소
  const selectedLocation = useMemo(() => {
    return locations.find((loc) => loc.id === selectedLocationId) || null;
  }, [locations, selectedLocationId]);

  // 총 금액
  const totalAmount = useMemo(() => {
    return locations.reduce((sum, loc) => sum + (loc.totalPrice || 0), 0);
  }, [locations]);

  // 개소별 합계
  const locationTotals = useMemo(() => {
    return locations.map((loc) => ({
      id: loc.id,
      label: `${loc.floor} / ${loc.code}`,
      productCode: loc.productCode,
      quantity: loc.quantity,
      unitPrice: loc.unitPrice || 0,
      totalPrice: loc.totalPrice || 0,
    }));
  }, [locations]);

  // 선택 개소의 상세별 합계 (공정별)
  const detailTotals = useMemo((): DetailCategory[] => {
    // bomResult가 없으면 빈 배열 반환
    if (!selectedLocation?.bomResult?.subtotals) {
      return [];
    }

    const subtotals = selectedLocation.bomResult.subtotals;
    const groupedItems = selectedLocation.bomResult.grouped_items;
    const result: DetailCategory[] = [];

    Object.entries(subtotals).forEach(([key, value]) => {
      if (typeof value === "object" && value !== null) {
        // grouped_items에서 items 가져오기 (subtotals에는 items가 없을 수 있음)
        const groupItemsRaw = groupedItems?.[key]?.items || (value as Record<string, unknown>).items as Array<unknown> || [];
        // DetailItem 형식으로 변환
        const groupItems: DetailItem[] = (groupItemsRaw as Array<{
          item_name?: string;
          name?: string;
          quantity?: number;
          unit_price?: number;
          total_price?: number;
        }>).map((item) => ({
          name: item.item_name || item.name || "",
          quantity: item.quantity || 0,
          unitPrice: item.unit_price || 0,
          totalPrice: item.total_price || 0,
        }));
        const obj = value as { name?: string; count?: number; subtotal?: number };
        result.push({
          label: obj.name || key,
          count: obj.count || 0,
          amount: obj.subtotal || 0,
          items: groupItems,
        });
      } else if (typeof value === "number") {
        result.push({
          label: key,
          count: 0,
          amount: value,
          items: [],
        });
      }
    });

    return result;
  }, [selectedLocation]);

  // ---------------------------------------------------------------------------
  // 렌더링
  // ---------------------------------------------------------------------------

  return (
    <Card className="border-gray-200">
      <CardHeader className="pb-3">
        <CardTitle className="text-base font-semibold flex items-center gap-2">
          <Coins className="h-5 w-5" />
          견적 금액 요약
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {/* 좌우 분할 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
          {/* 왼쪽: 개소별 합계 */}
          <div className="p-4">
            <div className="flex items-center gap-2 mb-3">
              <span>📍</span>
              <h4 className="font-semibold text-gray-700">개소별 합계</h4>
            </div>

            {locations.length === 0 ? (
              <div className="text-center text-gray-500 py-6">
                <p className="text-sm">개소를 추가해주세요</p>
              </div>
            ) : (
              <div className="space-y-2">
                {locationTotals.map((loc) => (
                  <div
                    key={loc.id}
                    className={`flex items-center justify-between p-3 rounded-lg cursor-pointer transition-colors ${
                      selectedLocationId === loc.id
                        ? "bg-gray-100 border border-gray-300"
                        : "bg-gray-50 hover:bg-gray-100 border border-transparent"
                    }`}
                    onClick={() => onSelectLocation(loc.id)}
                  >
                    <div>
                      <p className="font-medium">{loc.label}</p>
                      <p className="text-xs text-gray-500">
                        {loc.productCode} × {loc.quantity}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-xs text-gray-500">상세소계</p>
                      <p className="font-bold text-gray-900">
                        {formatNumber(loc.totalPrice)}
                      </p>
                      {loc.unitPrice > 0 && (
                        <p className="text-xs text-gray-400">
                          수량 적용: {formatNumber(loc.unitPrice * loc.quantity)}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 오른쪽: 상세별 합계 */}
          <div className="p-4">
            <div className="flex items-center gap-2 mb-3">
              <span>✨</span>
              <h4 className="font-semibold text-gray-700">
                상세별 합계
                {selectedLocation && (
                  <span className="text-sm font-normal text-gray-500 ml-2">
                    ({selectedLocation.floor} / {selectedLocation.code})
                  </span>
                )}
              </h4>
            </div>

            {!selectedLocation ? (
              <div className="text-center text-gray-500 py-6">
                <p className="text-sm">개소를 선택해주세요</p>
              </div>
            ) : detailTotals.length === 0 ? (
              <div className="text-center text-gray-500 py-6">
                <p className="text-sm">견적 산출 후 상세 금액이 표시됩니다</p>
              </div>
            ) : (
              <div className="space-y-3">
                {detailTotals.map((category, index) => (
                  <div key={index} className="bg-gray-50 rounded-lg overflow-hidden border border-gray-200">
                    {/* 카테고리 헤더 */}
                    <div className="flex items-center justify-between px-3 py-2 bg-gray-100">
                      <span className="font-semibold text-gray-700">{category.label}</span>
                      <div className="flex items-center gap-2">
                        <span className="text-xs text-gray-500">({category.count}개)</span>
                        <span className="font-bold text-gray-900">
                          {formatNumber(category.amount)}
                        </span>
                      </div>
                    </div>
                    {/* 품목 상세 목록 */}
                    <div className="divide-y divide-gray-100">
                      {category.items.map((item, itemIndex) => (
                        <div key={itemIndex} className="flex items-center justify-between px-3 py-2 bg-white">
                          <div>
                            <span className="text-sm text-gray-700">{item.name}</span>
                            <p className="text-xs text-gray-400">
                              수량: {item.quantity} × 단가: {formatNumber(item.unitPrice)}
                            </p>
                          </div>
                          <span className="text-sm font-medium text-gray-900">
                            {formatNumber(item.totalPrice)}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* 하단 바: 총 개소 수, 예상 견적금액, 견적 상태 */}
        <div className="bg-gray-50 border-t px-4 py-4 md:px-6 md:py-5 flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-4 md:gap-10">
            <div>
              <p className="text-xs md:text-sm text-muted-foreground">총 개소 수</p>
              <p className="text-2xl md:text-4xl font-bold">{locations.length}</p>
            </div>
            <div>
              <p className="text-xs md:text-sm text-muted-foreground">예상 견적금액</p>
              <p className="text-2xl md:text-4xl font-bold">
                {formatNumber(totalAmount)}
                <span className="text-base md:text-xl font-normal text-muted-foreground ml-1">원</span>
              </p>
            </div>
            {discountedTotalAmount !== undefined && discountedTotalAmount !== totalAmount && (
              <div>
                <p className="text-xs md:text-sm text-muted-foreground">예상 전체 견적금액 <span className="text-blue-500">(할인 적용)</span></p>
                <p className="text-2xl md:text-4xl font-bold text-blue-600">
                  {formatNumber(discountedTotalAmount)}
                  <span className="text-base md:text-xl font-normal text-muted-foreground ml-1">원</span>
                </p>
              </div>
            )}
          </div>
          <div className="text-right">
            <p className="text-xs md:text-sm text-muted-foreground">견적 상태</p>
            <span className="inline-block bg-gray-200 text-gray-700 border border-gray-300 text-sm md:text-lg px-3 py-1 md:px-4 rounded">
              작성중
            </span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
