import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonCard,
  IonCardContent,
  IonText,
  IonList,
  IonItem,
  IonLabel,
  IonBadge,
  IonSpinner,
  IonButtons,
  IonBackButton,
  IonButton,
  IonIcon
} from "@ionic/react";
import {
 arrowBackOutline,
 copyOutline,

} from "ionicons/icons";
import { useEffect, useState, useContext } from "react";
import axios from "axios";
import { Context } from "../../context/contex";
import { formatNumber } from "../../utils";
import AppShell from "../../components/Header";

interface Referral {
  first_name: string;
  total_spent: number;
  ref_paid: boolean;
}

const Referrals: React.FC = () => {
  const context = useContext(Context);
 if (!context) {
  return <div>Loading...</div>;
 }
 const {
  apiURL,
  storage,
  userInfo,
  settings,
  busy,
  setBusy,
 copy
 } = context;

  const [referrals, setReferrals] = useState<Referral[]>([]);


const fetchReferrals = async () => {
  if (!userInfo) return;

  const token = await storage?.get("vin_auth_token");
  if (!token) return;

  setBusy(true);

  try {
    const payload = new URLSearchParams({
      action: "get_my_referrals",
    });

    const res = await axios.post(apiURL, payload, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Bearer ${token}`,
      },
    });

    if (res.data?.success) {
       console.log("Fetch referrals failed:", res.data?.data);
      setReferrals(res.data.data || []);
    } else {
      setReferrals([]);
      console.warn("Fetch referrals failed:", res.data?.message);
    }

  } catch (err) {
    console.error("Fetch referrals error:", err);
    setReferrals([]);
  } finally {
    setBusy(false);
  }
};

  useEffect(() => {
    fetchReferrals();
  }, [userInfo]);

  const totalEarnings = referrals.filter(r => r.ref_paid.toString() === "true").length * 500;

  return (
    <IonPage>
     <AppShell showBack={true} showLogo={false} title={'Referrals'}>
        {/* 🔗 REF CODE CARD */}
        <IonCard className="ref-summary-card">
          <IonCardContent>
            <IonText className="ref-summary-text">
              Your referral code
            </IonText>
<div
  style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "8px",
    marginTop: 6,
    flexWrap: "nowrap",
    width: "100%",
  }}
>
  <IonText
    style={{
      fontSize: "22px",
      fontWeight: 700,
      whiteSpace: "nowrap",
      flexShrink: 0,     // 🔑 prevents hiding on mobile
      maxWidth: "70%",   // prevents overflow
      overflow: "hidden",
      textOverflow: "ellipsis",
    }}
  >
    {userInfo?.ref_code}
  </IonText>

  <IonButton
    fill="clear"
    size="small"
    onClick={() => copy(userInfo?.ref_code)}
    style={{
      flexShrink: 0,   // 🔑 button never pushes text away
      margin: 0,
    }}
  >
    <IonIcon icon={copyOutline} />
  </IonButton>
</div>

            <IonText className="ref-summary-text" style={{ marginTop: 8 }}>
              Earn <strong>₦{formatNumber(settings?.ref_bonus, 0)}</strong> on each successful referral.
            </IonText>
          </IonCardContent>
        </IonCard>

        {/* 📊 STATS */}
        <IonCard>
          <IonCardContent
            style={{
              display: "flex",
              justifyContent: "space-between",
              textAlign: "center",
            }}
          >
            <div>
              <IonText color="medium">Referrals</IonText>
              <h3>{referrals.length}</h3>
            </div>

            <div>
              <IonText color="medium">Earned</IonText>
              <h3>₦{totalEarnings.toLocaleString()}</h3>
            </div>
          </IonCardContent>
        </IonCard>

        {/* 📋 REFERRAL LIST */}
        <IonText
          style={{
            display: "block",
            margin: "16px 4px 8px",
            fontWeight: 600,
          }}
        >
          Referral List
        </IonText>

        {busy ? (
          <div style={{ textAlign: "center", marginTop: 30 }}>
            <IonSpinner />
          </div>
        )   : referrals.length === 0 ? (
          <IonText color="medium">
            You have no referrals yet.
          </IonText>
        ) : (
          <IonList>
            {referrals.map((ref, index) => (
              <IonItem key={index}>
                <IonLabel>
                  <strong>{ref.first_name}</strong>
                  <p>Total spent: ₦{Number(ref.total_spent).toLocaleString()}</p>
                </IonLabel>

                <IonBadge
                  color={ref.ref_paid ? "success" : "warning"}
                >
                  {ref.ref_paid ? "Paid" : "Pending"}
                </IonBadge>
              </IonItem>
            ))}
          </IonList>
        )}
      </AppShell>
    </IonPage>
  );
};

export default Referrals;