"use client";

import { Users } from "lucide-react";
import { UserData } from "./types";

interface Subscription {
  id: string;
  status: string;
  trialEndsAt?: string;
  currentPeriodEnd?: string;
}

interface TeamMembership {
  organizationName: string;
}

interface ActionsTabProps {
  user: UserData;
  userDetails: Record<string, unknown> | null;
  isAdmin: boolean;
  suspendReason: string;
  trialExtensionWeeks: number;
  submitting: boolean;
  onSuspendReasonChange: (value: string) => void;
  onTrialExtensionWeeksChange: (value: number) => void;
  onSuspend: () => void;
  onActivate: () => void;
  onExtendTrial: () => void;
}

export function ActionsTab({
  user,
  userDetails,
  isAdmin,
  suspendReason,
  trialExtensionWeeks,
  submitting,
  onSuspendReasonChange,
  onTrialExtensionWeeksChange,
  onSuspend,
  onActivate,
  onExtendTrial,
}: ActionsTabProps) {
  if (!isAdmin) return null;

  const isTeamMember = Boolean(userDetails?.isTeamMember);
  const teamMembership = userDetails?.teamMembership as
    | TeamMembership
    | undefined;
  const subscriptions = (userDetails?.subscriptions as Subscription[]) || [];
  const isTrialing =
    subscriptions.length > 0 && subscriptions[0].status === "trialing";

  return (
    <div className="space-y-6">
      <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
        <p className="text-sm text-yellow-800">
          These actions will immediately affect the user&apos;s account. Use
          with caution.
        </p>
      </div>

      {/* Team Member Notice in Actions */}
      {isTeamMember && (
        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <div className="flex items-center gap-2 mb-2">
            <Users className="w-5 h-5 text-blue-600" />
            <span className="font-medium text-blue-800">Team Member</span>
          </div>
          <p className="text-sm text-blue-700">
            This user is a team member of{" "}
            <strong>{teamMembership?.organizationName ?? ""}</strong>. Some
            actions like trial extension are not applicable as billing is
            managed by the organization owner.
          </p>
        </div>
      )}

      {/* Trial Extension - Only for non-team-members */}
      {!isTeamMember && isTrialing && (
        <TrialExtensionSection
          currentTrialEnd={
            subscriptions[0].trialEndsAt ||
            subscriptions[0].currentPeriodEnd ||
            ""
          }
          trialExtensionWeeks={trialExtensionWeeks}
          submitting={submitting}
          onTrialExtensionWeeksChange={onTrialExtensionWeeksChange}
          onExtendTrial={onExtendTrial}
        />
      )}

      {user.status === "active" && (
        <SuspendAccountSection
          suspendReason={suspendReason}
          submitting={submitting}
          onSuspendReasonChange={onSuspendReasonChange}
          onSuspend={onSuspend}
        />
      )}

      {user.status === "suspended" && (
        <ActivateAccountSection
          submitting={submitting}
          onActivate={onActivate}
        />
      )}
    </div>
  );
}

// Sub-components
function TrialExtensionSection({
  currentTrialEnd,
  trialExtensionWeeks,
  submitting,
  onTrialExtensionWeeksChange,
  onExtendTrial,
}: {
  currentTrialEnd: string;
  trialExtensionWeeks: number;
  submitting: boolean;
  onTrialExtensionWeeksChange: (value: number) => void;
  onExtendTrial: () => void;
}) {
  return (
    <div className="p-6 bg-white border border-blue-200 rounded-lg">
      <h3 className="text-lg font-semibold text-brand-ink mb-4">
        Extend Trial Period
      </h3>
      <div className="space-y-4">
        <div className="p-3 bg-blue-50 rounded-lg">
          <p className="text-sm text-blue-800">
            Current trial ends: {new Date(currentTrialEnd).toLocaleDateString()}
          </p>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Extend trial by (weeks)
          </label>
          <select
            value={trialExtensionWeeks}
            onChange={(e) =>
              onTrialExtensionWeeksChange(parseInt(e.target.value))
            }
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
          >
            <option value="1">1 week</option>
            <option value="2">2 weeks</option>
            <option value="3">3 weeks</option>
            <option value="4">4 weeks (1 month)</option>
            <option value="8">8 weeks (2 months)</option>
            <option value="12">12 weeks (3 months)</option>
          </select>
        </div>
        <button
          onClick={onExtendTrial}
          disabled={submitting}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {submitting
            ? "Extending..."
            : `Extend Trial by ${trialExtensionWeeks} ${trialExtensionWeeks === 1 ? "Week" : "Weeks"}`}
        </button>
      </div>
    </div>
  );
}

function SuspendAccountSection({
  suspendReason,
  submitting,
  onSuspendReasonChange,
  onSuspend,
}: {
  suspendReason: string;
  submitting: boolean;
  onSuspendReasonChange: (value: string) => void;
  onSuspend: () => void;
}) {
  return (
    <div className="p-6 bg-white border border-gray-200 rounded-lg">
      <h3 className="text-lg font-semibold text-brand-ink mb-4">
        Suspend Account
      </h3>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Reason
          </label>
          <textarea
            value={suspendReason}
            onChange={(e) => onSuspendReasonChange(e.target.value)}
            rows={4}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-green"
            placeholder="Enter reason for suspension..."
          />
        </div>
        <button
          onClick={onSuspend}
          disabled={!suspendReason.trim() || submitting}
          className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {submitting ? "Suspending..." : "Suspend Account"}
        </button>
      </div>
    </div>
  );
}

function ActivateAccountSection({
  submitting,
  onActivate,
}: {
  submitting: boolean;
  onActivate: () => void;
}) {
  return (
    <div className="p-6 bg-white border border-gray-200 rounded-lg">
      <h3 className="text-lg font-semibold text-brand-ink mb-4">
        Activate Account
      </h3>
      <p className="text-sm text-gray-600 mb-4">
        This will restore the user&apos;s access to their account.
      </p>
      <button
        onClick={onActivate}
        disabled={submitting}
        className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {submitting ? "Activating..." : "Activate Account"}
      </button>
    </div>
  );
}