mylegal-stage-law/src/routes/cases.new.tsx

import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
import { z } from "zod";
import { useEffect, useState } from "react";
import { ProtectedLayout } from "@/components/protected-layout";
import { PageContainer, PageHeader } from "@/components/app-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { SearchableSelect } from "@/components/ui/searchable-select";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/lib/auth";
import { ArrowLeft, Loader2 } from "lucide-react";
import { toast } from "sonner";

const search = z.object({ clientId: z.string().optional() });

export const Route = createFileRoute("/cases/new")({
  validateSearch: search,
  component: () => (
    <ProtectedLayout>
      <NewCase />
    </ProtectedLayout>
  ),
});

function NewCase() {
  const { clientId } = Route.useSearch();
  const navigate = useNavigate();
  const { user } = useAuth();
  const [clients, setClients] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);
  const [submitting, setSubmitting] = useState(false);

  const [form, setForm] = useState({
    client_id: clientId ?? "",
    case_number: "",
    title: "",
    practice_area: "",
    description: "",
    status: "intake" as const,
    assigned_attorney_id: user?.id ?? "",
    default_hourly_rate: "",
  });

  useEffect(() => {
    (async () => {
      const [{ data: cs }, { data: us }] = await Promise.all([
        supabase.from("clients").select("id, name").is("archived_at", null).order("name"),
        supabase.from("profiles").select("id, full_name, email").order("full_name"),
      ]);
      setClients(cs ?? []);
      setUsers(us ?? []);
    })();
  }, []);

  useEffect(() => {
    if (user?.id && !form.assigned_attorney_id) {
      setForm((f) => ({ ...f, assigned_attorney_id: user.id }));
    }
  }, [user?.id]);

  // Auto-generate case number suggestion
  useEffect(() => {
    if (!form.case_number) {
      const yr = new Date().getFullYear();
      const rand = Math.floor(1000 + Math.random() * 9000);
      setForm((f) => ({ ...f, case_number: `${yr}-${rand}` }));
    }
  }, []);

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.title.trim() || !form.case_number.trim()) {
      toast.error("Please fill in title and case number.");
      return;
    }
    setSubmitting(true);
    const payload = {
      client_id: form.client_id || null,
      case_number: form.case_number.trim(),
      title: form.title.trim(),
      practice_area: form.practice_area.trim() || null,
      description: form.description.trim() || null,
      status: form.status,
      assigned_attorney_id: form.assigned_attorney_id || null,
      default_hourly_rate: form.default_hourly_rate ? parseFloat(form.default_hourly_rate) : null,
      created_by: user?.id,
    };
    const { data, error } = await supabase.from("cases").insert(payload).select("id").single();
    setSubmitting(false);
    if (error) {
      toast.error("Could not create case", { description: error.message });
      return;
    }
    toast.success("Case created");
    navigate({ to: "/cases/$caseId", params: { caseId: data.id } });
  };

  return (
    <PageContainer>
      <Button variant="ghost" size="sm" asChild className="mb-3 -ml-2">
        <Link to="/cases"><ArrowLeft className="h-4 w-4 mr-1" /> All cases</Link>
      </Button>
      <PageHeader title="New case" description="Open a new matter." />

      <Card className="max-w-2xl border-border/60">
        <CardContent className="p-6">
          <form onSubmit={onSubmit} className="space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Client <span className="text-muted-foreground font-normal">(optional)</span></Label>
                <SearchableSelect
                  value={form.client_id || "__none"}
                  onValueChange={(v) => setForm({ ...form, client_id: v === "__none" ? "" : v })}
                  placeholder="No client"
                  searchPlaceholder="Search clients…"
                  emptyText="No clients found."
                  options={[
                    { value: "__none", label: "No client (attach later)" },
                    ...clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name })),
                  ]}
                />
              </div>
              <div className="space-y-2">
                <Label>Case number</Label>
                <Input value={form.case_number} onChange={(e) => setForm({ ...form, case_number: e.target.value })} required maxLength={50} />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Title</Label>
              <Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} required maxLength={200} />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Practice area</Label>
                <Input
                  value={form.practice_area}
                  onChange={(e) => setForm({ ...form, practice_area: e.target.value })}
                  placeholder="HOA collections, Litigation, Transactional…"
                  maxLength={120}
                />
              </div>
              <div className="space-y-2">
                <Label>Status</Label>
                <Select value={form.status} onValueChange={(v: any) => setForm({ ...form, status: v })}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="intake">Intake</SelectItem>
                    <SelectItem value="active">Active</SelectItem>
                    <SelectItem value="on_hold">On hold</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-2">
                <Label>Assigned attorney</Label>
                <Select value={form.assigned_attorney_id} onValueChange={(v) => setForm({ ...form, assigned_attorney_id: v })}>
                  <SelectTrigger><SelectValue placeholder="Select user" /></SelectTrigger>
                  <SelectContent>
                    {users.map((u) => <SelectItem key={u.id} value={u.id}>{u.full_name || u.email}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Default hourly rate ($)</Label>
                <Input
                  type="number"
                  step="0.01"
                  min="0"
                  value={form.default_hourly_rate}
                  onChange={(e) => setForm({ ...form, default_hourly_rate: e.target.value })}
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label>Description</Label>
              <Textarea rows={4} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} maxLength={5000} />
            </div>

            <div className="flex justify-end gap-2 pt-2">
              <Button type="button" variant="outline" asChild>
                <Link to="/cases">Cancel</Link>
              </Button>
              <Button type="submit" disabled={submitting}>
                {submitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
                Create case
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </PageContainer>
  );
}