'use client';

import { useState } from 'react';
import {
  Box,
  Avatar,
  IconButton,
  TextField,
  Typography,
  Paper,
} from '@mui/material';
import { PhotoCamera, Person } from '@mui/icons-material';

interface PhotoUploadProps {
  value: string;
  onChange: (url: string) => void;
  label: string;
  disabled?: boolean;
  size?: number;
}

export function PhotoUpload({
  value,
  onChange,
  label,
  disabled = false,
  size = 100
}: PhotoUploadProps) {
  const [imageError, setImageError] = useState(false);

  const handleImageError = () => {
    setImageError(true);
  };

  const handleImageLoad = () => {
    setImageError(false);
  };

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }}>
      <Paper
        elevation={0}
        sx={{
          p: 2,
          border: 1,
          borderColor: 'divider',
          borderRadius: 2,
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: 2
        }}
      >
        <Typography variant="body2" color="text.secondary">
          {label}
        </Typography>

        <Box sx={{ position: 'relative' }}>
          <Avatar
            src={!imageError && value ? value : undefined}
            sx={{
              width: size,
              height: size,
              bgcolor: 'primary.light',
              fontSize: size / 3,
            }}
            onError={handleImageError}
            onLoad={handleImageLoad}
          >
            {!value || imageError ? <Person sx={{ fontSize: size / 2 }} /> : null}
          </Avatar>

          <IconButton
            sx={{
              position: 'absolute',
              bottom: -4,
              right: -4,
              bgcolor: 'background.paper',
              border: 2,
              borderColor: 'divider',
              '&:hover': {
                bgcolor: 'action.hover',
              },
            }}
            size="small"
            disabled={disabled}
            onClick={() => {
              // Future: Open file picker for actual upload
              // For now, user can paste URL below
            }}
          >
            <PhotoCamera fontSize="small" />
          </IconButton>
        </Box>

        <TextField
          label="Photo URL"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          fullWidth
          size="small"
          placeholder="https://example.com/photo.jpg"
          disabled={disabled}
          helperText="Paste an image URL or upload a photo"
        />
      </Paper>
    </Box>
  );
}