import { Clipboard, Phone } from "lucide-react";
import { Card } from "@/components/ui/card";
import { useEffect, useState } from "react";
import { parsePhoneNumberFromString } from 'libphonenumber-js';

interface PhoneNumber {
  id: string;
  number: string;
  status: "active" | "inactive";
}

const list = [
  {
    "activationId": "3336974038",
    "serviceCode": "fb",
    "phoneNumber": "19892798946",
    "activationCost": 0.225,
    "activationStatus": "4",
    "activationTime": "2025-03-03 19:22:40",
    "countryCode": "187",
    "countryName": "USA",
    "canGetAnotherSms": "1",
    "currency": 840,
    "smsCode": 64744,
    "smsText": null,
    "discount": "0",
    "repeated": "0"
  }
]

export function PhoneNumberList() {

  const [numberList, setNumberList] = useState([])

  const fetchNumberList = async () => {
    try {
      const myHeaders = new Headers({
        "Origin": window.location.origin,
        "x-requested-with": "XMLHttpRequest"
      });

      const requestOptions = {
        method: "GET",
        headers: myHeaders
      };

      const corsProxy = "https://cors-anywhere.herokuapp.com/";
      const apiUrl = "https://api.sms-activate.ae/stubs/handler_api.php?api_key=3e70A03f3dA6bfb2b32b2cc09Adb6841&action=getActiveActivations";
      const response = await fetch(corsProxy + apiUrl, requestOptions)
      const data = await response.json()
      console.log(data)
      setNumberList(data?.activeActivations || [])
    } catch (error) {
      console.error("Error fetching phone numbers:", error)
    }
  }

  useEffect(() => {
    fetchNumberList()
  }, [])

  return (
    <div className="space-y-4 p-4 animate-fadeIn">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-semibold tracking-tight">Phone Numbers</h2>
        <span className="text-sm text-muted-foreground">
          {numberList.length} numbers
        </span>
      </div>
      <div className="grid gap-4">
        {numberList.map((number) => (
          <Card
            key={number.activationId}
            className="p-4 transition-all hover:shadow-md cursor-pointer group"
          >
            <div className="flex items-center space-x-4">
              <div className="h-10 w-10 rounded-full bg-secondary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-colors">
                <Phone className="h-5 w-5" />
              </div>
              <div className="flex-1">
                <h3 className="font-medium flex"  onClick={() => navigator.clipboard.writeText(number.phoneNumber.toString())}>
                  {parsePhoneNumberFromString(number.phoneNumber)?.formatInternational() || number.phoneNumber}
                  <Clipboard className="ml-2 h-4 w-4 text-black " />
                </h3>
                <p className="text-sm text-muted-foreground">
                  Status:{" "}
                  <span
                    className={
                      number.activationStatus === "4"
                        ? "text-green-500"
                        : "text-red-500"
                    }
                  >
                    {number.activationStatus}
                  </span>
                </p>
                <p className="text-sm text-muted-foreground flex gap-1">
                  OTP: 
                  <span
                    className="text-green-500 cursor-pointer flex"
                    onClick={() => navigator.clipboard.writeText(number.smsCode.toString())}
                    title="Click to copy"
                  >
                     { " " + number.smsCode}
                    <Clipboard className="ml-2 h-4 w-4 text-black " />
                  </span>
                </p>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}