import { Button } from "@xtablo/ui/components/button";
import { FieldDescription } from "@xtablo/ui/components/field";
import { Label } from "@xtablo/ui/components/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@xtablo/ui/components/select";
import { Textarea } from "@xtablo/ui/components/textarea";
import { Text, TypographyH3, TypographyMuted } from "@xtablo/ui/components/typography";
import { ArrowLeftIcon, SendIcon } from "lucide-react";
import React, { useState } from "react";
import { Separator } from "react-aria-components";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useCreateFeedback } from "../hooks/feedback";

export interface FeedbackData {
  fd_type: "bug" | "feature" | "improvement" | "other";
  message: string;
}

export function FeedbackPage() {
  const { t } = useTranslation("pages");
  const navigate = useNavigate();
  const [formData, setFormData] = useState<FeedbackData>({
    fd_type: "improvement",
    message: "",
  });

  const { createFeedback, isSuccess, isPending } = useCreateFeedback();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    createFeedback(formData);
  };

  const handleInputChange = (field: keyof FeedbackData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      {/* Header */}
      <div className="mb-6">
        <div className="flex items-center gap-4 mb-4">
          <Button
            variant="outline"
            size="icon"
            onClick={() => navigate(-1)}
            aria-label={t("feedback.aria.back")}
            className="shrink-0"
          >
            <ArrowLeftIcon className="w-4 h-4" />
          </Button>
          <div>
            <TypographyH3>{t("feedback.title")}</TypographyH3>
            <TypographyMuted>{t("feedback.subtitle")}</TypographyMuted>
          </div>
        </div>
      </div>

      <Separator className="mb-6" />

      {isSuccess ? (
        <div className="text-center py-12">
          <div className="mb-4">
            <SendIcon className="w-12 h-12 mx-auto" />
          </div>
          <Text className="text-xl font-medium mb-2">{t("feedback.success.title")}</Text>
          <Text className="text-muted-foreground mb-6">{t("feedback.success.description")}</Text>
          <Button variant="outline" onClick={() => navigate(-1)}>
            <ArrowLeftIcon className="w-4 h-4 mr-2" />
            {t("feedback.buttons.back")}
          </Button>
        </div>
      ) : (
        <div className="bg-card rounded-lg border p-6">
          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Feedback Type */}
            <div className="space-y-2">
              <Label htmlFor="fd_type">{t("feedback.form.type.label")}</Label>
              <Select
                value={formData.fd_type}
                onValueChange={(value) =>
                  handleInputChange("fd_type", value as FeedbackData["fd_type"])
                }
                required
              >
                <SelectTrigger className="my-2">
                  <SelectValue placeholder={t("feedback.form.type.placeholder")} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="bug">{t("feedback.form.type.bug")}</SelectItem>
                  <SelectItem value="feature">{t("feedback.form.type.feature")}</SelectItem>
                  <SelectItem value="improvement">{t("feedback.form.type.improvement")}</SelectItem>
                  <SelectItem value="other">{t("feedback.form.type.other")}</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Message Field */}
            <div className="space-y-2">
              <Label>{t("feedback.form.message.label")}</Label>
              <Textarea
                value={formData.message}
                onChange={(e) => handleInputChange("message", e.target.value)}
                placeholder={t("feedback.form.message.placeholder")}
                rows={6}
                required
                className="resize-none my-2"
              />
              <FieldDescription>{t("feedback.form.message.description")}</FieldDescription>
            </div>

            {/* Submit Button */}
            <div className="flex justify-end gap-3 pt-4">
              <Button variant="outline" onClick={() => navigate(-1)} type="button">
                {t("feedback.buttons.cancel")}
              </Button>
              <Button
                variant="default"
                type="submit"
                disabled={isPending || !formData.message}
                className="min-w-32"
              >
                {isPending ? (
                  <span className="flex items-center gap-2">
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    {t("feedback.buttons.sending")}
                  </span>
                ) : (
                  <span className="flex items-center gap-2">
                    <SendIcon className="w-4 h-4" />
                    {t("feedback.buttons.send")}
                  </span>
                )}
              </Button>
            </div>
          </form>
        </div>
      )}
    </div>
  );
}
