"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { trpc } from "@/trpc/client";
import { PageHeader } from "@/components/layouts/page-header";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export default function NewItemPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    code: "",
    name: "",
    description: "",
    unit: "",
    categoryId: "",
    initialRate: "",
    defaultWeight: "",
  });

  const categoriesQuery = trpc.category.list.useQuery();
  const { data: defaultCategory } = trpc.settings.getDefaultCategory.useQuery();
  const createMutation = trpc.item.create.useMutation({
    onSuccess: () => router.push("/items"),
  });

  useEffect(() => {
    if (defaultCategory?.id && !formData.categoryId) {
      setFormData((prev) => ({ ...prev, categoryId: defaultCategory.id }));
    }
  }, [defaultCategory]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createMutation.mutate({
      code: formData.code,
      name: formData.name,
      description: formData.description || undefined,
      unit: formData.unit,
      categoryId: formData.categoryId,
      initialRate: formData.initialRate
        ? parseFloat(formData.initialRate)
        : undefined,
      defaultWeight: formData.defaultWeight
        ? parseFloat(formData.defaultWeight)
        : undefined,
    });
  };

  return (
    <div className="space-y-6">
      <PageHeader
        title="Add New Item"
        description="Create a new item in the system"
      />
      <form onSubmit={handleSubmit} className="max-w-lg space-y-4">
        <div>
          <Label htmlFor="code">Code *</Label>
          <Input
            id="code"
            value={formData.code}
            onChange={(e) => setFormData({ ...formData, code: e.target.value })}
            required
          />
        </div>
        <div>
          <Label htmlFor="name">Name *</Label>
          <Input
            id="name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            required
          />
        </div>
        <div>
          <Label htmlFor="description">Description</Label>
          <Input
            id="description"
            value={formData.description}
            onChange={(e) =>
              setFormData({ ...formData, description: e.target.value })
            }
          />
        </div>
        <div>
          <Label htmlFor="unit">Unit *</Label>
          <Input
            id="unit"
            value={formData.unit}
            onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
            required
          />
        </div>
        <div>
          <Label htmlFor="categoryId">Category *</Label>
          <Select
            value={formData.categoryId}
            onValueChange={(v) =>
              setFormData({ ...formData, categoryId: v ?? "" })
            }
            required
          >
            <SelectTrigger id="categoryId">
              <SelectValue placeholder="Select category" />
            </SelectTrigger>
            <SelectContent>
              {categoriesQuery.data?.map((cat: any) => (
                <SelectItem key={cat.id} value={cat.id}>
                  {cat.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label htmlFor="initialRate">Initial Rate</Label>
          <Input
            id="initialRate"
            type="number"
            step="0.01"
            value={formData.initialRate}
            onChange={(e) =>
              setFormData({ ...formData, initialRate: e.target.value })
            }
          />
        </div>
        <div>
          <Label htmlFor="defaultWeight">Default Weight</Label>
          <Input
            id="defaultWeight"
            type="number"
            step="0.0001"
            placeholder="1.0000"
            value={formData.defaultWeight}
            onChange={(e) =>
              setFormData({ ...formData, defaultWeight: e.target.value })
            }
          />
        </div>
        <Button type="submit" disabled={createMutation.isPending}>
          {createMutation.isPending ? "Creating..." : "Create Item"}
        </Button>
      </form>
    </div>
  );
}