"use client";

import {
  Plus,
  Link2,
  ExternalLink,
  Copy,
  Check,
  Edit3,
  Trash2,
} from "lucide-react";
import { UserLink, LinkFormState, LINK_TYPE_OPTIONS } from "./types";

interface LinksTabProps {
  userLinks: UserLink[];
  showLinkForm: boolean;
  editingLink: UserLink | null;
  linkForm: LinkFormState;
  submitting: boolean;
  copiedText: string | null;
  onShowLinkFormChange: (show: boolean) => void;
  onLinkFormChange: (form: LinkFormState) => void;
  onAddLink: () => void;
  onUpdateLink: () => void;
  onDeleteLink: (linkId: string) => void;
  onStartEditLink: (link: UserLink) => void;
  onResetLinkForm: () => void;
  onCopyToClipboard: (text: string) => void;
}

export function LinksTab({
  userLinks,
  showLinkForm,
  editingLink,
  linkForm,
  submitting,
  copiedText,
  onShowLinkFormChange,
  onLinkFormChange,
  onAddLink,
  onUpdateLink,
  onDeleteLink,
  onStartEditLink,
  onResetLinkForm,
  onCopyToClipboard,
}: LinksTabProps) {
  const getLinkTypeInfo = (type: string) => {
    return (
      LINK_TYPE_OPTIONS.find((opt) => opt.value === type) || {
        value: type,
        label: type,
        icon: "🔗",
      }
    );
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-brand-ink">
            Integration Links
          </h3>
          <p className="text-sm text-gray-600 mt-1">
            Manage links to knowledge base, AI agents, and other integrations
            for this user.
          </p>
        </div>
        {!showLinkForm && (
          <button
            onClick={() => onShowLinkFormChange(true)}
            className="flex items-center gap-2 px-4 py-2 bg-brand-green text-white rounded-lg hover:bg-green-700"
          >
            <Plus className="w-4 h-4" />
            Add Link
          </button>
        )}
      </div>

      {/* Add/Edit Link Form */}
      {showLinkForm && (
        <div className="p-6 bg-gray-50 border border-gray-200 rounded-lg">
          <h4 className="font-semibold text-brand-ink mb-4">
            {editingLink ? "Edit Link" : "Add New Link"}
          </h4>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Link Type
                </label>
                <select
                  value={linkForm.linkType}
                  onChange={(e) =>
                    onLinkFormChange({
                      ...linkForm,
                      linkType: e.target.value as UserLink["linkType"],
                    })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
                >
                  {LINK_TYPE_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.icon} {option.label}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Title
                </label>
                <input
                  type="text"
                  value={linkForm.title}
                  onChange={(e) =>
                    onLinkFormChange({ ...linkForm, title: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
                  placeholder="e.g., Knowledge Base Portal"
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                URL
              </label>
              <input
                type="url"
                value={linkForm.url}
                onChange={(e) =>
                  onLinkFormChange({ ...linkForm, url: e.target.value })
                }
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
                placeholder="https://..."
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Description (Optional)
              </label>
              <textarea
                value={linkForm.description}
                onChange={(e) =>
                  onLinkFormChange({ ...linkForm, description: e.target.value })
                }
                rows={2}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
                placeholder="Brief description of this link..."
              />
            </div>
            <div className="flex items-center gap-3">
              <button
                onClick={editingLink ? onUpdateLink : onAddLink}
                disabled={
                  !linkForm.title.trim() || !linkForm.url.trim() || submitting
                }
                className="px-4 py-2 bg-brand-green text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {submitting
                  ? "Saving..."
                  : editingLink
                    ? "Update Link"
                    : "Add Link"}
              </button>
              <button
                onClick={onResetLinkForm}
                className="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Existing Links */}
      <div>
        <h4 className="font-semibold text-brand-ink mb-4">
          Configured Links ({userLinks.length})
        </h4>
        {userLinks.length === 0 ? (
          <div className="p-8 text-center bg-gray-50 border border-dashed border-gray-300 rounded-lg">
            <Link2 className="w-12 h-12 text-gray-400 mx-auto mb-3" />
            <p className="text-gray-600">No links configured yet</p>
            <p className="text-sm text-gray-500 mt-1">
              Add links to help this user access their integrations
            </p>
          </div>
        ) : (
          <div className="space-y-3">
            {userLinks.map((link) => {
              const typeInfo = getLinkTypeInfo(link.linkType);
              return (
                <div
                  key={link.id}
                  className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition"
                >
                  <div className="flex items-center gap-4">
                    <span className="text-2xl">{typeInfo.icon}</span>
                    <div>
                      <div className="flex items-center gap-2">
                        <p className="font-medium text-gray-900">
                          {link.title}
                        </p>
                        <span className="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 rounded">
                          {typeInfo.label}
                        </span>
                      </div>
                      <a
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-sm text-brand-green hover:underline flex items-center gap-1 mt-1"
                      >
                        {link.url.length > 50
                          ? link.url.substring(0, 50) + "..."
                          : link.url}
                        <ExternalLink className="w-3 h-3" />
                      </a>
                      {link.description && (
                        <p className="text-xs text-gray-500 mt-1">
                          {link.description}
                        </p>
                      )}
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <button
                      onClick={() => onCopyToClipboard(link.url)}
                      className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition"
                      title="Copy URL"
                    >
                      {copiedText === link.url ? (
                        <Check className="w-4 h-4 text-green-600" />
                      ) : (
                        <Copy className="w-4 h-4" />
                      )}
                    </button>
                    <button
                      onClick={() => onStartEditLink(link)}
                      className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition"
                      title="Edit"
                    >
                      <Edit3 className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => onDeleteLink(link.id)}
                      className="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition"
                      title="Delete"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}