import { useState, useEffect } from "react";

// BUG: Defining a component inside another component is a classic React footgun.
// Because it's redefined on every render, React treats it as a brand-new component type
// every time the parent state changes, causing the input element to unmount, remount,
// and instantly lose focus after a single keystroke.
//
// The solver should move this CustomInput component outside of the App component.

export default function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  useEffect(() => {
    const b = document.body;
    b.style.background = "#fafafa"; b.style.margin = "0";
    return () => { b.style.background = ""; b.style.margin = ""; };
  }, []);

  function CustomInput({ label, value, onChange, placeholder, id, testId }) {
    return (
      <div style={styles.inputGroup}>
        <label htmlFor={id} style={styles.label}>{label}</label>
        <input
          id={id}
          data-testid={testId}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          style={styles.input}
        />
      </div>
    );
  }

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h1 style={styles.h1}>Account Profile</h1>
        <p style={styles.sub}>Update your profile information. Ensure typing flows smoothly.</p>
        
        <CustomInput
          id="name"
          testId="name-input"
          label="Full Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="e.g. Jane Doe"
        />

        <CustomInput
          id="email"
          testId="email-input"
          label="Email Address"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="jane@example.com"
        />

        <div style={styles.preview}>
          <h2 style={styles.previewTitle}>Live Preview</h2>
          <p style={styles.previewText}><strong>Name:</strong> {name || "—"}</p>
          <p style={styles.previewText}><strong>Email:</strong> {email || "—"}</p>
        </div>
      </div>
    </div>
  );
}

const styles = {
  page: { display: "flex", justifyContent: "center", padding: "40px 20px", fontFamily: "system-ui, sans-serif" },
  card: { background: "#fff", borderRadius: 12, padding: "24px", width: "100%", maxWidth: 400, boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1)" },
  h1: { margin: "0 0 6px", fontSize: 20, fontWeight: 600, color: "#111827" },
  sub: { margin: "0 0 20px", fontSize: 14, color: "#6B7280" },
  inputGroup: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 16 },
  label: { fontSize: 13, fontWeight: 500, color: "#374151" },
  input: { width: "100%", boxSizing: "border-box", padding: "10px 12px", fontSize: 14, borderRadius: 6, border: "1px solid #D1D5DB", outline: "none" },
  preview: { marginTop: 24, padding: "16px", background: "#F9FAFB", borderRadius: 8, border: "1px solid #F3F4F6" },
  previewTitle: { margin: "0 0 8px", fontSize: 13, fontWeight: 600, color: "#4B5563", textTransform: "uppercase", letterSpacing: "0.05em" },
  previewText: { margin: "4px 0", fontSize: 14, color: "#374151" }
};