"use client";
import React from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";
import { FiChevronRight, FiFileText, FiEye, FiEdit, FiTrash2 } from "react-icons/fi";
import type { StandardRow as StandardRowType } from "@/lib/api/types/standard.types";

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

export function StandardRow({ row, isExpanded, isSelected, toggleRowExpand, handleRowSelect, onEdit, onDelete, onView }: Props) {
  const date = (d: string) => d ? new Date(d).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" }).replace(/ /g, "-") : "—";

  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={{ fontWeight: 600, fontSize: "13px", color: "#111827" }}>{row.name}</span>
        </td>
        <td className={styles.nameCell}>
          <span style={{ fontSize: "13px", color: "#6b7280" }}>{row.title || "—"}</span>
        </td>
        <td className={styles.nameCell}>
          <span style={{ fontSize: "12px", color: "#9ca3af" }}>{date(row.created_at)}</span>
        </td>
        <td className={styles.actionsCell}>
          <div className={styles.actionGroup}>
            <button className={styles.actionBtnView}   onClick={() => onView(row)}   title="View"><FiEye size={14} /></button>
            <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={6}>
            <div className={styles.expandedContent}>
              <div className={styles.detailPanel}>
                <div className={styles.panelHeader}>Standard Details</div>
                <div className={styles.panelSection}>
                  <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}>Title</span><span className={styles.value}>{row.title || "—"}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Created</span><span className={styles.value}>{date(row.created_at)}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Updated</span><span className={styles.value}>{date(row.updated_at)}</span></div>
                  </div>
                </div>
                <div className={styles.panelActions}>
                  <button className={styles.secondaryBtn} onClick={() => onEdit(row)}><FiEdit size={14} /> Edit</button>
                  <button className={styles.dangerBtn}    onClick={() => onDelete(row)}><FiTrash2 size={14} /> Delete</button>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}