import React, { useState } from "react";
import {
 IonModal,
 IonHeader,
 IonToolbar,
 IonTitle,
 IonContent,
 IonList,
 IonItem,
 IonLabel,
 IonSearchbar,
 IonButton,
} from "@ionic/react";

interface Contact {
 contactId: string;
 name?: {
  display?: string;
  given?: string;
 };
 phones?: { number: string }[];
}

interface Props {
 isOpen: boolean;
 onClose: () => void;
 contacts: Contact[];
 onSelect: (contact: Contact) => void;
}

const ContactPickerModal: React.FC<Props> = ({
 isOpen,
 onClose,
 contacts,
 onSelect,
}) => {
 const [search, setSearch] = useState("");

 const filtered = contacts.filter((c) => {
  const name = c.name?.display || c.name?.given || "";
  return name.toLowerCase().includes(search.toLowerCase());
 });

 return (
  <IonModal isOpen={isOpen} onDidDismiss={onClose}>
   <IonHeader>
    <IonToolbar>
     <IonTitle>Select Contact</IonTitle>
    </IonToolbar>
   </IonHeader>

   <IonContent>
    <IonSearchbar
     value={search}
     onIonInput={(e) => setSearch(e.detail.value!)}
     placeholder="Search contacts..."
    />

    <IonList>
     {filtered.map((c) => {
      const name = c.name?.display || c.name?.given || "Unnamed";
      const firstLetter = name.charAt(0).toUpperCase();

      // random light color for variety
      const bgColors = [
       "#f44336",
       "#e91e63",
       "#9c27b0",
       "#3f51b5",
       "#009688",
       "#ff9800",
      ];
      const color = bgColors[name.charCodeAt(0) % bgColors.length];

      return (
       <IonItem key={c.contactId} button onClick={() => onSelect(c)}>
        <div
         style={{
          width: 40,
          height: 40,
          borderRadius: "50%",
          backgroundColor: color,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#fff",
          fontWeight: "bold",
          fontSize: 18,
          marginRight: 12,
         }}
        >
         {firstLetter}
        </div>

        <IonLabel>
         <h2>{name}</h2>
         <p>{c.phones?.[0]?.number || "No number"}</p>
        </IonLabel>
       </IonItem>
      );
     })}
    </IonList>

    <IonButton expand="full" color="medium" onClick={onClose}>
     Close
    </IonButton>
   </IonContent>
  </IonModal>
 );
};

export default ContactPickerModal;