import { useState } from 'react';
import {
  Box,
  Container,
  Typography,
  Card,
  CardContent,
  Button,
  TextField,
  Grid,
  IconButton,
} from '@mui/material';
import { ArrowBack, Edit } from '@mui/icons-material';
import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';

interface ContentEditStepProps {
  initialTitle: string;
  initialPrize: string;
  onNext: (data: { title: string; prize: string; guide: string }) => void;
  onBack: () => void;
}

export default function ContentEditStep({
  initialTitle,
  initialPrize,
  onNext,
  onBack,
}: ContentEditStepProps) {
  const [title, setTitle] = useState(initialTitle);
  const [prize, setPrize] = useState(initialPrize);
  const [guide, setGuide] = useState('전화번호를 입력하고 참여하세요');

  const handleSave = () => {
    // TODO: 임시저장 API 연동
    alert('편집 내용이 저장되었습니다');
  };

  const handleNext = () => {
    onNext({ title, prize, guide });
  };

  return (
    <Box
      sx={{
        minHeight: '100vh',
        bgcolor: colors.gray[50],
        pt: { xs: 5, sm: 8 },
        pb: { xs: 3, sm: 10 },
      }}
    >
      <Container
        maxWidth="lg"
        sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 3, sm: 6 }, px: { xs: 1.5, sm: 8, md: 10 } }}
      >
        {/* Header */}
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: { xs: 1.5, sm: 3 },
            mb: { xs: 3, sm: 10 },
          }}
        >
          <IconButton onClick={onBack} sx={{ width: 40, height: 40 }}>
            <ArrowBack sx={{ fontSize: 20 }} />
          </IconButton>
          <Typography variant="h5" sx={{ ...responsiveText.h3, fontWeight: 700 }}>
            콘텐츠 편집
          </Typography>
        </Box>

        <Grid container spacing={{ xs: 3, sm: 6 }}>
          {/* Preview Section */}
          {/* <Grid item xs={12} md={6}>
            <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: { xs: 3, sm: 6 } }}>
              미리보기
            </Typography>
            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 2, sm: 8 } }}>
                <Box
                  sx={{
                    width: '100%',
                    aspectRatio: '1 / 1',
                    bgcolor: colors.gray[100],
                    borderRadius: 3,
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    p: { xs: 3, sm: 6 },
                    textAlign: 'center',
                  }}
                >
                  <span className="material-icons" style={{ fontSize: 48, marginBottom: 16, color: colors.purple }}>
                    celebration
                  </span>
                  <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: { xs: 1, sm: 2 } }}>
                    {title || '제목을 입력하세요'}
                  </Typography>
                  <Typography variant="body1" color="text.secondary" sx={{ ...responsiveText.body1, mb: { xs: 1, sm: 2 } }}>
                    {prize || '경품을 입력하세요'}
                  </Typography>
                  <Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body2 }}>
                    {guide || '참여 안내를 입력하세요'}
                  </Typography>
                </Box>
              </CardContent>
            </Card>
          </Grid> */}

          {/* Edit Section */}
          <Grid item xs={12} md={6}>
            <Typography
              variant="h6"
              sx={{ ...responsiveText.h4, fontWeight: 700, mb: { xs: 3, sm: 6 } }}
            ></Typography>

            <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
              <CardContent sx={{ p: { xs: 2, sm: 8 } }}>
                <Box
                  sx={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: { xs: 1.5, sm: 2 },
                    mb: { xs: 3, sm: 6 },
                  }}
                >
                  <Edit sx={{ color: colors.purple, fontSize: { xs: 20, sm: 28 } }} />
                  <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700 }}>
                    텍스트 편집
                  </Typography>
                </Box>

                <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 4 } }}>
                  <Box>
                    <TextField
                      fullWidth
                      label="제목"
                      value={title}
                      onChange={(e) => setTitle(e.target.value)}
                      inputProps={{ maxLength: 50 }}
                      helperText={`${title.length}/50자`}
                    />
                  </Box>

                  <Box>
                    <TextField
                      fullWidth
                      label="경품"
                      value={prize}
                      onChange={(e) => setPrize(e.target.value)}
                      inputProps={{ maxLength: 30 }}
                      helperText={`${prize.length}/30자`}
                    />
                  </Box>

                  <Box>
                    <TextField
                      fullWidth
                      label="참여안내"
                      value={guide}
                      onChange={(e) => setGuide(e.target.value)}
                      multiline
                      rows={4}
                      inputProps={{ maxLength: 100 }}
                      helperText={`${guide.length}/100자`}
                    />
                  </Box>
                </Box>
              </CardContent>
            </Card>
          </Grid>
        </Grid>

        {/* Action Buttons */}
        <Box sx={{ display: 'flex', gap: { xs: 2, sm: 4 }, mt: { xs: 8, sm: 20 } }}>
          <Button
            fullWidth
            variant="outlined"
            size="large"
            onClick={handleSave}
            sx={{
              py: { xs: 1.5, sm: 3 },
              borderRadius: 3,
              fontSize: { xs: '0.875rem', sm: '1rem' },
              fontWeight: 600,
              borderWidth: 2,
              '&:hover': {
                borderWidth: 2,
              },
            }}
          >
            저장
          </Button>
          <Button
            fullWidth
            variant="contained"
            size="large"
            onClick={handleNext}
            sx={{
              py: { xs: 1.5, sm: 3 },
              borderRadius: 3,
              fontSize: { xs: '0.875rem', sm: '1rem' },
              fontWeight: 700,
              background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
              '&:hover': {
                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
                opacity: 0.9,
              },
            }}
          >
            다음 단계
          </Button>
        </Box>
      </Container>
    </Box>
  );
}
