import * as React from "react";
import {
  Box,
  TextField,
  Button,
  Typography,
  CircularProgress,
} from "@mui/material";

export interface ProfileEditProps {
  name: string;
  username: string;
  email: string;
  onSubmit: (data: { name: string; email: string }) => Promise<void>;
  onBack?: () => void;
  loading?: boolean;
  error?: string | null;
}

export function ProfileEdit({
  name: initialName,
  username,
  email: initialEmail,
  onSubmit,
  onBack,
  loading = false,
  error = null,
}: ProfileEditProps) {
  const [name, setName] = React.useState(initialName);
  const [email, setEmail] = React.useState(initialEmail);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSubmit({ name, email });
  };

  return (
    <Box
      sx={{
        maxWidth: 480,
        mx: "auto",
        mt: 4,
        p: 4,
        borderRadius: 3,
        boxShadow: 3,
        bgcolor: "background.paper",
      }}
    >
      <Typography variant="h5" fontWeight="bold" gutterBottom>
        Edit Profile
      </Typography>

      <form onSubmit={handleSubmit}>
        <TextField
          fullWidth
          label="Username"
          value={username}
          margin="normal"
          disabled
        />

        <TextField
          fullWidth
          label="Full Name"
          margin="normal"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
          autoFocus
        />

        <TextField
          fullWidth
          label="Email"
          type="email"
          margin="normal"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />

        {error && (
          <Typography color="error" variant="body2" sx={{ mt: 1 }}>
            {error}
          </Typography>
        )}

        <Box sx={{ display: "flex", gap: 2, mt: 3 }}>
          {onBack && (
            <Button
              fullWidth
              variant="outlined"
              onClick={onBack}
              disabled={loading}
            >
              Cancel
            </Button>
          )}
          <Button
            fullWidth
            type="submit"
            variant="contained"
            disabled={loading}
          >
            {loading ? <CircularProgress size={24} /> : "Save Changes"}
          </Button>
        </Box>
      </form>
    </Box>
  );
}