<template>
  <div class="committees-page relative overflow-hidden z-[11] bg-[#ffffff]">
    <div class="fixed bottom-0 z-[] bg-[#ffffff]">
      <img
        src="@/assets/image/content/bg_27.png"
        class="w-[100vw] h-[611PX] relative"
        alt=""
      />
    </div>
    <div
      class="fixed h-[100vh] left-[50%] translate-x-[-50%] z-[1]"
      style="width: 343px; pointer-events: none; mix-blend-mode: multiply"
    >
      <img src="@/assets/image/content/line.png" class="w-[100%]" alt="" />
      <img
        src="@/assets/image/content/bg_25.png"
        class="w-[100vw] h-[611PX] relative"
        alt=""
      />
    </div>
    <!-- 标题区 -->
    <div class="title w-[343PX] mx-auto pl-[15PX] mb-[50px] text-leftPX] mx-auto pl-[15PX] mb-[50px] text-left">
      <h1 style="font-size: 24px; margin-top: 60px">Committee Composition</h1>
    </div>
    <div
      class="w-[343PX] mx-auto overflow-hidden p-[10PX] relative z-99"
      style="
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.16);
      "
    >
      <n-data-table
        :columns="columns"
        :data="data"
        virtual-scroll-y
        :bordered="false"
        :bottom-bordered="false"
        :scrollbar-props="{
          trigger: 'none'
        }"
      />
    </div>
  </div>
</template>

<script setup lang="jsx">
import { NDataTable } from "naive-ui";

const columns = [
  {
    title: "",
    key: "name",
    minWidth: 100,
    fixed: "left",
    align: "center",
    className: "name",

    render(row) {
      return (
        <router-link
          to="/boarddirectors"
          style={{ fontSize: "18px" }}
          class="director-link text-[#ff7bac] font-bold"
        >
          {row.name}
        </router-link>
      );
    },
  },
  {
    key: "auditCommittee",
    align: "center",
    minWidth: 200,
    className: "auditCommittee",
    title() {
      return <h3>Audit Committee</h3>;
    },
    render(row) {
      return (
        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
          <row.auditCommittee />
        </div>
      );
    },
  },
  {
    title() {
      return <h3>Compensation Committee</h3>;
    },
    align: "center",
    key: "compensationCommittee",
    className: "compensationCommittee",
    minWidth: 200,
    render(row) {
      return (
        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
          <row.compensationCommittee />
        </div>
      );
    },
  },
  {
    title() {
      return <h3>Nominating and Corporate Governance Committee</h3>;
    },
    key: "governanceCommittee",
    align: "center",
    minWidth: 200,
    className: "governanceCommittee",
    render(row) {
      return (
        <div style={{ borderLeft: "1px dashed #E7E7E7" }}>
          <row.governanceCommittee />
        </div>
      );
    },
  },
];
const data = [
  {
    name: "Hu Bin",
    auditCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
    compensationCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
    governanceCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
  },
  {
    name: "David Natan",
    auditCommittee() {
      return <div class="text-[#6CC7DC]">Chair</div>;
    },
    compensationCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
    governanceCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
  },
  {
    name: "Chan Oi Fat",
    auditCommittee() {
      return <div class="text-[#5C6976]">Member</div>;
    },
    compensationCommittee() {
      return <div class="text-[#6CC7DC]">Chair</div>;
    },
    governanceCommittee() {
      return <div class="text-[#6CC7DC]">Chair</div>;
    },
  },
];

const otherDirectors = [
  // {
  //   name: "Cao Yu",
  //   title: "Chief Financial Officer, Secretary, Treasurer and Director",
  // },
  // { name: "David Lazar", title: "Director" },
  { name: "Hu Bin", title: "Director" },
  { name: "David Natan", title: "Director" },
  { name: "Chan Oi Fat", title: "Director" },
];

// Updated committee roles according to requirements
const committeeRoles = {
  "Cao Yu": {},
  "David Lazar": {},
  "Hu Bin": {
    Audit: "Member",
    Compensation: "Member",
    Governance: "Member",
  },
  "David Natan": {
    Audit: "Chair",
    Compensation: "Member",
    Governance: "Member",
  },
  "Chan Oi Fat": {
    Audit: "Member",
    Compensation: "Chair",
    Governance: "Chair",
  },
};

const getCommitteeRole = (name, committee) => {
  return committeeRoles[name]?.[committee] || null;
};
</script>

<style></style>
<style scoped lang="scss">
:deep(
    .n-data-table
      .n-data-table-tr:not(.n-data-table-tr--summary):hover
      > .n-data-table-td
  ) {
  background-color: #f8f8f8 !important;
}
:deep(.n-data-table-th) {
  background: #fff0f5 !important;
  &:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }
  &:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}
:deep(.n-data-table-thead) {
  background-color: none;
}
:deep(.n-data-table-td) {
  border: none;
}
:deep(.n-data-table-th) {
  border: none;
}
:deep(.n-data-table-tr) {
  > td {
    &:first-child {
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
    }
    &:last-child {
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
    }
  }
}

/* 紫色主题变量 */
.role-badge.chair {
  color: #00baff;
}
:root {
  --primary: #895bff;
  --primary-light: #a07cff;
  --primary-dark: #6a11cb;
  --primary-transparent: rgba(255, 123, 172, 0.1);
}

.committees-page {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}
.title h1 {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 60PX;
    top: -5PX;
    height: 5PX
    ;
    background: #ff7bac;
    // border-radius: 3px;
    transition: width 0.3s ease;
  }

  &:hover::after {
    width: 120px;
  }
}
/* 标题区设计 */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--primary) 100%
  );
  padding: 6rem 2rem;
  text-align: center;
  color: #895bff;
}

.hero-section h1 {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-section p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 表格设计 */
.committees-table {
  margin: 4rem 0;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(255, 123, 172, 0.08);
}

.table-header,
.table-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  border-bottom: 1px solid #f0f0f0;
}

.table-header {
  background: #fff0f6;
  position: sticky;
  top: 0;
  z-index: 2;
}

.committee-cell {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #f0f0f0;
}

.committee-cell:last-child {
  border-right: none;
}

.committee-cell h3 {
  color: var(--primary-dark);
  font-size: 1.1rem;
  font-weight: 600;
}

.director-cell {
  padding: 1.5rem;
  border-right: 1px solid #f0f0f0;
}

.director-info {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.director-info h4 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.3rem;
}

.director-title {
  font-size: 0.85rem;
  color: #666;
}

/* 职位徽章设计 */
.role-badges {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.role-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

.badge-icon {
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>')
    no-repeat center;
}

/* 悬停效果 */
.table-row {
  transition: all 0.3s ease;
}

.table-row:hover {
  background: #fdfcff;
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(255, 123, 172, 0.05);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .committees-table {
    overflow-x: auto;
  }

  .table-header,
  .table-row {
    grid-template-columns: 250px repeat(3, 200px);
    width: max-content;
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 1rem;
  }

  .hero-section h1 {
    font-size: 2.2rem;
  }

  .director-info {
    flex-direction: column;
    text-align: center;
    gap: 0.8rem;
  }

  .director-cell {
    padding: 1rem;
  }

  .committee-cell {
    padding: 1rem 0.5rem;
  }
}
.director-link {
  color: #ff7bac;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.director-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
</style>
