"use client";

import { useState } from "react";
import FeedbackModal from "./FeedbackModal";
import CertificateModal from "./CertificateModal";

type ResultRow = {
  programTitle: string;
  courseTitle: string;
  completedAt: string;
  score: string;
  instructor: string;
  feedbackLink?: string;
  certificateLink?: string;
};

const mockResults: ResultRow[] = [
  {
    programTitle: "XR 안전 기본 과정",
    courseTitle: "기본 안전 교육",
    completedAt: "2025-09-10",
    score: "-",
    instructor: "이공필",
  },
  {
    programTitle: "건설 현장 안전 실무",
    courseTitle: "비계 설치 점검",
    completedAt: "2025-09-10",
    score: "70 / 100",
    instructor: "이공필",
    feedbackLink: "#",
    certificateLink: "#",
  },
  {
    programTitle: "전기 설비 위험성 평가",
    courseTitle: "분전반 작업 안전",
    completedAt: "2025-09-10",
    score: "70 / 100",
    instructor: "이공필",
    feedbackLink: "#",
    certificateLink: "#",
  },
];

export default function ResultsPage() {
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
  const [selected, setSelected] = useState<ResultRow | null>(null);
  const [isCertOpen, setIsCertOpen] = useState(false);

  function openFeedback(row: ResultRow) {
    setSelected(row);
    setIsFeedbackOpen(true);
  }
  function openCertificate(row: ResultRow) {
    setSelected(row);
    setIsCertOpen(true);
  }

  return (
    <main className="flex w-full flex-col">
      <div className="flex h-[100px] items-center px-8">
        <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">학습 결과</h1>
      </div>

      <section className="px-8 pb-20">
        <div className="rounded-[8px]">
          <div className="w-full overflow-x-auto rounded-[8px] border border-[#dee1e6]">
            <table className="min-w-full border-collapse">
              <colgroup>
                <col />
                <col />
                <col style={{ width: 140 }} />
                <col style={{ width: 140 }} />
                <col style={{ width: 140 }} />
                <col style={{ width: 76 }} />
                <col style={{ width: 76 }} />
              </colgroup>
              <thead>
                <tr className="h-12 bg-gray-50 text-left">
                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육 과정명</th>
                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</th>
                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">수강 완료일</th>
                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">평가 점수(점)</th>
                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">평가 강사</th>
                  <th className="border-r border-[#dee1e6] px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">피드백</th>
                  <th className="px-4 text-center text-[14px] font-semibold leading-[1.5] text-[#4c5561]">수료증</th>
                </tr>
              </thead>
              <tbody>
                {mockResults.map((row, idx) => (
                  <tr
                    key={`${row.programTitle}-${idx}`}
                    className="h-12"
                  >
                    <td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.programTitle}
                    </td>
                    <td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.courseTitle}
                    </td>
                    <td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.completedAt}
                    </td>
                    <td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.score}
                    </td>
                    <td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.instructor}
                    </td>
                    <td className="border-t border-r border-[#dee1e6] px-4 text-center text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.feedbackLink ? (
                        <button
                          type="button"
                          onClick={() => openFeedback(row)}
                          className="text-[12px] text-blue-500 underline underline-offset-[3px] cursor-pointer"
                        >
                          확인하기
                        </button>
                      ) : (
                        "-"
                      )}
                    </td>
                    <td className="border-t border-[#dee1e6] px-4 text-center text-[15px] leading-[1.5] text-[#1b2027]">
                      {row.certificateLink ? (
                        <button
                          type="button"
                          onClick={() => openCertificate(row)}
                          className="text-[12px] text-blue-500 underline underline-offset-[3px] cursor-pointer"
                        >
                          확인하기
                        </button>
                      ) : (
                        "-"
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
      <FeedbackModal
        open={isFeedbackOpen}
        onClose={() => setIsFeedbackOpen(false)}
        learnerName="홍길동"
        instructorName={selected?.instructor}
        scoreText={selected?.score?.split(" / ")[0] ?? "0"}
      />
      <CertificateModal
        open={isCertOpen}
        onClose={() => setIsCertOpen(false)}
      />
    </main>
  );
}


