"use client";

/**
 * OrderFormViewDialog — 주문서 자동생성 뷰 (wace orderFormView.jsp 대응)
 *
 * 주문관리 그리드 "주문서" 폴더 컬럼 클릭 시 표시.
 * 한국 표준 주문서 양식 (공급받는자/공급자/품목/합계).
 */

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Printer } from "lucide-react";
import { salesOrderMgmtApi } from "@/lib/api/salesOrderMgmt";
import { toast } from "sonner";

// 공급자(우리 회사) 정보 — wace 원본 하드코딩값. 추후 회사 마스터 테이블로 이전.
const SUPPLIER = {
  busRegNo: "314-81-75146",
  name: "주식회사알피에스본사",
  ceo: "이동헌",
  address: "대전광역시 유성구 국제과학10로 8(둔곡동)",
  busType: "제조업",
  busItem: "금속절삭가공기계,반도체제조용기계",
};

interface OrderFormInfo {
  objid: string;
  contract_no: string;
  po_no: string;
  order_date: string;
  client_nm?: string;
  client_bus_reg_no?: string;
  client_ceo_nm?: string;
  client_addr?: string;
  client_bus_type?: string;
  client_bus_item?: string;
  client_tel_no?: string;
  client_fax_no?: string;
  client_email?: string;
  writer_name?: string;
  writer_contact?: string;
  order_supply_price?: string | number;
  order_vat?: string | number;
  order_total_amount?: string | number;
  vat_note?: string;
  reg_datetime?: string;
}

interface OrderFormItem {
  seq: number;
  part_no?: string;
  part_name?: string;
  spec?: string;
  unit_name?: string;
  due_date?: string;
  order_quantity?: string | number;
  order_unit_price?: string | number;
  order_supply_price?: string | number;
  order_vat?: string | number;
  order_total_amount?: string | number;
}

export interface OrderFormViewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  objid: string | null | undefined;
}

export function OrderFormViewDialog({ open, onOpenChange, objid }: OrderFormViewDialogProps) {
  const [info, setInfo] = useState<OrderFormInfo | null>(null);
  const [items, setItems] = useState<OrderFormItem[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!open || !objid) {
      setInfo(null);
      setItems([]);
      return;
    }
    setLoading(true);
    salesOrderMgmtApi
      .formView(String(objid))
      .then((data) => {
        setInfo(data.info);
        setItems(data.items ?? []);
      })
      .catch((e: any) => {
        toast.error("주문서 데이터 조회 실패: " + (e?.message ?? ""));
        setInfo(null);
        setItems([]);
      })
      .finally(() => setLoading(false));
  }, [open, objid]);

  const orderDateText = formatOrderDate(info?.order_date);
  const totalQty = items.reduce((acc, it) => acc + toNum(it.order_quantity), 0);
  const totalSupply = items.reduce((acc, it) => acc + toNum(it.order_supply_price), 0);

  function handlePrint() {
    const node = document.getElementById("order-form-print-area");
    if (!node) return;
    const w = window.open("", "_blank", "width=950,height=800");
    if (!w) return;
    w.document.write(`
      <html><head><title>주문서</title>
      <style>
        body{font-family:'맑은 고딕',sans-serif;margin:18px;color:#000;font-size:12px;}
        .order-title{text-align:center;font-size:24px;font-weight:bold;letter-spacing:18px;margin:8px 0 14px;}
        .header-row{font-size:11px;margin-bottom:2px;}
        table{border-collapse:collapse;width:100%;}
        td,th{border:1px solid #000;padding:3px 5px;}
        .lbl{background:#f3f3f3;text-align:center;font-weight:bold;}
        .vl{background:#e8e8e8;text-align:center;font-weight:bold;font-size:13px;}
        .tc{text-align:center;}
        .tr{text-align:right;}
        .item-tbl thead th{background:#fff8c5;font-weight:bold;text-align:center;}
        .total-row td{background:#ffffcc;font-weight:bold;text-align:center;letter-spacing:8px;}
      </style></head><body>${node.innerHTML}</body></html>
    `);
    w.document.close();
    w.focus();
    setTimeout(() => { w.print(); }, 250);
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>주문서 — {info?.contract_no ?? ""}</DialogTitle>
        </DialogHeader>

        {loading && (
          <div className="text-center text-muted-foreground py-10">로딩 중…</div>
        )}

        {!loading && !info && (
          <div className="text-center text-muted-foreground py-10">주문서 데이터가 없습니다.</div>
        )}

        {!loading && info && (
          <div id="order-form-print-area" className="text-[11px] text-black bg-white p-3">
            <div className="text-center text-2xl font-bold tracking-[18px] my-2">주 문 서</div>
            <div className="text-[11px] mb-0.5">주문일자 : {orderDateText}</div>
            <div className="text-[11px] mb-1">증빙번호 : {info.po_no ?? ""}</div>

            {/* 공급받는자 / 공급자 */}
            <table className="w-full border-collapse text-[11px] mt-1">
              <colgroup>
                <col style={{ width: "28px" }} />
                <col style={{ width: "62px" }} />
                <col />
                <col style={{ width: "45px" }} />
                <col style={{ width: "70px" }} />
                <col style={{ width: "28px" }} />
                <col style={{ width: "62px" }} />
                <col />
                <col style={{ width: "45px" }} />
                <col style={{ width: "90px" }} />
              </colgroup>
              <tbody>
                <tr>
                  <td rowSpan={4} className="vl border border-black bg-gray-200 text-center font-bold" style={{ writingMode: "vertical-rl" as any }}>공급받는자</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">등록번호</td>
                  <td colSpan={3} className="border border-black px-1.5">{info.client_bus_reg_no ?? ""}</td>
                  <td rowSpan={4} className="vl border border-black bg-gray-200 text-center font-bold" style={{ writingMode: "vertical-rl" as any }}>공 급 자</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">등록번호</td>
                  <td colSpan={3} className="border border-black px-1.5">{SUPPLIER.busRegNo}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">상 호</td>
                  <td className="border border-black px-1.5">{info.client_nm ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">성명</td>
                  <td className="border border-black px-1.5">{info.client_ceo_nm ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">상 호</td>
                  <td className="border border-black px-1.5">{SUPPLIER.name}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">성명</td>
                  <td className="border border-black px-1.5">{SUPPLIER.ceo}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">주 소</td>
                  <td colSpan={3} className="border border-black px-1.5">{info.client_addr ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">주 소</td>
                  <td colSpan={3} className="border border-black px-1.5">{SUPPLIER.address}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">업 태</td>
                  <td className="border border-black px-1.5">{info.client_bus_type ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">종목</td>
                  <td className="border border-black px-1.5">{info.client_bus_item ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">업 태</td>
                  <td className="border border-black px-1.5">{SUPPLIER.busType}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">종목</td>
                  <td className="border border-black px-1.5 text-[9px]">{SUPPLIER.busItem}</td>
                </tr>
              </tbody>
            </table>

            {/* 납품처 / 담당자 */}
            <table className="w-full border-collapse text-[11px] -mt-px">
              <colgroup>
                <col style={{ width: "70px" }} />
                <col />
                <col style={{ width: "70px" }} />
                <col style={{ width: "130px" }} />
                <col style={{ width: "70px" }} />
                <col style={{ width: "130px" }} />
              </colgroup>
              <tbody>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">납 품 처</td>
                  <td className="border border-black px-1.5">{info.client_nm ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">전화번호</td>
                  <td className="border border-black px-1.5">{info.client_tel_no ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">팩스번호</td>
                  <td className="border border-black px-1.5">{info.client_fax_no ?? ""}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">주 소</td>
                  <td className="border border-black px-1.5">{info.client_addr ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">담 당 자</td>
                  <td className="border border-black px-1.5">{info.writer_name ?? ""}</td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold">C.P.번호</td>
                  <td className="border border-black px-1.5">{info.writer_contact ?? ""}</td>
                </tr>
              </tbody>
            </table>

            {/* 품목 테이블 */}
            <table className="item-tbl w-full border-collapse text-[11px] -mt-px">
              <colgroup>
                <col style={{ width: "32px" }} />
                <col style={{ width: "85px" }} />
                <col />
                <col />
                <col style={{ width: "38px" }} />
                <col style={{ width: "78px" }} />
                <col style={{ width: "48px" }} />
                <col style={{ width: "68px" }} />
                <col style={{ width: "78px" }} />
              </colgroup>
              <thead>
                <tr>
                  {["No.", "품번", "품명", "규격", "단위", "납기일", "수량", "단가", "금액"].map((h) => (
                    <th key={h} className="border border-black bg-yellow-50 font-bold text-center px-1.5 py-1">{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {items.length === 0 && (
                  <tr><td colSpan={9} className="border border-black text-center py-3 text-muted-foreground">라인 없음</td></tr>
                )}
                {items.map((it, i) => (
                  <tr key={i}>
                    <td className="border border-black tc text-center px-1">{i + 1}</td>
                    <td className="border border-black tc text-center px-1">{it.part_no ?? ""}</td>
                    <td className="border border-black px-1.5">{it.part_name ?? ""}</td>
                    <td className="border border-black px-1.5">{it.spec ?? ""}</td>
                    <td className="border border-black tc text-center px-1">{it.unit_name ?? ""}</td>
                    <td className="border border-black tc text-center px-1">{it.due_date ?? ""}</td>
                    <td className="border border-black tr text-right px-1.5">{fmt(it.order_quantity)}</td>
                    <td className="border border-black tr text-right px-1.5">{fmt(it.order_unit_price)}</td>
                    <td className="border border-black tr text-right px-1.5">{fmt(it.order_supply_price)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr className="total-row">
                  <td colSpan={9} className="border border-black bg-yellow-100 text-center font-bold tracking-[8px] py-1">합 계</td>
                </tr>
                <tr>
                  <td colSpan={6} className="border border-black tc"></td>
                  <td className="border border-black tr text-right px-1.5 font-bold">{fmt(totalQty)}</td>
                  <td className="border border-black tr"></td>
                  <td className="border border-black tr text-right px-1.5 font-bold">{fmt(totalSupply)}</td>
                </tr>
              </tfoot>
            </table>

            {/* 비고 / 합계 요약 */}
            <table className="w-full border-collapse text-[11px] -mt-px">
              <colgroup>
                <col style={{ width: "40px" }} />
                <col />
                <col style={{ width: "120px" }} />
                <col style={{ width: "150px" }} />
              </colgroup>
              <tbody>
                <tr>
                  <td rowSpan={3} className="vl border border-black bg-gray-200 text-center font-bold tracking-[8px] text-[13px]" style={{ writingMode: "vertical-rl" as any }}>비 고</td>
                  <td rowSpan={3} className="border border-black"></td>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold tracking-[2px]">공 급 가 액 합 계</td>
                  <td className="border border-black tr text-right px-1.5">{fmt(info.order_supply_price)}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold tracking-[2px]">부 가 가 치 세</td>
                  <td className="border border-black tr text-right px-1.5">{fmt(info.order_vat)}</td>
                </tr>
                <tr>
                  <td className="lbl border border-black bg-gray-100 text-center font-bold tracking-[5px]">총 계</td>
                  <td className="border border-black tr text-right px-1.5 font-bold">{fmt(info.order_total_amount)}</td>
                </tr>
              </tbody>
            </table>

            <div className="flex justify-between border border-black border-t-0 px-1.5 py-1 text-[11px]">
              <span>{info.vat_note ?? ""}</span>
              <span></span>
            </div>
          </div>
        )}

        <DialogFooter className="flex sm:justify-between gap-2 print:hidden">
          <Button variant="outline" size="sm" onClick={handlePrint} disabled={!info}>
            <Printer className="h-4 w-4 mr-1" /> 인쇄
          </Button>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>닫기</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

function toNum(v: any): number {
  if (v == null || v === "") return 0;
  const n = Number(String(v).replace(/,/g, ""));
  return isNaN(n) ? 0 : n;
}

function fmt(v: any): string {
  const n = toNum(v);
  if (n === 0) return "";
  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function formatOrderDate(s?: string): string {
  if (!s) return "";
  const m = String(s).match(/^(\d{4})-(\d{2})-(\d{2})/);
  if (!m) return s;
  return `${m[1]}년 ${m[2]}월 ${m[3]}일`;
}
