// components/ui/accordion.tsx
import React, { useState, ReactNode } from "react";
import {} from "react";
import styles from "./accordion.module.css";
import { FaChevronDown } from "react-icons/fa";
import { FaCheckCircle } from "react-icons/fa";
import { LuCircleDashed } from "react-icons/lu";

interface AccordionProps {
  stepNumber: number | string;
  title: string;
  children: ReactNode;
  isOpen: boolean;
  onToggle: () => void;
  className?: string;
}

export default function Accordion({
  stepNumber,
  title,
  children,
  isOpen,
  onToggle,
  className = "",
}: AccordionProps) {
  return (
    <div className={`${styles.accordion} ${className}`}>
      {/* Header */}
      <div
        className={`${styles.accordionHeader} ${!isOpen ? styles.closed : ""}`}
        onClick={onToggle}
      >
        <div className={styles.stepNumber}>{stepNumber}</div>
        <span className={styles.sectionTitle}>{title}</span>
      </div>

      {/* Content */}
      {isOpen && <div className={styles.sectionContent}>{children}</div>}
    </div>
  );
}

interface AccordionItemProps {
  title: string;
  content: React.ReactNode;
  status: "completed" | "pending" | "inactive";
  isExpanded: boolean;
  onToggle: () => void;
}

export const AccordionItem: React.FC<AccordionItemProps> = ({
  title,
  content,
  status,
  isExpanded,
  onToggle,
}) => {
  const renderStatusIcon = () => {
    if (status === "completed") {
      return (
        <div className={styles.acItemStatusIcon}>
          <FaCheckCircle size={32} color="#000" />
        </div>
      );
    } else if (status === "pending") {
      return (
        <div
          className={styles.acItemStatusIcon}
          style={{ backgroundColor: "#000", borderRadius: "50%" }}
        >
          <div
            style={{
              width: "8px",
              height: "8px",
              backgroundColor: "#ffffff",
              borderRadius: "50%",
            }}
          />
        </div>
      );
    }
    return (
      <div className={styles.acItemStatusIcon}>
        <LuCircleDashed size={32} color="#d0d0d0" />
      </div>
    );
  };

  return (
    <div className={styles.acItemAccordionItem}>
      <div className={styles.acItemAccordionHeader} onClick={onToggle}>
        <div className={styles.acItemLeftSection}>
          {/* {renderStatusIcon()} */}
          <h3 className={styles.acItemTitle}>{title}</h3>
        </div>
        <div className={`${styles.acItemChevron} ${isExpanded ? styles.acItemChevronRotated : ""}`}>
          <FaChevronDown size={20} />
        </div>
      </div>

      <div className={`${styles.acItemContent} ${isExpanded ? styles.acItemContentExpanded : ""}`}>
        <div className={styles.acItemContentInner}>{content}</div>
      </div>
    </div>
  );
};

interface AccordionData {
  id: string;
  title: string;
  content: React.ReactNode;
  status: "completed" | "pending" | "inactive";
}

// const App: React.FC = () => {
//   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(['1']));

//   const accordionData: AccordionData[] = [
//     {
//       id: '1',
//       title: 'Add training data',
//       status: 'completed',
//       content: (
//         <div>
//           <p style={{ marginBottom: '12px' }}>
//             Sync products and pages from Shopify or add other data sources to improve AI response accuracy.
//           </p>
//           <div style={{ display: 'flex', gap: '12px', marginTop: '16px' }}>
//             <button
//               style={{
//                 padding: '8px 16px',
//                 backgroundColor: '#6366f1',
//                 color: '#ffffff',
//                 border: 'none',
//                 borderRadius: '6px',
//                 fontSize: '13px',
//                 fontWeight: 500,
//                 cursor: 'pointer'
//               }}
//             >
//               Store Sync
//             </button>
//             <button
//               style={{
//                 padding: '8px 16px',
//                 backgroundColor: '#ffffff',
//                 color: '#666666',
//                 border: '1px solid #e0e0e0',
//                 borderRadius: '6px',
//                 fontSize: '13px',
//                 fontWeight: 500,
//                 cursor: 'pointer'
//               }}
//             >
//               Add other sources
//             </button>
//           </div>
//           <div style={styles.illustration}>
//             <svg viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
//               <rect x="20" y="15" width="80" height="50" rx="8" fill="#e8f4ff" />
//               <circle cx="60" cy="40" r="15" fill="#6366f1" />
//               <path d="M55 40 L58 43 L65 36" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
//             </svg>
//           </div>
//         </div>
//       )
//     },
//     {
//       id: '2',
//       title: 'Customize your AI assistant',
//       status: 'inactive',
//       content: (
//         <div>
//           <p>Configure your AI assistant's behavior, tone, and response style to match your brand voice.</p>
//         </div>
//       )
//     },
//     {
//       id: '3',
//       title: 'Test AI responses',
//       status: 'inactive',
//       content: (
//         <div>
//           <p>Try out your AI assistant with sample questions to ensure it provides accurate and helpful responses.</p>
//         </div>
//       )
//     },
//     {
//       id: '4',
//       title: 'Activate AI assistant',
//       status: 'inactive',
//       content: (
//         <div>
//           <p>Once you're satisfied with the setup, activate your AI assistant to start helping your customers.</p>
//         </div>
//       )
//     }
//   ];

//   const toggleItem = (id: string) => {
//     setExpandedItems(prev => {
//       const newSet = new Set(prev);
//       if (newSet.has(id)) {
//         newSet.delete(id);
//       } else {
//         newSet.add(id);
//       }
//       return newSet;
//     });
//   };

//   return (
//     <div style={{ padding: '40px 20px', backgroundColor: '#fafafa', minHeight: '100vh' }}>
//       <div style={styles.container}>
//         <div style={styles.header}>
//           <h2 style={{ fontSize: '16px', fontWeight: 500, color: '#333333', margin: 0 }}>
//             Set up AI assistant
//           </h2>
//           <ChevronDown size={20} color="#999999" />
//         </div>
//         {accordionData.map(item => (
//           <AccordionItem
//             key={item.id}
//             title={item.title}
//             content={item.content}
//             status={item.status}
//             isExpanded={expandedItems.has(item.id)}
//             onToggle={() => toggleItem(item.id)}
//           />
//         ))}
//       </div>
//     </div>
//   );
// };