import { useState } from "preact/hooks";

interface AddLeaseDialogProps {
  leases: any[];
  propertyId: string;
  propertyTitle: string;
  propertyAddress: string;
  propertyCost?: number; // New prop for default rent
  popupKey?: number;
  onClose?: () => void;
}

export default function AddLeaseDialog(
  {
    leases,
    propertyId,
    propertyTitle,
    propertyAddress,
    propertyCost,
    onClose = () => {},
  }: AddLeaseDialogProps,
) {
  const [form, setForm] = useState({
    property_id: propertyId,
    title: propertyTitle + " " + propertyAddress,

    start_date: new Date().toISOString().split("T")[0],
    end_date: new Date(new Date().getTime() + 12 * 30 * 24 * 60 * 60 * 1000)
      .toISOString().split("T")[0],
    rent: propertyCost !== undefined ? String(propertyCost) : "",
    security_deposit: "",
    lease_status: "",
  });

  return (
    <div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
      <form
        method="POST"
        action="/api/create/lease"
        class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
      >
        <h3 class="text-xl font-bold mb-2">Add Lease</h3>
        <div class="bg-gray-100 rounded p-2 mb-2 text-sm">
          <div>
            <span class="font-semibold">{propertyTitle}</span>
          </div>
          <div>{propertyAddress}</div>
        </div>
        <input
          name="sender"
          type="hidden"
          value={typeof location !== "undefined" ? location.pathname : ""}
        />
        <input
          name="property_id"
          type="hidden"
          value={form.property_id}
          readOnly
        />
        <label class="block text-sm font-medium mb-1">Lease Title</label>
        <input
          name="title"
          class="border p-2 rounded w-full mb-2"
          value={form.title}
          onInput={(e) =>
            setForm({ ...form, title: (e.target as HTMLInputElement).value })}
          required
        />
        <input
          name="start_date"
          type="date"
          placeholder="Start Date"
          required
          class="border p-2 rounded w-full"
          value={form.start_date}
          onInput={(e) =>
            setForm({ ...form, start_date: e.currentTarget.value })}
        />
        <input
          name="end_date"
          type="date"
          placeholder="End Date"
          class="border p-2 rounded w-full"
          value={form.end_date}
          onInput={(e) => setForm({ ...form, end_date: e.currentTarget.value })}
        />
        <input
          name="rent"
          type="number"
          placeholder="Rent"
          required
          class="border p-2 rounded w-full"
          value={form.rent}
          onInput={(e) => setForm({ ...form, rent: e.currentTarget.value })}
        />
        <input
          name="security_deposit"
          type="number"
          placeholder="Security Deposit"
          class="border p-2 rounded w-full"
          value={form.security_deposit}
          onInput={(e) =>
            setForm({ ...form, security_deposit: e.currentTarget.value })}
        />
        <input
          name="lease_status"
          placeholder="Lease Status"
          class="border p-2 rounded w-full"
          value={form.lease_status}
          onInput={(e) =>
            setForm({ ...form, lease_status: e.currentTarget.value })}
        />
        <div class="flex justify-end gap-2 mt-4">
          <button
            type="button"
            class="px-4 py-2 rounded border"
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 rounded bg-blue-600 text-white"
          >
            Create Lease
          </button>
        </div>
      </form>
    </div>
  );
}