"use client";

import { useState, type FormEvent } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import {
  ArrowLeftIcon,
  PaperAirplaneIcon,
  ExclamationCircleIcon,
  InformationCircleIcon,
} from "@heroicons/react/24/outline";

import { logger } from "@/lib/logger";

export function NewSupportCaseView() {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    subject: "",
    category: "Technical",
    priority: "Medium",
    description: "",
  });

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    setIsSubmitting(true);

    // Mock submission - would normally send to API
    void (async () => {
      try {
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Redirect to cases list with success message
        router.push("/support/cases?created=true");
      } catch (error) {
        logger.error("Error creating case", error);
      } finally {
        setIsSubmitting(false);
      }
    })();
  };

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

  const isFormValid = formData.subject.trim() && formData.description.trim();

  return (
    <div className="py-6">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center space-x-4 mb-4">
            <button
              onClick={() => router.back()}
              className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
            >
              <ArrowLeftIcon className="h-4 w-4 mr-1" />
              Back to Support
            </button>
          </div>

          <div>
            <h1 className="text-2xl font-bold text-gray-900">Create Support Case</h1>
            <p className="mt-1 text-sm text-gray-600">Get help from our support team</p>
          </div>
        </div>

        {/* Help Tips */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
          <div className="flex">
            <div className="flex-shrink-0">
              <InformationCircleIcon className="h-5 w-5 text-blue-400" />
            </div>
            <div className="ml-3">
              <h3 className="text-sm font-medium text-blue-800">Before creating a case</h3>
              <div className="mt-2 text-sm text-blue-700">
                <ul className="list-disc list-inside space-y-1">
                  <li>Check our knowledge base for common solutions</li>
                  <li>Include relevant error messages or screenshots</li>
                  <li>Provide detailed steps to reproduce the issue</li>
                  <li>Mention your service or subscription if applicable</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Form */}
        <div className="bg-white shadow rounded-lg">
          <form onSubmit={handleSubmit} className="p-6 space-y-6">
            {/* Subject */}
            <div>
              <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
                Subject *
              </label>
              <input
                type="text"
                id="subject"
                value={formData.subject}
                onChange={event => handleInputChange("subject", event.target.value)}
                placeholder="Brief description of your issue"
                className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                required
              />
            </div>

            {/* Category and Priority */}
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              <div>
                <label htmlFor="category" className="block text-sm font-medium text-gray-700 mb-2">
                  Category
                </label>
                <select
                  id="category"
                  value={formData.category}
                  onChange={event => handleInputChange("category", event.target.value)}
                  className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="Technical">Technical Support</option>
                  <option value="Billing">Billing Question</option>
                  <option value="General">General Inquiry</option>
                  <option value="Feature Request">Feature Request</option>
                  <option value="Bug Report">Bug Report</option>
                </select>
              </div>

              <div>
                <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-2">
                  Priority
                </label>
                <select
                  id="priority"
                  value={formData.priority}
                  onChange={event => handleInputChange("priority", event.target.value)}
                  className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="Low">Low - General question</option>
                  <option value="Medium">Medium - Issue affecting work</option>
                  <option value="High">High - Service disruption</option>
                  <option value="Critical">Critical - Complete outage</option>
                </select>
              </div>
            </div>

            {/* Description */}
            <div>
              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
                Description *
              </label>
              <textarea
                id="description"
                rows={6}
                value={formData.description}
                onChange={event => handleInputChange("description", event.target.value)}
                placeholder="Please provide a detailed description of your issue, including any error messages and steps to reproduce the problem..."
                className="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                required
              />
              <p className="mt-2 text-xs text-gray-500">
                The more details you provide, the faster we can help you.
              </p>
            </div>

            {/* Priority Warning */}
            {formData.priority === "Critical" && (
              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                <div className="flex">
                  <div className="flex-shrink-0">
                    <ExclamationCircleIcon className="h-5 w-5 text-red-400" />
                  </div>
                  <div className="ml-3">
                    <h3 className="text-sm font-medium text-red-800">Critical Priority Selected</h3>
                    <div className="mt-2 text-sm text-red-700">
                      <p>
                        Critical priority should only be used for complete service outages. For
                        urgent issues that aren&apos;t complete outages, please use High priority.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Actions */}
            <div className="flex items-center justify-between pt-6 border-t border-gray-200">
              <button
                type="button"
                onClick={() => router.back()}
                className="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={!isFormValid || isSubmitting}
                className="inline-flex items-center px-6 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
              >
                {isSubmitting ? (
                  <>
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    Creating Case...
                  </>
                ) : (
                  <>
                    <PaperAirplaneIcon className="h-4 w-4 mr-2" />
                    Create Case
                  </>
                )}
              </button>
            </div>
          </form>
        </div>

        {/* Additional Help */}
        <div className="mt-8 bg-gray-50 rounded-lg p-6">
          <h3 className="text-lg font-medium text-gray-900 mb-4">Need immediate help?</h3>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
              <h4 className="text-sm font-medium text-gray-900">Phone Support</h4>
              <p className="text-sm text-gray-600 mt-1">
                9:30-18:00 JST
                <br />
                <span className="font-medium text-blue-600">0120-660-470</span>
              </p>
            </div>
            <div>
              <h4 className="text-sm font-medium text-gray-900">Knowledge Base</h4>
              <p className="text-sm text-gray-600 mt-1">
                Search our help articles for quick solutions
                <br />
                <Link href="/support/kb" className="font-medium text-blue-600 hover:text-blue-500">
                  Browse Knowledge Base
                </Link>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
