"use client"
import PageBreadcrumb from "@/components/common/PageBreadCrumb2";
import ComponentCard from '@/components/common/ComponentCard2';
import CtTable1 from '@/components/tables/CtTable1';
import Button from '@/components/ui/button/Button2';
import { DocsIcon, PlusIcon } from "@/icons";
import WithLabel from '@/components/form/WithLabel';
import Input from '@/components/form/input/InputField2';
import DatePicker from '@/components/form/date-picker2';
import CtModal from "@/components/CtModal";
import Label from '@/components/form/Label2';
import Select from '@/components/form/Select2';

import React from "react";
import { useState } from 'react';
import { useRouter } from "next/navigation";


const SEARCH_LABEL_WIDTH = 24;
const COUNT_PER_PAGE = 10;
const PAGE_NUM_COUNT = 5;

const FAQ_CATEGORY_OPTIONS = [
  { label: "이용안내", value: "이용안내" },
  { label: "결제", value: "결제" },
  { label: "기기", value: "기기" },
  { label: "계정", value: "계정" },
  { label: "기타", value: "기타" },
];

// 가짜 FAQ 목록 데이터
const MOCK_FAQ_LIST = [
  {
    faq_id: 1,
    reg_time: "2026-01-15 10:30:00",
    category: "이용안내",
    title: "서비스 이용 방법이 궁금해요.",
    content: "서비스 이용 절차는 로그인 후 좌측 메뉴에서 원하는 기능을 선택하면 됩니다.",
    view_count: 12,
  },
  {
    faq_id: 2,
    reg_time: "2026-01-14 09:20:00",
    category: "결제",
    title: "결제 오류 시 어떻게 해야 하나요?",
    content: "결제 오류 발생 시 결제 내역을 확인하시고, 오류 코드와 함께 고객센터로 문의해주세요.",
    view_count: 8,
  },
  {
    faq_id: 3,
    reg_time: "2026-01-13 14:00:00",
    category: "기기",
    title: "자판기 고장 신고는 어디서 하나요?",
    content: "자판기 전면의 기기 ID를 확인 후, 관리자 페이지의 무인기기 관리 > 고장 신고 메뉴를 이용해주세요.",
    view_count: 25,
  },
  {
    faq_id: 4,
    reg_time: "2026-01-12 11:45:00",
    category: "계정",
    title: "비밀번호를 잊어버렸어요.",
    content: "로그인 화면의 '비밀번호 찾기' 버튼을 눌러 이메일 인증을 통해 비밀번호를 재설정할 수 있습니다.",
    view_count: 33,
  },
  {
    faq_id: 5,
    reg_time: "2026-01-11 16:22:00",
    category: "이용안내",
    title: "환불 정책을 알려주세요.",
    content: "상품 미출고 및 오류 결제 건에 한해 당일 환불이 가능합니다. 자세한 내용은 이용약관을 참고하세요.",
    view_count: 5,
  },
  {
    faq_id: 6,
    reg_time: "2026-01-10 08:15:00",
    category: "기기",
    title: "상품이 나오지 않을 때 조치 방법.",
    content: "해당 슬롯 번호와 결제 시각을 확인 후, 관리자에게 보고하거나 환불 요청을 진행해주세요.",
    view_count: 18,
  },
  {
    faq_id: 7,
    reg_time: "2026-01-09 13:30:00",
    category: "결제",
    title: "영수증 재발급은 어떻게 받나요?",
    content: "매출 집계 화면에서 해당 거래를 선택 후 '영수증 출력' 버튼을 이용하면 재발급할 수 있습니다.",
    view_count: 7,
  },
  {
    faq_id: 8,
    reg_time: "2026-01-08 10:00:00",
    category: "계정",
    title: "사업자 등록 후 승인까지 얼마나 걸리나요?",
    content: "사업자 등록 승인까지는 보통 영업일 기준 1~2일이 소요됩니다.",
    view_count: 42,
  },
];


export default function FAQ() {
  const router = useRouter();

  const [ allFaqData, setAllFaqData ] = useState<any[]>(MOCK_FAQ_LIST);
  const [ tableData, setTableData ] = useState<any[]>(MOCK_FAQ_LIST);
  const [ tableOffset, setTableOffset ] = useState<number>(0);
  const [ tableTotalCount, setTableTotalCount ] = useState<number>(MOCK_FAQ_LIST.length);

  const [ title, setTitle ] = useState<string>("");
  const [ category, setCategory ] = useState<string>("");
  const [ date_start, setDateStart ] = useState<string>("");
  const [ date_end, setDateEnd ] = useState<string>("");

  // 등록 모달 상태 (fake용)
  const [ isModalOpen, setIsModalOpen ] = useState<boolean>(false);
  const [ editingFaqId, setEditingFaqId ] = useState<number | null>(null);
  const [ newCategory, setNewCategory ] = useState<string>("");
  const [ newTitle, setNewTitle ] = useState<string>("");
  const [ newContent, setNewContent ] = useState<string>("");

  const handleClickSearch = () => {
    // 가짜 조회: 입력값으로 필터링만 (실제 API 없음)
    let filtered = [...allFaqData];
    if (title) {
      filtered = filtered.filter((item) => item.title.toLowerCase().includes(title.toLowerCase()));
    }
    if (category) {
      filtered = filtered.filter((item) => item.category.includes(category));
    }
    setTableData(filtered);
    setTableTotalCount(filtered.length);
    setTableOffset(0);
  };

  const handleClickTableRow = (row: number) => {
    // 행 클릭 시 수정 모달 오픈
    const item = tableData[row];
    if (!item) return;

    setEditingFaqId(item.faq_id);
    setNewCategory(item.category || "");
    setNewTitle(item.title || "");
    setNewContent(item.content || "");
    setIsModalOpen(true);
  };

  const handlePageChange = (page: number) => {
    setTableOffset((page - 1) * COUNT_PER_PAGE);
  };

  const handleClickAdd = () => {
    // 신규 등록 모드
    setEditingFaqId(null);
    setNewCategory("");
    setNewTitle("");
    setNewContent("");
    setIsModalOpen(true);
  };

  const handleModalOk = () => {
    if (!newTitle.trim()) {
      alert("제목을 입력하세요.");
      return;
    }

    if (editingFaqId == null) {
      // 신규 등록
      const nextId =
        allFaqData.length > 0
          ? Math.max(...allFaqData.map((item: any) => item.faq_id)) + 1
          : 1;

      const newItem = {
        faq_id: nextId,
        reg_time: new Date().toISOString().slice(0, 19).replace("T", " "),
        category: newCategory || "기타",
        title: newTitle,
        content: newContent,
        view_count: 0,
      };

      // 전체 데이터 맨 앞에 추가
      setAllFaqData((prev) => [newItem, ...prev]);
      // 현재 테이블에도 맨 앞에 추가
      setTableData((prev) => [newItem, ...prev]);
      setTableTotalCount((prev) => prev + 1);
    } else {
      // 기존 항목 수정
      setAllFaqData((prev) =>
        prev.map((item: any) =>
          item.faq_id === editingFaqId
            ? {
                ...item,
                category: newCategory || item.category,
                title: newTitle,
                content: newContent || item.content,
              }
            : item
        )
      );
      setTableData((prev) =>
        prev.map((item: any) =>
          item.faq_id === editingFaqId
            ? {
                ...item,
                category: newCategory || item.category,
                title: newTitle,
                content: newContent || item.content,
              }
            : item
        )
      );
    }

    // 입력값 초기화 및 모달 닫기
    setEditingFaqId(null);
    setNewCategory("");
    setNewTitle("");
    setNewContent("");
    setIsModalOpen(false);
  };

  const columns = [
    {
      title: "번호",
      key: "faq_id",
      renderItem: (item: any, row: number) => tableTotalCount - (tableOffset + row)
    },
    {
      title: "등록일",
      key: "reg_time",
    },
    {
      title: "카테고리",
      key: "category",
    },
    {
      title: "제목",
      key: "title",
    },
    {
      title: "조회수",
      key: "view_count",
      renderItem: (item: any) => String(item.view_count ?? 0),
    },
  ];

  const pagedData = tableData.slice(tableOffset, tableOffset + COUNT_PER_PAGE);

  return (
    <div>
      <PageBreadcrumb pageTitle1="FAQ" />

      <div className="space-y-3">
        <ComponentCard title="FAQ 목록">

          <div className="space-y-3">
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
              <WithLabel label="제목" label_width={SEARCH_LABEL_WIDTH}>
                <Input type="text" placeholder="제목을 입력하세요." value={title} onChange={(e) => setTitle(e.target.value)} />
              </WithLabel>
              <WithLabel label="카테고리" label_width={SEARCH_LABEL_WIDTH}>
                <Input type="text" placeholder="카테고리" value={category} onChange={(e) => setCategory(e.target.value)} />
              </WithLabel>
            </div>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <WithLabel label="등록일" label_width={SEARCH_LABEL_WIDTH}>
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                  <DatePicker
                    id="date_start-picker"
                    placeholder="조회 시작일"
                    onChange={(dates, currentDateString) => { setDateStart(currentDateString); }}
                  />
                  <DatePicker
                    id="date_end-picker"
                    placeholder="조회 종료일"
                    onChange={(dates, currentDateString) => { setDateEnd(currentDateString); }}
                  />
                </div>
              </WithLabel>
              <div className="flex items-center justify-end gap-5">
                <Button size="sm" variant="outline" startIcon={<DocsIcon />}>엑셀파일 다운로드</Button>
                <Button size="sm" variant="primary" onClick={handleClickSearch}>조회</Button>
              </div>
            </div>
          </div>

          <CtTable1
            columns={columns}
            bodyData={pagedData}
            offset={tableOffset}
            totalCount={tableTotalCount}
            countPerPage={COUNT_PER_PAGE}
            pageNumCount={PAGE_NUM_COUNT}
            onClickRow={handleClickTableRow}
            onClickPageChange={handlePageChange}
          />

          <div>
            <Button size="sm" variant="primary" startIcon={<PlusIcon />} onClick={handleClickAdd}>FAQ 등록하기</Button>
          </div>

        </ComponentCard>

        {/* FAQ 등록 모달 (fake용, 실제 저장은 하지 않음) */}
        <CtModal
          title="FAQ 등록"
          description="새로 등록할 FAQ 정보를 입력하세요."
          okBtnText="등록"
          onClickOk={handleModalOk}
          isOpen={isModalOpen}
          closeModal={() => setIsModalOpen(false)}
          className="max-w-[700px] p-6 lg:p-10"
        >
          <div>
            <Label>카테고리</Label>
            <Select
              placeholder="카테고리를 선택하세요."
              options={FAQ_CATEGORY_OPTIONS}
              defaultValue={newCategory || ""}
              onChange={(value) => setNewCategory(value)}
              className="dark:bg-dark-900"
            />
          </div>
          <div>
            <Label redPoint>제목</Label>
            <Input
              type="text"
              placeholder="FAQ 제목을 입력하세요."
              value={newTitle}
              onChange={(e) => setNewTitle(e.target.value)}
            />
          </div>
          <div>
            <Label>내용</Label>
            <textarea
              className="w-full min-h-[150px] rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-theme-xs focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90"
              placeholder="FAQ 내용을 입력하세요."
              value={newContent}
              onChange={(e) => setNewContent(e.target.value)}
            />
          </div>
        </CtModal>
      </div>
    </div>
  );
}
