proposal-system/web/src/pages/proposals/form/ProposalFormPage.tsx

import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMutation } from '@tanstack/react-query';
import {
  Box,
  Typography,
  Card,
  CardContent,
  TextField,
  Button,
  Grid,
  MenuItem,
  Autocomplete,
  CircularProgress,
} from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import { toast } from 'react-toastify';
import { proposalsApi, type CreateProposalRequest } from '../../../lib/api/proposals';
import { sitesApi, type Site } from '../../../lib/api/sites';
import { SERVICE_CATEGORIES, PRIORITIES, PRIORITY_LABELS } from '../../../constants';
import { queryClient } from '../../../lib/queryClient';

const CUSTOMERS = ['Amazon Services, LLC'] as const;

export default function ProposalFormPage() {
  const navigate = useNavigate();

  const [form, setForm] = useState<CreateProposalRequest>({
    workOrderNumber: '',
    customerName: CUSTOMERS[0],
    customerAddress: '',
    scopeOfWork: '',
    serviceCategory: '',
    priority: 'Standard',
    notes: '',
  });

  const [vendorFile, setVendorFile] = useState<File | null>(null);
  const [siteOptions, setSiteOptions] = useState<Site[]>([]);
  const [siteLoading, setSiteLoading] = useState(false);
  const [siteInputValue, setSiteInputValue] = useState('');
  const [manualEntry, setManualEntry] = useState(false);
  const [manualSiteCode, setManualSiteCode] = useState('');
  const [manualStreet, setManualStreet] = useState('');
  const [manualCity, setManualCity] = useState('');
  const [manualState, setManualState] = useState('');
  const [manualZip, setManualZip] = useState('');
  const [customCategory, setCustomCategory] = useState('');
  const siteDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    return () => {
      if (siteDebounceRef.current) clearTimeout(siteDebounceRef.current);
    };
  }, []);

  useEffect(() => {
    if (!manualEntry) return;
    const addressParts = [
      manualStreet,
      manualCity,
      [manualState, manualZip].filter(Boolean).join(' '),
    ].filter(Boolean);
    const address = addressParts.join(', ');
    const display =
      manualSiteCode && address
        ? `${manualSiteCode} — ${address}`
        : manualSiteCode || address;
    setForm((prev) => ({ ...prev, customerAddress: display }));
  }, [manualEntry, manualSiteCode, manualStreet, manualCity, manualState, manualZip]);

  const handleChange = (field: keyof CreateProposalRequest, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
  };

  const searchSites = useCallback(async (query: string) => {
    if (query.length < 2) {
      setSiteOptions([]);
      return;
    }
    setSiteLoading(true);
    try {
      const results = await sitesApi.search(query);
      setSiteOptions(results);
    } catch {
      setSiteOptions([]);
    } finally {
      setSiteLoading(false);
    }
  }, []);

  const createMutation = useMutation({
    mutationFn: async () => {
      const submitData = { ...form };
      if (form.serviceCategory === 'Other' && customCategory.trim()) {
        submitData.notes = `[Category: ${customCategory.trim()}]\n${form.notes || ''}`.trim();
      }
      const proposal = await proposalsApi.create(submitData);

      if (vendorFile) {
        try {
          const { uploadUrl, vendorProposalId } = await proposalsApi.uploadAttachment(proposal.id, vendorFile.name);
          await fetch(uploadUrl, {
            method: 'PUT',
            body: vendorFile,
            headers: { 'Content-Type': vendorFile.type || 'application/pdf' },
          });
          await proposalsApi.confirmUpload(proposal.id, vendorProposalId);
        } catch {
          toast.warning(`Proposal ${proposal.proposalNumber} was created, but vendor PDF upload failed. You can re-upload from the proposal detail page.`);
        }
      }

      return proposal;
    },
    onSuccess: (proposal) => {
      queryClient.invalidateQueries({ queryKey: ['proposals'] });
      toast.success(`Proposal ${proposal.proposalNumber} submitted`);
      navigate(`/proposals/${proposal.id}`);
    },
    onError: (error: Error) => {
      toast.error(error.message || 'Failed to submit proposal');
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createMutation.mutate();
  };

  const isValid =
    form.workOrderNumber.trim() &&
    form.customerName.trim() &&
    form.customerAddress.trim() &&
    form.scopeOfWork.trim() &&
    form.serviceCategory &&
    (form.serviceCategory !== 'Other' || customCategory.trim());

  const missingFields = useMemo(() => {
    const missing: string[] = [];
    if (!form.workOrderNumber.trim()) missing.push('Work Order Number');
    if (!form.customerAddress.trim()) missing.push('Site address');
    if (!form.serviceCategory) missing.push('Service Category');
    if (form.serviceCategory === 'Other' && !customCategory.trim()) missing.push('Specify category');
    if (!form.scopeOfWork.trim()) missing.push('Scope of Work');
    return missing;
  }, [form.workOrderNumber, form.customerAddress, form.serviceCategory, form.scopeOfWork, customCategory]);

  return (
    <Box>
      <Typography variant="h5" sx={{ mb: 3 }}>
        New Proposal Request
      </Typography>

      <Box component="form" onSubmit={handleSubmit}>
        <Card sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>Job Details</Typography>
            <Grid container spacing={3}>
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  label="Work Order Number"
                  required
                  fullWidth
                  value={form.workOrderNumber}
                  onChange={(e) => handleChange('workOrderNumber', e.target.value)}
                />
              </Grid>
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  label="Purchase Order Number"
                  fullWidth
                  value={form.poNumber ?? ''}
                  onChange={(e) => handleChange('poNumber', e.target.value)}
                />
              </Grid>
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  label="Customer"
                  required
                  fullWidth
                  select
                  value={form.customerName}
                  onChange={(e) => handleChange('customerName', e.target.value)}
                >
                  {CUSTOMERS.map((name) => (
                    <MenuItem key={name} value={name}>
                      {name}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
              <Grid size={{ xs: 12, sm: 6, md: 3 }}>
                <TextField
                  label="Priority"
                  required
                  fullWidth
                  select
                  value={form.priority}
                  onChange={(e) => handleChange('priority', e.target.value)}
                >
                  {PRIORITIES.map((p) => (
                    <MenuItem key={p} value={p}>
                      {PRIORITY_LABELS[p] || p}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
            </Grid>
          </CardContent>
        </Card>

        <Card sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>Site & Location</Typography>
            {manualEntry ? (
              <Box>
                <Grid container spacing={2}>
                  <Grid size={{ xs: 12, sm: 4 }}>
                    <TextField
                      label="Site Code"
                      fullWidth
                      value={manualSiteCode}
                      onChange={(e) => setManualSiteCode(e.target.value)}
                      placeholder="e.g. LGB8"
                    />
                  </Grid>
                  <Grid size={{ xs: 12, sm: 8 }}>
                    <TextField
                      label="Street Address"
                      required
                      fullWidth
                      value={manualStreet}
                      onChange={(e) => setManualStreet(e.target.value)}
                    />
                  </Grid>
                  <Grid size={{ xs: 12, sm: 5 }}>
                    <TextField
                      label="City"
                      required
                      fullWidth
                      value={manualCity}
                      onChange={(e) => setManualCity(e.target.value)}
                    />
                  </Grid>
                  <Grid size={{ xs: 6, sm: 3 }}>
                    <TextField
                      label="State"
                      required
                      fullWidth
                      value={manualState}
                      onChange={(e) => setManualState(e.target.value)}
                      placeholder="e.g. CA"
                    />
                  </Grid>
                  <Grid size={{ xs: 6, sm: 4 }}>
                    <TextField
                      label="Zip Code"
                      required
                      fullWidth
                      value={manualZip}
                      onChange={(e) => setManualZip(e.target.value)}
                    />
                  </Grid>
                </Grid>
                <Button
                  variant="text"
                  size="small"
                  sx={{ mt: 1 }}
                  onClick={() => {
                    setManualEntry(false);
                    setManualSiteCode('');
                    setManualStreet('');
                    setManualCity('');
                    setManualState('');
                    setManualZip('');
                    setSiteInputValue('');
                    handleChange('customerAddress', '');
                  }}
                >
                  Search sites instead
                </Button>
              </Box>
            ) : (
              <Box>
                <Autocomplete
                  options={siteOptions}
                  filterOptions={(x) => x}
                  getOptionLabel={(opt) =>
                    opt.fullAddress
                      ? `${opt.siteCode} — ${opt.fullAddress}`
                      : opt.siteCode
                  }
                  loading={siteLoading}
                  inputValue={siteInputValue}
                  onInputChange={(_, value, reason) => {
                    if (reason === 'input') {
                      setSiteInputValue(value);
                      if (siteDebounceRef.current) clearTimeout(siteDebounceRef.current);
                      siteDebounceRef.current = setTimeout(() => searchSites(value), 300);
                    }
                  }}
                  onChange={(_, value) => {
                    if (value) {
                      const display = value.fullAddress
                        ? `${value.siteCode} — ${value.fullAddress}`
                        : value.siteCode;
                      handleChange('customerAddress', display);
                      setSiteInputValue(display);
                    } else {
                      handleChange('customerAddress', '');
                      setSiteInputValue('');
                    }
                  }}
                  noOptionsText={
                    siteLoading
                      ? 'Searching...'
                      : siteInputValue.length >= 2
                        ? `No verified sites found for "${siteInputValue}"`
                        : 'Type a site code to search (e.g. LGB8)'
                  }
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      label="Site"
                      required
                      placeholder="Search by site code..."
                      slotProps={{
                        input: {
                          ...params.InputProps,
                          endAdornment: (
                            <>
                              {siteLoading && <CircularProgress size={20} />}
                              {params.InputProps.endAdornment}
                            </>
                          ),
                        },
                      }}
                    />
                  )}
                />
                <Button
                  variant="text"
                  size="small"
                  sx={{ mt: 0.5 }}
                  onClick={() => setManualEntry(true)}
                >
                  Enter address manually
                </Button>
              </Box>
            )}
          </CardContent>
        </Card>

        <Card sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>Work Details</Typography>
            <Grid container spacing={3}>
              <Grid size={{ xs: 12, sm: 6 }}>
                <TextField
                  label="Service Category"
                  required
                  fullWidth
                  select
                  value={form.serviceCategory}
                  onChange={(e) => handleChange('serviceCategory', e.target.value)}
                >
                  {SERVICE_CATEGORIES.map((cat) => (
                    <MenuItem key={cat} value={cat}>
                      {cat}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>

              {form.serviceCategory === 'Other' ? (
                <Grid size={{ xs: 12, sm: 6 }}>
                  <TextField
                    label="Specify Category"
                    required
                    fullWidth
                    value={customCategory}
                    onChange={(e) => setCustomCategory(e.target.value)}
                    placeholder="e.g. Fire Protection"
                  />
                </Grid>
              ) : (
                <Grid size={{ sm: 6 }} sx={{ display: { xs: 'none', sm: 'block' } }} />
              )}

              <Grid size={{ xs: 12 }}>
                <TextField
                  label="Scope of Work"
                  required
                  fullWidth
                  multiline
                  minRows={4}
                  value={form.scopeOfWork}
                  onChange={(e) => handleChange('scopeOfWork', e.target.value)}
                  placeholder="Describe the work needed..."
                />
              </Grid>

              <Grid size={{ xs: 12 }}>
                <TextField
                  label="Notes (optional)"
                  fullWidth
                  multiline
                  minRows={2}
                  value={form.notes}
                  onChange={(e) => handleChange('notes', e.target.value)}
                />
              </Grid>

              <Grid size={{ xs: 12 }}>
                <Button variant="outlined" component="label">
                  {vendorFile ? vendorFile.name : 'Attach Vendor Proposal (PDF)'}
                  <input
                    type="file"
                    hidden
                    accept=".pdf"
                    onChange={(e) => setVendorFile(e.target.files?.[0] || null)}
                  />
                </Button>
              </Grid>
            </Grid>
          </CardContent>
        </Card>

        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end', alignItems: 'center' }}>
          {!isValid && missingFields.length > 0 && (
            <Typography variant="caption" color="text.secondary">
              Complete required fields to submit: {missingFields.join(', ')}
            </Typography>
          )}
          <Button variant="text" onClick={() => navigate(-1)}>
            Cancel
          </Button>
          <Button
            type="submit"
            variant="contained"
            startIcon={<SendIcon />}
            disabled={!isValid || createMutation.isPending}
          >
            {createMutation.isPending ? 'Submitting...' : 'Submit Proposal'}
          </Button>
        </Box>
      </Box>
    </Box>
  );
}