"use client";

import { useState } from "react";

import { browserFetch } from "../lib/api";

type Props = {
  makerId: string;
  sourceType: "profile" | "service" | "work";
  sourceId?: string | null;
};

export function InquiryForm({ makerId, sourceType, sourceId }: Props) {
  const [status, setStatus] = useState<string>("");
  const [form, setForm] = useState({
    needText: "",
    sizeText: "",
    hasModel: false,
    materialPreference: "",
    quantity: 1,
    urgency: "medium",
    deliveryType: "shipping"
  });

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("Enviando consulta...");
    try {
      await browserFetch("/inquiries", {
        method: "POST",
        body: JSON.stringify({
          makerId,
          sourceType,
          sourceId,
          ...form
        })
      });
      setStatus("Consulta enviada. Ya puedes seguirla desde tu cuenta.");
      setForm({
        needText: "",
        sizeText: "",
        hasModel: false,
        materialPreference: "",
        quantity: 1,
        urgency: "medium",
        deliveryType: "shipping"
      });
    } catch (error) {
      setStatus(error instanceof Error ? error.message : "No se pudo enviar la consulta");
    }
  }

  return (
    <form className="inquiry-card" onSubmit={onSubmit}>
      <div className="guide-steps">
        <div className="guide-step">
          <div className="step-index">1</div>
          <div>
            <strong>Que quieres hacer?</strong>
            <div className="mini-note">Cuanto mejor expliques el uso, mejor se ajusta la respuesta del maker.</div>
          </div>
        </div>
      </div>

      <div className="inquiry-section">
        <textarea
          className="textarea"
          placeholder="Quiero algo muy parecido, necesito modificar una pieza o tengo una idea similar..."
          value={form.needText}
          onChange={(event) => setForm((current) => ({ ...current, needText: event.target.value }))}
          required
        />
      </div>

      <div className="inquiry-section">
        <strong>Detalles que ayudan al maker</strong>
        <div className="input-grid-compact">
          <input
            className="field"
            placeholder="Tamano o medidas aproximadas"
            value={form.sizeText}
            onChange={(event) => setForm((current) => ({ ...current, sizeText: event.target.value }))}
          />
          <input
            className="field"
            placeholder="Material preferido"
            value={form.materialPreference}
            onChange={(event) => setForm((current) => ({ ...current, materialPreference: event.target.value }))}
          />
          <input
            className="field"
            type="number"
            min={1}
            value={form.quantity}
            onChange={(event) => setForm((current) => ({ ...current, quantity: Number(event.target.value) }))}
          />
          <select
            className="select"
            value={form.urgency}
            onChange={(event) => setForm((current) => ({ ...current, urgency: event.target.value }))}
          >
            <option value="low">Sin urgencia</option>
            <option value="medium">Esta semana</option>
            <option value="high">Urgente</option>
          </select>
        </div>
      </div>

      <div className="input-grid-compact">
        <label className="choice-chip">
          <input
            type="checkbox"
            checked={form.hasModel}
            onChange={(event) => setForm((current) => ({ ...current, hasModel: event.target.checked }))}
          />
          <span>Ya tengo archivo o pieza de referencia</span>
        </label>
        <select
          className="select"
          value={form.deliveryType}
          onChange={(event) => setForm((current) => ({ ...current, deliveryType: event.target.value }))}
        >
          <option value="shipping">Necesito envio</option>
          <option value="local">Puedo retirar personalmente</option>
        </select>
      </div>

      <button className="button button-primary" type="submit">Enviar consulta</button>
      {status ? <p className="muted">{status}</p> : null}
    </form>
  );
}