'use client';

import { createExpense } from '@/app/admin/accounts/expenses/actions';

function todayInput() {
  return new Date().toISOString().slice(0, 10);
}

export default function ExpenseForm() {
  return (
    <form action={createExpense} className="mt-10 space-y-6 max-w-2xl" encType="multipart/form-data">
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label htmlFor="date" className="tag-label mb-2 block">
            Date
          </label>
          <input
            id="date"
            name="date"
            type="date"
            defaultValue={todayInput()}
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          />
        </div>
        <div>
          <label htmlFor="category" className="tag-label mb-2 block">
            Category
          </label>
          <select
            id="category"
            name="category"
            defaultValue="Stock purchases"
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
          >
            <option>Stock purchases</option>
            <option>Postage</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <div>
        <label htmlFor="description" className="tag-label mb-2 block">
          Description
        </label>
        <input
          id="description"
          name="description"
          required
          className="w-full border border-line bg-paper px-3 py-2 text-sm"
          placeholder="e.g. Monthly internet bill, Royal Mail postage"
        />
      </div>

      <div>
        <label htmlFor="amount" className="tag-label mb-2 block">
          Amount (£)
        </label>
        <input
          id="amount"
          name="amount"
          type="number"
          step="0.01"
          min="0"
          required
          className="w-full border border-line bg-paper px-3 py-2 text-sm"
          placeholder="0.00"
        />
      </div>

      <div>
        <label htmlFor="receipt" className="tag-label mb-2 block">
          Receipt (optional)
        </label>
        <input
          id="receipt"
          name="receipt"
          type="file"
          accept="application/pdf,image/*"
          className="w-full border border-line bg-paper px-3 py-2 text-sm"
        />
        <p className="mt-1 text-xs text-muted">PDF or photo, up to 8 MB.</p>
      </div>

      <div>
        <label htmlFor="notes" className="tag-label mb-2 block">
          Notes (optional)
        </label>
        <input
          id="notes"
          name="notes"
          className="w-full border border-line bg-paper px-3 py-2 text-sm"
          placeholder="Any additional details"
        />
      </div>

      <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
        Record expense
      </button>
    </form>
  );
}