"use client";

import React from "react";
import styles from "../commonstyle/dattabale.module.css";
import { FiChevronRight, FiEye, FiEdit, FiTrash2, FiUser, FiCalendar, FiFileText } from "react-icons/fi";
import { getStatusBadge } from "./CompanyAuditFilters";
import type { CompanyAuditRow as CompanyAuditRowType } from "@/lib/api/types/companyAudit.types";

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

export function CompanyAuditRow({
  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>

        {/* Company */}
        <td className={styles.nameCell}>
          <div style={{ fontWeight: 600, fontSize: 13 }}>
            {row.companyName}
          </div>
        </td>

        {/* Audit By (was: Lead Auditor) */}
        <td className={styles.nameCell}>
          <div style={{ fontWeight: 500, fontSize: 13 }}>
            {row.auditBy ?? row.leadAuditor ?? "—"}
          </div>
        </td>

        {/* Audit Type (was: Audit Stage) */}
        <td className={styles.nameCell}>
          <span style={{
            padding: "3px 10px", borderRadius: 12, fontSize: 11, fontWeight: 600,
            background: "#f5f3ff", color: "#6d28d9",
          }}>
            {row.auditType ?? row.auditStage ?? "—"}
          </span>
        </td>

        {/* Audit Mode */}
        <td className={styles.nameCell}>
          <span style={{
            padding: "3px 10px", borderRadius: 12, fontSize: 11, fontWeight: 600,
            background: "#eff6ff", color: "#1d4ed8",
          }}>
            {row.auditMode ?? "—"}
          </span>
        </td>

        {/* Audit Year */}
        <td className={styles.nameCell}>
          <span style={{ color: "#6b7280", fontSize: 13 }}>
            {row.auditYear ?? "—"}
          </span>
        </td>

        {/* Audit Status */}
        <td className={styles.nameCell}>
          {getStatusBadge(row.status)}
        </td>

        {/* Created At */}
        <td className={styles.nameCell}>
          <span style={{ color: "#6b7280", fontSize: 13 }}>
            {row.createdAt ?? row.created_at ?? "—"}
          </span>
        </td>

        {/* Actions */}
        <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>

      {/* ── Expanded detail panel (all original code kept + new fields added) ── */}
      {isExpanded && (
        <tr className={styles.expandedRow}>
          <td colSpan={11}>
            <div className={styles.expandedContent}>
              <div className={styles.detailPanel}>
                <div className={styles.panelHeader}>Audit Details</div>

                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Audit Information</div>
                  <div className={styles.definitionGrid}>

                    {/* ── original fields (unchanged) ── */}
                    <div className={styles.definitionItem}>
                      <FiFileText size={18} />
                      <span className={styles.label}>Company</span>
                      <span className={styles.value}>{row.companyName}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiFileText size={18} />
                      <span className={styles.label}>Audit Stage</span>
                      <span className={styles.value}>{row.auditStage}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiUser size={18} />
                      <span className={styles.label}>Lead Auditor</span>
                      <span className={styles.value}>{row.leadAuditor}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiCalendar size={18} />
                      <span className={styles.label}>Audit Date</span>
                      <span className={styles.value}>{row.auditDate}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiFileText size={18} />
                      <span className={styles.label}>Status</span>
                      <span className={styles.value}>{getStatusBadge(row.status)}</span>
                    </div>

                    {/* ── NEW fields for Image-2 columns ── */}
                    <div className={styles.definitionItem}>
                      <FiUser size={18} />
                      <span className={styles.label}>Audit By</span>
                      <span className={styles.value}>{row.auditBy ?? row.leadAuditor ?? "—"}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiFileText size={18} />
                      <span className={styles.label}>Audit Type</span>
                      <span className={styles.value}>{row.auditType ?? row.auditStage ?? "—"}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiFileText size={18} />
                      <span className={styles.label}>Audit Mode</span>
                      <span className={styles.value}>{row.auditMode ?? "—"}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiCalendar size={18} />
                      <span className={styles.label}>Audit Year</span>
                      <span className={styles.value}>{row.auditYear ?? "—"}</span>
                    </div>
                    <div className={styles.definitionItem}>
                      <FiCalendar size={18} />
                      <span className={styles.label}>Created At</span>
                      <span className={styles.value}>{row.createdAt ?? row.created_at ?? "—"}</span>
                    </div>

                  </div>
                </div>

                {/* ── Notes (original, unchanged) ── */}
                {row.notes && row.notes !== "—" && (
                  <div className={styles.panelSection}>
                    <div className={styles.sectionTitleText}>Notes</div>
                    <p style={{ fontSize: 13, color: "#374151", whiteSpace: "pre-line", padding: "0 4px" }}>
                      {row.notes}
                    </p>
                  </div>
                )}

                {/* ── Findings (original, unchanged) ── */}
                {row.findings && row.findings !== "—" && (
                  <div className={styles.panelSection}>
                    <div className={styles.sectionTitleText}>Findings</div>
                    <p style={{ fontSize: 13, color: "#374151", whiteSpace: "pre-line", padding: "0 4px" }}>
                      {row.findings}
                    </p>
                  </div>
                )}

                {/* ── Panel actions (original, unchanged) ── */}
                <div className={styles.panelActions}>
                  <button className={styles.secondaryBtn} onClick={() => onEdit(row)}>
                    <FiEdit size={14} /> Edit Audit
                  </button>
                  <button className={styles.dangerBtn} onClick={() => onDelete(row)}>
                    <FiTrash2 size={14} /> Delete
                  </button>
                </div>

              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}