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

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

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

        {/* Flag + Name */}
        <td className={styles.nameCell}>
          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
            {row.flag_url ? (
              <img src={row.flag_url} alt={row.code} style={{ width: 28, height: 19, objectFit: "cover", borderRadius: 3, border: "1px solid #e5e7eb", flexShrink: 0 }}
                onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
            ) : (
              <div style={{ width: 28, height: 19, backgroundColor: "#f3f4f6", borderRadius: 3, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FiGlobe size={12} color="#9ca3af" />
              </div>
            )}
            <span style={{ fontWeight: 600, fontSize: "13px", color: "#111827" }}>{row.name}</span>
          </div>
        </td>
        <td className={styles.nameCell}>
          <span style={{ padding: "3px 10px", borderRadius: 20, fontSize: 11, fontWeight: 700, backgroundColor: "#f0f9ff", color: "#0369a1", fontFamily: "monospace" }}>
            {row.code?.toUpperCase()}
          </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}>Country Details</div>
                <div className={styles.panelSection}>
                  <div className={styles.definitionGrid}>
                    <div className={styles.definitionItem}>
                      <FiGlobe size={18} /><span className={styles.label}>Name</span>
                      <span className={styles.value} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        {row.flag_url && <img src={row.flag_url} alt={row.code} style={{ width: 22, height: 15, objectFit: "cover", borderRadius: 2 }} />}
                        {row.name}
                      </span>
                    </div>
                    <div className={styles.definitionItem}><FiGlobe size={18} /><span className={styles.label}>Code</span><span className={styles.value}>{row.code?.toUpperCase()}</span></div>
                    <div className={styles.definitionItem}><FiGlobe size={18} /><span className={styles.label}>Created</span><span className={styles.value}>{date(row.created_at)}</span></div>
                    <div className={styles.definitionItem}><FiGlobe 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>
      )}
    </>
  );
}