import React, { useState, useEffect, useMemo } from 'react';
import axios from 'axios';
import { violationData, violationGroups } from '../data/violations';
import useEmployeeIntelligence from '../hooks/useEmployeeIntelligence';
import CpasBadge from './CpasBadge';
import TierWarning from './TierWarning';
import ViolationHistory from './ViolationHistory';
import ViolationTypeModal from './ViolationTypeModal';
import { useToast } from './ToastProvider';
import { DEPARTMENTS } from '../data/departments';

const s = {
  content:      { padding: '32px 40px', background: '#111217', borderRadius: '10px', color: '#f8f9fa' },
  section:      { background: '#181924', borderLeft: '4px solid #d4af37', padding: '20px', marginBottom: '30px', borderRadius: '4px', border: '1px solid #2a2b3a' },
  sectionTitle: { color: '#f8f9fa', fontSize: '20px', marginBottom: '15px', fontWeight: 700 },
  grid:         { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '15px', marginTop: '15px' },
  item:         { display: 'flex', flexDirection: 'column' },
  label:        { fontWeight: 600, color: '#e5e7f1', marginBottom: '5px', fontSize: '13px' },
  input:        { padding: '10px', border: '1px solid #333544', borderRadius: '4px', fontSize: '14px', fontFamily: 'inherit', background: '#050608', color: '#f8f9fa' },
  fullCol:      { gridColumn: '1 / -1' },
  contextBox:   { background: '#141623', border: '1px solid #333544', borderRadius: '4px', padding: '10px', fontSize: '12px', color: '#d1d3e0', marginTop: '4px' },
  repeatBadge:  { display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '11px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37' },
  repeatWarn:   { background: '#3b2e00', border: '1px solid #d4af37', borderRadius: '4px', padding: '8px 12px', marginTop: '6px', fontSize: '12px', color: '#ffdf8a' },
  pointBox:     { background: '#181200', border: '2px solid #d4af37', padding: '15px', borderRadius: '6px', marginTop: '15px', textAlign: 'center' },
  pointValue:   { fontSize: '24px', fontWeight: 'bold', color: '#ffd666', margin: '10px 0' },
  scoreRow:     { display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '14px', flexWrap: 'wrap' },
  btnRow:       { display: 'flex', gap: '15px', justifyContent: 'center', marginTop: '30px', flexWrap: 'wrap' },
  btnPrimary:   { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #d4af37 0%, #ffdf8a 100%)', color: '#000', textTransform: 'uppercase' },
  btnPdf:       { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: 'none', borderRadius: '6px', cursor: 'pointer', background: 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)', color: 'white', textTransform: 'uppercase' },
  btnSecondary: { padding: '15px 40px', fontSize: '16px', fontWeight: 600, border: '1px solid #333544', borderRadius: '6px', cursor: 'pointer', background: '#050608', color: '#f8f9fa', textTransform: 'uppercase' },
  note:         { background: '#141623', borderLeft: '4px solid #2196F3', padding: '15px', margin: '20px 0', borderRadius: '4px', fontSize: '13px', color: '#d1d3e0' },
  ackSection:   { background: '#181924', borderLeft: '4px solid #2196F3', padding: '20px', marginBottom: '30px', borderRadius: '4px', border: '1px solid #2a2b3a' },
  ackHint:      { fontSize: '12px', color: '#9ca0b8', marginTop: '4px', fontStyle: 'italic' },
};

const EMPTY_FORM = {
  employeeId: '', employeeName: '', department: '', supervisor: '', witnessName: '',
  violationType: '', incidentDate: '', incidentTime: '',
  amount: '', minutesLate: '', location: '', additionalDetails: '', points: 1,
  acknowledgedBy: '', acknowledgedDate: '',
};

export default function ViolationForm() {
  const [employees,    setEmployees]    = useState([]);
  const [form,         setForm]         = useState(EMPTY_FORM);
  const [violation,    setViolation]    = useState(null);
  const [status,       setStatus]       = useState(null);
  const [lastViolId,   setLastViolId]   = useState(null);
  const [pdfLoading,   setPdfLoading]   = useState(false);
  const [customTypes,  setCustomTypes]  = useState([]);
  const [typeModal,    setTypeModal]    = useState(null); // null | 'create' | <editing object>

  const toast = useToast();
  const intel = useEmployeeIntelligence(form.employeeId || null);

  useEffect(() => {
    axios.get('/api/employees').then(r => setEmployees(r.data)).catch(() => {});
    fetchCustomTypes();
  }, []);

  const fetchCustomTypes = () => {
    axios.get('/api/violation-types').then(r => setCustomTypes(r.data)).catch(() => {});
  };

  // Build a map of custom types keyed by type_key for fast lookup
  const customTypeMap = useMemo(() =>
    Object.fromEntries(customTypes.map(t => [t.type_key, t])),
    [customTypes]
  );

  // Merge hardcoded and custom violation groups for the dropdown
  const mergedGroups = useMemo(() => {
    const groups = {};
    // Start with all hardcoded groups
    Object.entries(violationGroups).forEach(([cat, items]) => {
      groups[cat] = [...items];
    });
    // Add custom types into their respective category, or create new group
    customTypes.forEach(t => {
      const item = {
        key:        t.type_key,
        name:       t.name,
        category:   t.category,
        minPoints:  t.min_points,
        maxPoints:  t.max_points,
        chapter:    t.chapter     || '',
        description: t.description || '',
        fields:     t.fields,
        isCustom:   true,
        customId:   t.id,
      };
      if (!groups[t.category]) groups[t.category] = [];
      groups[t.category].push(item);
    });
    return groups;
  }, [customTypes]);

  // Resolve a violation definition from either the hardcoded registry or custom types
  const resolveViolation = key => {
    if (violationData[key]) return violationData[key];
    const ct = customTypeMap[key];
    if (ct) return {
      name:        ct.name,
      category:    ct.category,
      chapter:     ct.chapter     || '',
      description: ct.description || '',
      minPoints:   ct.min_points,
      maxPoints:   ct.max_points,
      fields:      ct.fields,
      isCustom:    true,
      customId:    ct.id,
    };
    return null;
  };

  useEffect(() => {
    if (!violation || !form.violationType) return;
    const allTime = intel.countsAllTime[form.violationType];
    if (allTime && allTime.count >= 1 && violation.minPoints !== violation.maxPoints) {
      setForm(prev => ({ ...prev, points: violation.maxPoints }));
    } else {
      setForm(prev => ({ ...prev, points: violation.minPoints }));
    }
  }, [form.violationType, violation, intel.countsAllTime]);

  const handleEmployeeSelect = e => {
    const emp = employees.find(x => x.id === parseInt(e.target.value));
    if (!emp) return;
    setForm(prev => ({ ...prev, employeeId: emp.id, employeeName: emp.name, department: emp.department || '', supervisor: emp.supervisor || '' }));
  };

  const handleViolationChange = e => {
    const key = e.target.value;
    const v   = resolveViolation(key);
    setViolation(v);
    setForm(prev => ({ ...prev, violationType: key, points: v ? v.minPoints : 1 }));
  };

  const handleChange = e => setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));

  const handleSubmit = async e => {
    e.preventDefault();
    if (!form.violationType) { toast.warning('Please select a violation type.'); return; }
    if (!form.employeeName)  { toast.warning('Please enter an employee name.'); return; }
    try {
      const empRes     = await axios.post('/api/employees', { name: form.employeeName, department: form.department, supervisor: form.supervisor });
      const employeeId = empRes.data.id;
      const violRes    = await axios.post('/api/violations', {
        employee_id:    employeeId,
        violation_type: form.violationType,
        violation_name: violation?.name || form.violationType,
        category:       violation?.category || 'General',
        points:         parseInt(form.points),
        incident_date:  form.incidentDate,
        incident_time:  form.incidentTime  || null,
        location:       form.location       || null,
        details:        form.additionalDetails || null,
        witness_name:   form.witnessName    || null,
        acknowledged_by:   form.acknowledgedBy   || null,
        acknowledged_date: form.acknowledgedDate || null,
      });

      const newId = violRes.data.id;
      setLastViolId(newId);

      const empList = await axios.get('/api/employees');
      setEmployees(empList.data);

      toast.success(`Violation #${newId} recorded — click Download PDF to save the document.`);
      setStatus({ ok: true, msg: `✓ Violation #${newId} recorded — click Download PDF to save the document.` });
      setForm(EMPTY_FORM);
      setViolation(null);
    } catch (err) {
      const msg = err.response?.data?.error || err.message;
      toast.error(`Failed to submit: ${msg}`);
      setStatus({ ok: false, msg: '✗ Error: ' + msg });
    }
  };

  const handleDownloadPdf = async () => {
    if (!lastViolId) return;
    setPdfLoading(true);
    try {
      const response = await axios.get(`/api/violations/${lastViolId}/pdf`, { responseType: 'blob' });
      const url      = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
      const link     = document.createElement('a');
      link.href      = url;
      link.download  = `CPAS_Violation_${lastViolId}.pdf`;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
      toast.success('PDF downloaded successfully.');
    } catch (err) {
      toast.error('PDF generation failed: ' + err.message);
    } finally {
      setPdfLoading(false);
    }
  };

  const showField    = f   => violation?.fields?.includes(f);
  const priorCount90 = key => intel.counts90[key] || 0;
  const isRepeat     = key => (intel.countsAllTime[key]?.count || 0) >= 1;

  return (
    <div style={s.content}>

      <div style={s.section}>
        <h2 style={s.sectionTitle}>Employee Information</h2>

        {intel.score && form.employeeId && (
          <div style={s.scoreRow}>
            <span style={{ fontSize: '13px', color: '#d1d3e0', fontWeight: 600 }}>Current Standing:</span>
            <CpasBadge points={intel.score.active_points} />
            <span style={{ fontSize: '12px', color: '#9ca0b8' }}>
              {intel.score.violation_count} violation{intel.score.violation_count !== 1 ? 's' : ''} in last 90 days
            </span>
          </div>
        )}

        {employees.length > 0 && (
          <div style={{ marginBottom: '12px' }}>
            <label style={s.label}>Quick-Select Existing Employee:</label>
            <select style={s.input} onChange={handleEmployeeSelect} value={form.employeeId || ''}>
              <option value="">-- Select existing or enter new below --</option>
              {employees.map(e => (
                <option key={e.id} value={e.id}>{e.name}{e.department ? ` — ${e.department}` : ''}</option>
              ))}
            </select>
          </div>
        )}

        <div style={s.grid}>
          {[['employeeName','Employee Name','John Doe'],['supervisor','Supervisor Name','Jane Smith'],['witnessName','Witness Name (Officer)','Officer Name']].map(([name,label,ph]) => (
            <div key={name} style={s.item}>
              <label style={s.label}>{label}:</label>
              <input style={s.input} type="text" name={name} value={form[name]} onChange={handleChange} placeholder={ph} />
            </div>
          ))}
          <div style={s.item}>
            <label style={s.label}>Department:</label>
            <select style={s.input} name="department" value={form.department} onChange={handleChange}>
              <option value="">-- Select Department --</option>
              {DEPARTMENTS.map(d => (
                <option key={d} value={d}>{d}</option>
              ))}
            </select>
          </div>
        </div>
      </div>

      <form onSubmit={handleSubmit}>
        <div style={s.section}>
          <h2 style={s.sectionTitle}>Violation Details</h2>
          <div style={s.grid}>

            <div style={{ ...s.item, ...s.fullCol }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '5px' }}>
                <label style={{ ...s.label, marginBottom: 0 }}>Violation Type:</label>
                <div style={{ display: 'flex', gap: '6px' }}>
                  {violation?.isCustom && (
                    <button
                      type="button"
                      onClick={() => setTypeModal(customTypeMap[form.violationType])}
                      style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #4caf50', background: '#1a2e1a', color: '#4caf50', cursor: 'pointer', fontWeight: 600 }}
                    >
                      Edit Type
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={() => setTypeModal('create')}
                    style={{ fontSize: '11px', padding: '3px 10px', borderRadius: '4px', border: '1px solid #d4af37', background: '#181200', color: '#ffd666', cursor: 'pointer', fontWeight: 600 }}
                    title="Add a new custom violation type"
                  >
                    + Add Type
                  </button>
                </div>
              </div>
              <select style={s.input} value={form.violationType} onChange={handleViolationChange} required>
                <option value="">-- Select Violation Type --</option>
                {Object.entries(mergedGroups).map(([group, items]) => (
                  <optgroup key={group} label={group}>
                    {items.map(v => {
                      const prior = priorCount90(v.key);
                      return (
                        <option key={v.key} value={v.key}>
                          {v.name}{v.isCustom ? ' ✦' : ''}{prior > 0 ? ` ★ ${prior}x in 90 days` : ''}
                        </option>
                      );
                    })}
                  </optgroup>
                ))}
              </select>

              {violation && (
                <div style={s.contextBox}>
                  <strong>{violation.name}</strong>
                  {violation.isCustom && (
                    <span style={{ display: 'inline-block', marginLeft: '8px', padding: '1px 7px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#1a2e1a', color: '#4caf50', border: '1px solid #4caf50' }}>
                      Custom
                    </span>
                  )}
                  {isRepeat(form.violationType) && form.employeeId && (
                    <span style={s.repeatBadge}>
                      ★ Repeat — {intel.countsAllTime[form.violationType]?.count}x prior
                    </span>
                  )}
                  <br />{violation.description}<br />
                  <span style={{ fontSize: '11px', color: '#a0a3ba' }}>{violation.chapter}</span>
                </div>
              )}

              {violation && isRepeat(form.violationType) && form.employeeId && violation.minPoints !== violation.maxPoints && (
                <div style={s.repeatWarn}>
                  <strong>Repeat offense detected.</strong> Point slider set to maximum ({violation.maxPoints} pts) per recidivist policy. Adjust if needed.
                </div>
              )}
            </div>

            <div style={s.item}>
              <label style={s.label}>Incident Date:</label>
              <input style={s.input} type="date" name="incidentDate" value={form.incidentDate} onChange={handleChange} required />
            </div>

            {showField('time') && (
              <div style={s.item}>
                <label style={s.label}>Incident Time:</label>
                <input style={s.input} type="time" name="incidentTime" value={form.incidentTime} onChange={handleChange} />
              </div>
            )}
            {showField('minutes') && (
              <div style={s.item}>
                <label style={s.label}>Minutes Late:</label>
                <input style={s.input} type="number" name="minutesLate" value={form.minutesLate} onChange={handleChange} placeholder="15" />
              </div>
            )}
            {showField('amount') && (
              <div style={s.item}>
                <label style={s.label}>Amount / Value:</label>
                <input style={s.input} type="text" name="amount" value={form.amount} onChange={handleChange} placeholder="$150.00" />
              </div>
            )}
            {showField('location') && (
              <div style={{ ...s.item, ...s.fullCol }}>
                <label style={s.label}>Location / Context:</label>
                <input style={s.input} type="text" name="location" value={form.location} onChange={handleChange} placeholder="Office, vehicle, facility area, etc." />
              </div>
            )}
            {showField('description') && (
              <div style={{ ...s.item, ...s.fullCol }}>
                <label style={s.label}>Additional Details:</label>
                <textarea style={{ ...s.input, resize: 'vertical', minHeight: '80px' }} name="additionalDetails" value={form.additionalDetails} onChange={handleChange} placeholder="Provide specific context, observations, or details..." />
              </div>
            )}
          </div>

          {intel.score && violation && (
            <TierWarning
              currentPoints={intel.score.active_points}
              addingPoints={parseInt(form.points) || 0}
            />
          )}

          {violation && (
            <div style={s.pointBox}>
              <h4 style={{ color: '#ffdf8a', marginBottom: '10px' }}>CPAS Point Assessment</h4>
              <p style={{ margin: 0 }}>
                {violation.name}: {violation.minPoints === violation.maxPoints
                  ? `${violation.minPoints} Points (Fixed)`
                  : `${violation.minPoints}–${violation.maxPoints} Points`}
              </p>
              <input style={{ width: '100%', marginTop: '10px' }} type="range" name="points"
                min={violation.minPoints} max={violation.maxPoints}
                value={form.points} onChange={handleChange} />
              <div style={s.pointValue}>{form.points} Points</div>
              <p style={{ fontSize: '12px', color: '#d1d3e0' }}>Adjust to reflect severity and context</p>
            </div>
          )}
        </div>

        {/* Acknowledgment Signature Section */}
        <div style={s.ackSection}>
          <h2 style={{ ...s.sectionTitle, fontSize: '17px' }}>Employee Acknowledgment</h2>
          <p style={{ fontSize: '12px', color: '#9ca0b8', marginBottom: '14px', lineHeight: 1.6 }}>
            If the employee is present and acknowledges receipt of this violation, enter their name and the date below.
            This replaces the blank signature line on the PDF with a recorded acknowledgment.
          </p>
          <div style={s.grid}>
            <div style={s.item}>
              <label style={s.label}>Acknowledged By (Employee Name):</label>
              <input style={s.input} type="text" name="acknowledgedBy" value={form.acknowledgedBy} onChange={handleChange} placeholder="Employee's printed name" />
              <div style={s.ackHint}>Leave blank if employee is not present or declines to sign</div>
            </div>
            <div style={s.item}>
              <label style={s.label}>Acknowledgment Date:</label>
              <input style={s.input} type="date" name="acknowledgedDate" value={form.acknowledgedDate} onChange={handleChange} />
              <div style={s.ackHint}>Date the employee received and acknowledged this document</div>
            </div>
          </div>
        </div>

        <div style={s.btnRow}>
          <button type="submit" style={s.btnPrimary}>Submit Violation</button>
          <button type="button" style={s.btnSecondary} onClick={() => { setForm(EMPTY_FORM); setViolation(null); setStatus(null); setLastViolId(null); }}>
            Clear Form
          </button>
        </div>

        {lastViolId && status?.ok && (
          <div style={{ textAlign: 'center', marginTop: '16px' }}>
            <button
              type="button"
              style={{ ...s.btnPdf, opacity: pdfLoading ? 0.7 : 1 }}
              onClick={handleDownloadPdf}
              disabled={pdfLoading}
            >
              {pdfLoading ? '⏳ Generating PDF...' : '⬇ Download PDF'}
            </button>
            <p style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '6px' }}>
              Violation #{lastViolId} — click to download the signed violation document
            </p>
          </div>
        )}

        {status && <div style={status.ok ? { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#053321', color: '#9ef7c1', border: '1px solid #0f5132' } : { marginTop: '15px', padding: '15px', borderRadius: '6px', textAlign: 'center', fontWeight: 600, background: '#3c1114', color: '#ffb3b8', border: '1px solid #f5c6cb' }}>{status.msg}</div>}
      </form>

      {form.employeeId && (
        <div style={s.section}>
          <h2 style={s.sectionTitle}>Violation History</h2>
          <ViolationHistory history={intel.history} loading={intel.loading} />
        </div>
      )}

      {typeModal && (
        <ViolationTypeModal
          editing={typeModal === 'create' ? null : typeModal}
          onClose={() => setTypeModal(null)}
          onSaved={saved => {
            fetchCustomTypes();
            setTypeModal(null);
            // Auto-select the newly created type; do nothing on delete (saved === null)
            if (saved) {
              const v = {
                name:        saved.name,
                category:    saved.category,
                chapter:     saved.chapter     || '',
                description: saved.description || '',
                minPoints:   saved.min_points,
                maxPoints:   saved.max_points,
                fields:      saved.fields,
                isCustom:    true,
                customId:    saved.id,
              };
              setViolation(v);
              setForm(prev => ({ ...prev, violationType: saved.type_key, points: saved.min_points }));
            } else {
              // Type was deleted — clear selection if it was the active type
              setForm(prev => {
                const stillExists = violationData[prev.violationType] || false;
                return stillExists ? prev : { ...prev, violationType: '', points: 1 };
              });
              setViolation(null);
            }
          }}
        />
      )}

    </div>
  );
}
