import { useRouter } from 'next/router';
import { FormEvent, useState } from 'react';
import Layout from '../../components/Layout';
import { api } from '../../lib/api';
import { useRequireAuth } from '../../lib/auth-context';

export default function NewJobPage() {
  const { user, activeOrg, loading } = useRequireAuth();
  const router = useRouter();
  const [form, setForm] = useState({ ticketNumber: '', title: '', address: '', description: '', dueAt: '' });
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  const set = (key: keyof typeof form) => (e: { target: { value: string } }) =>
    setForm((f) => ({ ...f, [key]: e.target.value }));

  const onSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!activeOrg) {
      return;
    }
    setError(null);
    setSubmitting(true);
    try {
      const job = await api.post<{ id: string }>(`/api/orgs/${activeOrg.org.id}/jobs`, {
        ticketNumber: form.ticketNumber,
        title: form.title,
        address: form.address || undefined,
        description: form.description || undefined,
        dueAt: form.dueAt ? new Date(form.dueAt).toISOString() : undefined,
      });
      router.push(`/jobs/${job.id}`);
    } catch (err: any) {
      setError(err.message || 'Failed to create job');
      setSubmitting(false);
    }
  };

  if (loading || !user) {
    return null;
  }

  return (
    <Layout title="New job">
      <h1>New job</h1>
      <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: 480 }}>
        <label>
          Ticket number *
          <input value={form.ticketNumber} onChange={set('ticketNumber')} required style={{ width: '100%', padding: '0.5rem' }} />
        </label>
        <label>
          Title *
          <input value={form.title} onChange={set('title')} required style={{ width: '100%', padding: '0.5rem' }} />
        </label>
        <label>
          Address / dig site
          <input value={form.address} onChange={set('address')} style={{ width: '100%', padding: '0.5rem' }} />
        </label>
        <label>
          Description
          <textarea value={form.description} onChange={set('description')} rows={4} style={{ width: '100%', padding: '0.5rem' }} />
        </label>
        <label>
          Locate-by date
          <input type="datetime-local" value={form.dueAt} onChange={set('dueAt')} style={{ width: '100%', padding: '0.5rem' }} />
        </label>
        {error && <p style={{ color: '#c62828', margin: 0 }}>{error}</p>}
        <button type="submit" disabled={submitting} style={{ padding: '0.6rem' }}>
          {submitting ? 'Creating…' : 'Create job'}
        </button>
      </form>
    </Layout>
  );
}