/**
 * @ai-summary Community station review card for admin approval workflow
 */

import React, { useState } from 'react';
import {
  Card,
  CardContent,
  CardActions,
  Typography,
  Box,
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Chip,
  Grid,
} from '@mui/material';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CancelIcon from '@mui/icons-material/Cancel';
import { CommunityStation } from '../../stations/types/community-stations.types';

interface CommunityStationReviewCardProps {
  station: CommunityStation;
  onApprove: (id: string) => void;
  onReject: (id: string, reason: string) => void;
  isLoading?: boolean;
}

/**
 * Card showing full station details for admin review
 * Responsive design with 44px minimum touch targets
 */
export const CommunityStationReviewCard: React.FC<CommunityStationReviewCardProps> = ({
  station,
  onApprove,
  onReject,
  isLoading = false,
}) => {
  const [openRejectDialog, setOpenRejectDialog] = useState(false);
  const [rejectionReason, setRejectionReason] = useState('');

  const handleApprove = () => {
    onApprove(station.id);
  };

  const handleRejectClick = () => {
    setOpenRejectDialog(true);
  };

  const handleRejectConfirm = () => {
    if (rejectionReason.trim()) {
      onReject(station.id, rejectionReason);
      setOpenRejectDialog(false);
      setRejectionReason('');
    }
  };

  const octaneLabel = station.has93Octane
    ? station.has93OctaneEthanolFree
      ? '93 Octane · Ethanol Free'
      : '93 Octane · w/ Ethanol'
    : 'No 93 Octane';

  return (
    <>
      <Card
        sx={{
          transition: 'transform 0.2s, box-shadow 0.2s',
          '&:hover': {
            transform: 'translateY(-2px)',
            boxShadow: 3,
          },
        }}
      >
        <CardContent>
          {/* Station name and location */}
          <Typography variant="h6" sx={{ mb: 1 }}>
            {station.name}
          </Typography>

          <Box sx={{ mb: 2, display: 'flex', flexDirection: 'column', gap: 0.5 }}>
            <Typography variant="body2" color="textSecondary">
              {station.address}
            </Typography>
            {(station.city || station.state || station.zipCode) && (
              <Typography variant="body2" color="textSecondary">
                {[station.city, station.state, station.zipCode].filter(Boolean).join(', ')}
              </Typography>
            )}
          </Box>

          {/* Details grid */}
          <Grid container spacing={1} sx={{ mb: 2 }}>
            {station.brand && (
              <Grid item xs={6}>
                <Typography variant="caption" color="textSecondary" display="block">
                  Brand
                </Typography>
                <Typography variant="body2">{station.brand}</Typography>
              </Grid>
            )}
            <Grid item xs={station.brand ? 6 : 12}>
              <Typography variant="caption" color="textSecondary" display="block">
                93 Octane Status
              </Typography>
              <Chip label={octaneLabel} size="small" color="success" />
            </Grid>
            {station.price93 && (
              <Grid item xs={6}>
                <Typography variant="caption" color="textSecondary" display="block">
                  Price
                </Typography>
                <Typography variant="body2">${station.price93.toFixed(3)}</Typography>
              </Grid>
            )}
          </Grid>

          {/* Coordinates */}
          <Box sx={{ mb: 2, p: 1, bgcolor: 'grey.100', borderRadius: 1 }}>
            <Typography variant="caption" color="textSecondary">
              Latitude: {station.latitude.toFixed(8)}
            </Typography>
            <Typography variant="caption" color="textSecondary" display="block">
              Longitude: {station.longitude.toFixed(8)}
            </Typography>
          </Box>

          {/* Notes */}
          {station.notes && (
            <Box sx={{ mb: 2 }}>
              <Typography variant="caption" color="textSecondary">
                Notes:
              </Typography>
              <Typography variant="body2" sx={{ p: 1, bgcolor: 'grey.50', borderRadius: 1, mt: 0.5 }}>
                {station.notes}
              </Typography>
            </Box>
          )}

          {/* Submission info */}
          <Box sx={{ pt: 1, borderTop: '1px solid #e0e0e0' }}>
            <Typography variant="caption" color="textSecondary" display="block">
              Submitted by: {station.submittedBy}
            </Typography>
            <Typography variant="caption" color="textSecondary" display="block">
              Date: {new Date(station.createdAt).toLocaleDateString()}
            </Typography>
          </Box>
        </CardContent>

        {/* Action buttons */}
        <CardActions sx={{ gap: 1, minHeight: '44px', justifyContent: 'flex-end' }}>
          <Button
            variant="outlined"
            color="error"
            onClick={handleRejectClick}
            disabled={isLoading}
            startIcon={<CancelIcon />}
            sx={{ minHeight: '44px' }}
          >
            Reject
          </Button>
          <Button
            variant="contained"
            color="success"
            onClick={handleApprove}
            disabled={isLoading}
            startIcon={<CheckCircleIcon />}
            sx={{ minHeight: '44px' }}
          >
            Approve
          </Button>
        </CardActions>
      </Card>

      {/* Rejection dialog */}
      <Dialog open={openRejectDialog} onClose={() => setOpenRejectDialog(false)} maxWidth="sm" fullWidth>
        <DialogTitle>Reject Station Submission</DialogTitle>
        <DialogContent sx={{ pt: 2 }}>
          <TextField
            autoFocus
            fullWidth
            multiline
            rows={4}
            label="Rejection Reason"
            placeholder="e.g., Incorrect location, duplicate entry, invalid address..."
            value={rejectionReason}
            onChange={(e) => setRejectionReason(e.target.value)}
            variant="outlined"
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpenRejectDialog(false)}>Cancel</Button>
          <Button
            onClick={handleRejectConfirm}
            variant="contained"
            color="error"
            disabled={!rejectionReason.trim() || isLoading}
          >
            Reject
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default CommunityStationReviewCard;
