"use client";

import { useState, useEffect } from "react";
import {
  getCitiesAction,
  createCityAction,
  updateCityAction,
  deleteCityAction,
  type City,
  type CityRequest,
  type LengthAwarePaginator,
} from "@/features/locations";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function TestCitiesPage() {
  const [cities, setCities] = useState<LengthAwarePaginator<City> | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);

  // Form state for create/update
  const [formData, setFormData] = useState<CityRequest>({
    name: "",
    state_id: 1,
    status: "active",
  });
  const [editingId, setEditingId] = useState<number | null>(null);

  // Load cities
  const loadCities = async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await getCitiesAction(search || undefined, page);
      if (result.success && result.data) {
        setCities(result.data);
      } else {
        setError(result.error || "Failed to load cities");
      }
    } catch {
      setError("An error occurred");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadCities();
  }, [page]);

  // Create or update city
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const result = editingId
        ? await updateCityAction(editingId, formData)
        : await createCityAction(formData);

      if (result.success) {
        setFormData({ name: "", state_id: 1, status: "active" });
        setEditingId(null);
        await loadCities();
      } else {
        setError(result.error || "Operation failed");
      }
    } catch {
      setError("An error occurred");
    } finally {
      setLoading(false);
    }
  };

  // Delete city
  const handleDelete = async (id: number) => {
    if (!confirm("Are you sure you want to delete this city?")) return;

    setLoading(true);
    setError(null);

    try {
      const result = await deleteCityAction(id);
      if (result.success) {
        await loadCities();
      } else {
        setError(result.error || "Delete failed");
      }
    } catch {
      setError("An error occurred");
    } finally {
      setLoading(false);
    }
  };

  // Edit city
  const handleEdit = (city: City) => {
    setFormData({
      name: city.name,
      state_id: city.state_id,
      status: city.status as "active" | "inactive",
    });
    setEditingId(city.id);
  };

  return (
    <div className="container mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">Cities API Test</h1>

      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
          {error}
        </div>
      )}

      {/* Create/Update Form */}
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>{editingId ? "Update City" : "Create City"}</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-1">Name</label>
              <Input
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">State ID</label>
              <Input
                type="number"
                value={formData.state_id}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    state_id: parseInt(e.target.value),
                  })
                }
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-1">Status</label>
              <select
                className="w-full border rounded px-3 py-2"
                value={formData.status}
                onChange={(e) =>
                  setFormData({
                    ...formData,
                    status: e.target.value as "active" | "inactive",
                  })
                }
              >
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
            <div className="flex gap-2">
              <Button type="submit" disabled={loading}>
                {editingId ? "Update" : "Create"}
              </Button>
              {editingId && (
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => {
                    setEditingId(null);
                    setFormData({ name: "", state_id: 1, status: "active" });
                  }}
                >
                  Cancel
                </Button>
              )}
            </div>
          </form>
        </CardContent>
      </Card>

      {/* Search and Pagination */}
      <Card className="mb-8">
        <CardContent className="pt-6">
          <div className="flex gap-4 items-center">
            <Input
              placeholder="Search cities..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <Button onClick={loadCities} disabled={loading}>
              Search
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Cities List */}
      <Card>
        <CardHeader>
          <CardTitle>Cities List</CardTitle>
        </CardHeader>
        <CardContent>
          {loading && <p>Loading...</p>}
          {cities && (
            <>
              <div className="space-y-2">
                {cities.data.map((city) => (
                  <div
                    key={city.id}
                    className="flex items-center justify-between p-4 border rounded"
                  >
                    <div>
                      <p className="font-medium">{city.name}</p>
                      <p className="text-sm text-gray-500">
                        State ID: {city.state_id} | Status: {city.status}
                      </p>
                    </div>
                    <div className="flex gap-2">
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleEdit(city)}
                      >
                        Edit
                      </Button>
                      <Button
                        size="sm"
                        variant="destructive"
                        onClick={() => handleDelete(city.id)}
                      >
                        Delete
                      </Button>
                    </div>
                  </div>
                ))}
              </div>

              {/* Pagination */}
              <div className="flex justify-between items-center mt-4">
                <p className="text-sm text-gray-500">
                  Page {cities.current_page} of {cities.last_page} (Total:{" "}
                  {cities.total})
                </p>
                <div className="flex gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => setPage(page - 1)}
                    disabled={page === 1}
                  >
                    Previous
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => setPage(page + 1)}
                    disabled={page === cities.last_page}
                  >
                    Next
                  </Button>
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}