/**
 * MeetingLinkForm Component
 * Form to add/edit meeting link for interview
 */

"use client";

import { useState } from "react";
import { Video, ExternalLink, Save } from "lucide-react";
import { MeetingPlatform } from "@/lib/types/interview.types";

interface MeetingLinkFormProps {
  initialLink?: string;
  initialPlatform?: MeetingPlatform;
  initialMeetingId?: string;
  initialPassword?: string;
  onSave: (data: {
    meetingLink: string;
    meetingPlatform: MeetingPlatform;
    meetingId?: string;
    meetingPassword?: string;
  }) => Promise<void>;
}

export default function MeetingLinkForm({
  initialLink = "",
  initialPlatform = MeetingPlatform.MANUAL,
  initialMeetingId = "",
  initialPassword = "",
  onSave,
}: MeetingLinkFormProps) {
  const [meetingLink, setMeetingLink] = useState(initialLink);
  const [platform, setPlatform] = useState<MeetingPlatform>(initialPlatform);
  const [meetingId, setMeetingId] = useState(initialMeetingId);
  const [password, setPassword] = useState(initialPassword);
  const [isSaving, setIsSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const validateLink = (link: string): boolean => {
    try {
      const url = new URL(link);
      return ["http:", "https:"].includes(url.protocol);
    } catch {
      return false;
    }
  };

  const handleSave = async () => {
    setError(null);

    // Validation
    if (!meetingLink.trim()) {
      setError("Meeting link is required");
      return;
    }

    if (!validateLink(meetingLink)) {
      setError(
        "Please enter a valid URL (must start with http:// or https://)",
      );
      return;
    }

    setIsSaving(true);

    try {
      await onSave({
        meetingLink: meetingLink.trim(),
        meetingPlatform: platform,
        meetingId: meetingId.trim() || undefined,
        meetingPassword: password.trim() || undefined,
      });
    } catch (err: any) {
      setError(err.message || "Failed to save meeting link");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="bg-gray-50 rounded-lg p-4 border border-gray-200 space-y-4">
      <div className="flex items-center gap-2">
        <Video className="w-5 h-5 text-brand-green" />
        <h4 className="text-sm font-bold text-gray-900">Meeting Details</h4>
      </div>

      {/* Platform Selector */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          Platform
        </label>
        <select
          value={platform}
          onChange={(e) => setPlatform(e.target.value as MeetingPlatform)}
          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
        >
          <option value={MeetingPlatform.ZOOM}>Zoom</option>
          <option value={MeetingPlatform.GOOGLE_MEET}>Google Meet</option>
          <option value={MeetingPlatform.TEAMS}>Microsoft Teams</option>
          <option value={MeetingPlatform.MANUAL}>Other/Manual</option>
        </select>
      </div>

      {/* Meeting Link */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          Meeting Link <span className="text-red-500">*</span>
        </label>
        <div className="relative">
          <input
            type="url"
            value={meetingLink}
            onChange={(e) => setMeetingLink(e.target.value)}
            placeholder="https://zoom.us/j/..."
            className="w-full px-4 py-2 pr-10 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
          />
          {meetingLink && validateLink(meetingLink) && (
            <a
              href={meetingLink}
              target="_blank"
              rel="noopener noreferrer"
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-brand-green"
            >
              <ExternalLink className="w-4 h-4" />
            </a>
          )}
        </div>
      </div>

      {/* Meeting ID (optional) */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          Meeting ID (optional)
        </label>
        <input
          type="text"
          value={meetingId}
          onChange={(e) => setMeetingId(e.target.value)}
          placeholder="123-456-789"
          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
        />
      </div>

      {/* Password (optional) */}
      <div>
        <label className="block text-sm font-semibold text-gray-700 mb-2">
          Meeting Password (optional)
        </label>
        <input
          type="text"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="******"
          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg focus:ring-2 focus:ring-brand-green focus:border-brand-green"
        />
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
          {error}
        </div>
      )}

      {/* Save Button */}
      <button
        onClick={handleSave}
        disabled={isSaving || !meetingLink.trim()}
        className="w-full px-4 py-2 bg-brand-green text-white font-semibold rounded-lg hover:bg-green-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
      >
        <Save className="w-4 h-4" />
        {isSaving ? "Saving..." : "Save Meeting Link"}
      </button>
    </div>
  );
}