"use client";
import React from "react";
import styles from "../../modules/commonstyle/dattabale.module.css";
import { FiChevronRight, FiEye, FiEdit, FiTrash2, FiExternalLink, FiCalendar, FiUser, FiFileText } from "react-icons/fi";
import { BsFillBuildingFill } from "react-icons/bs";
import { StageBadge, RiskBadge, ScheduleBadge, StandardsBadge } from "./components/jobs/JobBadge";
import type { JobRow as JobRowType } from "@/lib/api/types/job.types";

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

export function JobRow({ 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>
        {/* ID */}
        <td className={styles.nameCell}>
          <span style={{ fontFamily: "monospace", fontSize: "12px", color: "#6b7280" }}>#{row.id}</span>
        </td>
        {/* Company */}
        <td className={styles.nameCell}>
          <div style={{ fontWeight: 600, fontSize: "13px", maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.companyName}</div>
        </td>
        {/* Job Codes */}
        <td className={styles.nameCell}>
          <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
            {row.jobCodes.slice(0, 2).map((code, i) => (
              <span key={i} style={{ fontFamily: "monospace", fontSize: "10px", background: "#f8fafc", border: "1px solid #e2e8f0", padding: "1px 5px", borderRadius: "4px", color: "#475569", whiteSpace: "nowrap" }}>{code}</span>
            ))}
            {row.jobCodes.length > 2 && <span style={{ fontSize: "10px", color: "#94a3b8" }}>+{row.jobCodes.length - 2} more</span>}
          </div>
        </td>
        {/* Stage */}
        <td className={styles.nameCell}><StageBadge stage={row.stage} /></td>
        {/* Template */}
        <td className={styles.nameCell}>
          <span style={{ fontSize: "12px", color: "#374151", maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" }}>{row.templateName}</span>
        </td>
        {/* Lead Auditor */}
        <td className={styles.nameCell}><span style={{ color: "#6b7280", fontSize: "13px" }}>{row.leadAuditor}</span></td>
        {/* Date */}
        <td className={styles.nameCell}><span style={{ color: "#6b7280", fontSize: "12px" }}>{row.date}</span></td>
        {/* Risk */}
        <td className={styles.nameCell}><RiskBadge risk={row.mdRisk} /></td>
        {/* Actions */}
        <td className={styles.actionsCell}>
          <div className={styles.actionGroup}>
            {row.pdfUrl && (
              <a href={row.pdfUrl} target="_blank" rel="noreferrer" className={styles.actionBtnView} title="View 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={11}>
            <div className={styles.expandedContent}>
              <div className={styles.detailPanel}>
                <div className={styles.panelHeader}>Job Details — #{row.id}</div>

                {/* Company Info */}
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Company</div>
                  <div className={styles.definitionGrid}>
                    <div className={styles.definitionItem}><BsFillBuildingFill size={18} /><span className={styles.label}>Company</span><span className={styles.value}>{row.raw.companySnapshot?.companyName || row.companyName}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>City</span><span className={styles.value}>{row.raw.companySnapshot?.companycity || "—"}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Contact</span><span className={styles.value}>{row.raw.companySnapshot?.companycontact_person || "—"}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Validity</span><span className={styles.value}>{row.raw.companySnapshot?.companyvalidity || "—"}</span></div>
                  </div>
                </div>

                {/* Job Info */}
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Job Information</div>
                  <div className={styles.definitionGrid}>
                    <div className={styles.definitionItem}><FiCalendar size={18} /><span className={styles.label}>Stage</span><span className={styles.value}><StageBadge stage={row.stage} size="md" /></span></div>
                    <div className={styles.definitionItem}><FiCalendar size={18} /><span className={styles.label}>Date</span><span className={styles.value}>{row.date}</span></div>
                    <div className={styles.definitionItem}><FiCalendar size={18} /><span className={styles.label}>Doc Review</span><span className={styles.value}>{row.raw.docReview}</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}><FiFileText size={18} /><span className={styles.label}>MD</span><span className={styles.value}>{row.md}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Risk</span><span className={styles.value}><RiskBadge risk={row.mdRisk} size="md" /></span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Schedule</span><span className={styles.value}><ScheduleBadge slot={row.scheduleSlot} size="md" /></span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>Employees</span><span className={styles.value}>{row.numEmployees}</span></div>
                    <div className={styles.definitionItem}><FiFileText size={18} /><span className={styles.label}>NACE/EAC</span><span className={styles.value}>{row.naceEacCodes}</span></div>
                  </div>
                </div>

                {/* Job Codes */}
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Job Codes</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: "6px", marginTop: 6 }}>
                    {row.jobCodes.map((code, i) => (
                      <span key={i} style={{ fontFamily: "monospace", fontSize: "12px", background: "#f1f5f9", border: "1px solid #e2e8f0", padding: "3px 8px", borderRadius: "6px", color: "#334155" }}>{code}</span>
                    ))}
                  </div>
                </div>

                {/* Standards */}
                {row.standards?.length > 0 && (
                  <div className={styles.panelSection}>
                    <div className={styles.sectionTitleText}>ISO Standards</div>
                    <div style={{ marginTop: 8 }}><StandardsBadge standards={row.standards} size="md" /></div>
                  </div>
                )}

                {/* Template */}
                <div className={styles.panelSection}>
                  <div className={styles.sectionTitleText}>Template</div>
                  <p style={{ fontSize: "13px", color: "#374151", margin: "4px 0" }}>{row.templateName}</p>
                  {row.pdfUrl && <p style={{ fontSize: "11px", color: "#6b7280", fontFamily: "monospace", wordBreak: "break-all", margin: 0 }}>{row.pdfUrl}</p>}
                </div>

                <div className={styles.panelActions}>
                  {row.pdfUrl && (
                    <a href={row.pdfUrl} 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 Job</button>
                  <button className={styles.dangerBtn}    onClick={() => onDelete(row)}><FiTrash2 size={14} /> Delete</button>
                </div>
              </div>
            </div>
          </td>
        </tr>
      )}
    </>
  );
}