"use client";
import React from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";
import { FiChevronRight, FiEye, FiEdit, FiTrash2, FiExternalLink, FiFileText } from "react-icons/fi";
import { FaAward, FaFileAlt } from "react-icons/fa";
import { TemplateTypeBadge, StageBadge } from "./components/templates/TemplateTypeBadge";
import type { TemplateRow as TemplateRowType } from "@/lib/api/types/template.types";

interface Props {
  row:             TemplateRowType;
  isExpanded:      boolean;
  isSelected:      boolean;
  toggleRowExpand: (sno: number) => void;
  handleRowSelect: (sno: number, checked: boolean) => void;
  onEdit:          (row: TemplateRowType) => void;
  onDelete:        (row: TemplateRowType) => void;
  onView:          (row: TemplateRowType) => void;
}

export function TemplateRow({
  row, isExpanded, isSelected,
  toggleRowExpand, handleRowSelect,
  onEdit, onDelete, onView,
}: Props) {
  return (
    <>
      <tr className={`${styles.tableRow} ${isSelected ? styles.selectedRow : ""}`}>
        <td className={styles.expandCell}>
          <button className={styles.expandBtn} onClick={() => toggleRowExpand(row.sno)}>
            <FiChevronRight size={16} className={`${styles.expandIcon} ${isExpanded ? styles.expanded : ""}`} />
          </button>
        </td>
        <td style={{ textAlign: "center", padding: "10px 8px" }}>
          <input type="checkbox" className={styles.checkbox} checked={isSelected} onChange={(e) => handleRowSelect(row.sno, e.target.checked)} />
        </td>
        <td className={styles.nameCell}>
          <span style={{ fontFamily: "monospace", fontSize: "12px", color: "#6b7280" }}>#{row.id}</span>
        </td>
        <td className={styles.nameCell}>
          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
            <span style={{ color: "#6b7280" }}>
              {row.templateType === "CERTIFICATE" ? <FaAward size={14} /> : <FaFileAlt size={14} />}
            </span>
            <div style={{ fontWeight: 600, fontSize: "13px" }}>{row.name}</div>
          </div>
        </td>
        <td className={styles.nameCell}><StageBadge stageName={row.stageName} /></td>
        <td className={styles.nameCell}><TemplateTypeBadge templateType={row.templateType} /></td>
        <td className={styles.nameCell}>
          <span style={{ fontFamily: "monospace", fontSize: "11px", background: "#f8fafc", border: "1px solid #e2e8f0", padding: "2px 7px", borderRadius: "4px", color: "#475569" }}>
            {row.version}
          </span>
        </td>
        <td className={styles.nameCell}>
          <span style={{ padding: "3px 10px", borderRadius: "12px", fontSize: "11px", fontWeight: 600, backgroundColor: row.isActive ? "#d1fae5" : "#f3f4f6", color: row.isActive ? "#065f46" : "#6b7280" }}>
            {row.isActive ? "Active" : "Inactive"}
          </span>
        </td>
        <td className={styles.actionsCell}>
          <div className={styles.actionGroup}>
            <a href={row.url} target="_blank" rel="noreferrer" className={styles.actionBtnView} title="Preview PDF">
              <FiEye size={14} />
            </a>
            <button className={styles.actionBtnEdit}  onClick={() => onEdit(row)}   title="Edit"><FiEdit size={14} /></button>
            <button className={styles.actionBtnDelete} onClick={() => onDelete(row)} title="Delete"><FiTrash2 size={14} /></button>
          </div>
        </td>
      </tr>

      {isExpanded && (
        <tr className={styles.expandedRow}>
          <td colSpan={10}>
            <div className={styles.expandedContent}>
              <div className={styles.detailPanel}>
                <div className={styles.panelHeader}>Template Details</div>
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Template Information</div>
                  <div className={styles.definitionGrid}>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Name</span><span className={styles.value}>{row.name}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Stage</span><span className={styles.value}><StageBadge stageName={row.stageName} size="md" /></span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Type</span><span className={styles.value}><TemplateTypeBadge templateType={row.templateType} size="md" /></span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Version</span><span className={styles.value} style={{ fontFamily: "monospace" }}>{row.version}</span></div>
                  </div>
                </div>
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>File Details</div>
                  <div className={styles.definitionGrid}>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>File Path</span><span className={styles.value} style={{ fontFamily: "monospace", fontSize: "12px" }}>{row.filePath}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Status</span><span className={styles.value}>{row.isActive ? "Active" : "Inactive"}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Created</span><span className={styles.value}>{row.createdAt ? new Date(row.createdAt).toLocaleDateString("en-GB") : "—"}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Updated</span><span className={styles.value}>{row.updatedAt ? new Date(row.updatedAt).toLocaleDateString("en-GB") : "—"}</span></div>
                  </div>
                </div>
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>PDF URL</div>
                  <p style={{ fontSize: "12px", color: "#374151", fontFamily: "monospace", padding: "0 4px", wordBreak: "break-all" }}>{row.url}</p>
                </div>
                <div className={styles.panelActions}>
                  <a href={row.url} target="_blank" rel="noreferrer" className={styles.primaryBtn} style={{ display: "inline-flex", alignItems: "center", gap: 6, textDecoration: "none" }}>
                    <FiExternalLink size={14} /> Open PDF
                  </a>
                  <button className={styles.secondaryBtn} onClick={() => onEdit(row)}><FiEdit size={14} /> Edit Template</button>
                  <button className={styles.dangerBtn}    onClick={() => onDelete(row)}><FiTrash2 size={14} /> Delete</button>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}