import { useEffect, useState, useContext } from "react"
import { AuthContext } from "../context/AuthContext"

const API = "http://10.10.1.112:5000"

export default function HistoryPembelian() {

  const { user } = useContext(AuthContext)

  const [orders, setOrders] = useState([])
  const [loading, setLoading] = useState(true)

  const fetchOrders = async () => {

    try {

      const res = await fetch(`${API}/orders`)
      const data = await res.json()

      // 🔥 FILTER HISTORY USER LOGIN
      const filtered = data.filter(
        item => item.nama === user?.nama
      )

      setOrders(filtered)

    } catch (err) {

      console.log(err)

    } finally {

      setLoading(false)

    }
  }

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

  return (
    <div style={{ padding: 30 }}>

      <h1
        style={{
          fontSize: 40,
          marginBottom: 30
        }}
      >
        📜 History Pembelian
      </h1>

      {loading && (
        <p>Loading...</p>
      )}

      {!loading && orders.length === 0 && (
        <div
          style={{
            background: "#0f172a",
            padding: 20,
            borderRadius: 12,
            border: "1px solid #1e293b"
          }}
        >
          Belum ada pembelian
        </div>
      )}

      {!loading && orders.length > 0 && (

        <table
          width="100%"
          cellPadding="12"
          style={{
            borderCollapse: "collapse",
            background: "#0f172a",
            borderRadius: 12,
            overflow: "hidden"
          }}
        >

          <thead
            style={{
              background: "#1e293b"
            }}
          >

            <tr>
              <th align="left">ID</th>
              <th align="left">Tanggal</th>
              <th align="left">Total</th>
              <th align="left">Status</th>
              <th align="left">Bukti</th>
            </tr>

          </thead>

          <tbody>

            {orders.map(order => (

              <tr
                key={order.id}
                style={{
                  borderBottom: "1px solid #1e293b"
                }}
              >

                <td>#{order.id}</td>

                <td>
                  {
                    new Date(order.created_at)
                      .toLocaleString("id-ID")
                  }
                </td>

                <td>
                  Rp {order.total?.toLocaleString()}
                </td>

                <td>

                  <span
                    style={{
                      padding: "6px 12px",
                      borderRadius: 20,
                      fontSize: 13,
                      background:
                        order.status === "disetujui"
                          ? "green"
                          : order.status === "menunggu_verifikasi"
                          ? "orange"
                          : "#334155"
                    }}
                  >
                    {order.status}
                  </span>

                </td>

                <td>

                  {order.bukti_pembayaran ? (

                    <a
                      href={`${API}/uploads-bukti/${order.bukti_pembayaran}`}
                      target="_blank"
                      style={{
                        color: "#60a5fa"
                      }}
                    >
                      Lihat Bukti
                    </a>

                  ) : (
                    "-"
                  )}

                </td>

              </tr>

            ))}

          </tbody>

        </table>

      )}

    </div>
  )
}