import { useState, useCallback, useRef, useEffect } 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());

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

      <Card>
        <CardContent>
          <Box component="form" onSubmit={handleSubmit}>
            <Grid container spacing={3}>
              <Grid size={{ xs: 12, sm: 4 }}>
                <TextField
                  label="Work Order Number"
                  required
                  fullWidth
                  value={form.workOrderNumber}
                  onChange={(e) => handleChange('workOrderNumber', e.target.value)}
                />
              </Grid>

              <Grid size={{ xs: 12, sm: 4 }}>
                <TextField
                  label="Purchase Order Number"
                  fullWidth
                  value={form.poNumber ?? ''}
                  onChange={(e) => handleChange('poNumber', e.target.value)}
                />
              </Grid>

              <Grid size={{ xs: 12, sm: 4 }}>
                <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 }}>
                {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>
                )}
              </Grid>

              <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, sm: 6 }}>
                <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 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 size={{ xs: 12 }}>
                <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
                  <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>
              </Grid>
            </Grid>
          </Box>
        </CardContent>
      </Card>
    </Box>
  );
}