"use client"

import { useState } from "react"
import { createKid } from "@/app/actions"
import QRCode from "react-qr-code"

export default function KidManager({ kids }: { kids: any[] }) {
  const [newKidName, setNewKidName] = useState("")

  const handleAddKid = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!newKidName.trim()) return
    await createKid(newKidName)
    setNewKidName("")
  }

  const origin = typeof window !== "undefined" ? window.location.origin : ""

  return (
    <div className="card" style={{ maxWidth: "100%", padding: "1.5rem" }}>
      <h2 className="title" style={{ fontSize: "1.5rem" }}>Your Kids</h2>
      
      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", marginTop: "1rem" }}>
        {kids.map(kid => {
          const kidUrl = `${origin}/kid/${kid.loginToken}`
          return (
            <div key={kid.id} style={{ padding: "1rem", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", background: "var(--background)" }}>
              <h3 style={{ fontSize: "1.2rem", fontWeight: "bold", marginBottom: "0.5rem" }}>{kid.name}</h3>
              <p style={{ fontSize: "0.9rem", color: "var(--foreground)", opacity: 0.8, marginBottom: "1rem" }}>
                Scan this QR code with {kid.name}'s iPad to log them in automatically.
              </p>
              <div style={{ background: "white", padding: "1rem", borderRadius: "8px", display: "inline-block" }}>
                <QRCode value={kidUrl} size={150} />
              </div>
              <div style={{ marginTop: "1rem" }}>
                <a href={kidUrl} target="_blank" className="btn" style={{ display: "inline-block", fontSize: "0.9rem", padding: "0.5rem 1rem" }}>
                  Open Link Directly
                </a>
              </div>
            </div>
          )
        })}

        {kids.length === 0 && <p>No kids added yet.</p>}

        <form onSubmit={handleAddKid} style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
          <input
            type="text"
            placeholder="Kid's Name"
            className="input"
            style={{ flex: 1 }}
            value={newKidName}
            onChange={e => setNewKidName(e.target.value)}
          />
          <button type="submit" className="btn">Add Kid</button>
        </form>
      </div>
    </div>
  )
}