'use client';

import { useState } from 'react';

import { useApiClient } from '@/lib/apiClient';

type BannerStatus =
  | 'upgrade'
  | 'schedule'
  | 'block_free'
  | 'block_all'
  | 'temporarily_down'
  | 'clear';

interface BannerOption {
  status: BannerStatus;
  message: string;
  displayName: string;
}

interface BannerClientProps {
  statuszSecret: string;
}

const BANNER_OPTIONS: BannerOption[] = [
  {
    status: 'temporarily_down',
    message:
      "A technical issue is affecting everyone right now—it's not just you! Song creation will be back soon. Keep listening in the meantime!",
    displayName: 'Temporarily Down',
  },
  {
    status: 'schedule',
    message:
      "Scheduled Maintenance: We're currently undergoing maintenance. Some functions may be temporarily unavailable.",
    displayName: 'Scheduled Maintenance',
  },
  {
    status: 'block_free',
    message:
      "Song creation is currently available for Pro and Premier subscribers only. We'll restore it for everyone soon—thanks for your patience!",
    displayName: 'Pro/Premier Only',
  },
  {
    status: 'upgrade',
    message:
      "System Upgrade in Progress: We're improving our services. Some functions may be temporarily unavailable.",
    displayName: 'System Upgrade',
  },
  {
    status: 'clear',
    message: '',
    displayName: 'Clear Banner (No Message)',
  },
  // NOTE: this status is valid in the backend but is redundant with 'temporarily_down'
  // {
  //   status: 'block_all',
  //   message:
  //     'Making songs is currently disabled. You can still listen to your favorite tunes.',
  //   displayName: 'All Generations Disabled',
  // },
];

export default function BannerClient({ statuszSecret }: BannerClientProps) {
  const [selectedStatus, setSelectedStatus] = useState<BannerStatus>('clear');
  const [isUpdating, setIsUpdating] = useState(false);
  const [updateResult, setUpdateResult] = useState<{
    success: boolean;
    message: string;
  } | null>(null);

  const apiClient = useApiClient();

  const selectedOption = BANNER_OPTIONS.find(
    (opt) => opt.status === selectedStatus
  );

  const handleUpdateBanner = async () => {
    setIsUpdating(true);
    setUpdateResult(null);

    try {
      // First API call to our standard endpoint
      const { error: mainError } = await apiClient.POST('/api/banner/update', {
        body: {
          message: selectedOption?.message || '',
          status: selectedStatus,
        },
      });

      if (mainError) {
        throw new Error('Failed to update banner on main API');
      }

      // Second API call to statusz - different endpoints for prod vs staging
      const hostname =
        typeof window !== 'undefined' ? window.location.hostname : '';
      const isProduction = hostname === 'suno.com';
      const isStaging = hostname === 'b.suno.fm' || hostname === 'suno.fm';

      let statuszUrl = null;
      if (isProduction) {
        statuszUrl = 'https://statusz.suno.ai/update';
      } else if (isStaging) {
        statuszUrl = 'https://statusz-staging.suno.com/update';
      }

      if (statuszUrl) {
        const statuszResponse = await fetch(statuszUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            message: selectedOption?.message || '',
            status: selectedStatus,
            secret: statuszSecret,
          }),
        });

        if (!statuszResponse.ok) {
          throw new Error(`Failed to update banner on ${statuszUrl}`);
        }
      }

      const currentHost =
        typeof window !== 'undefined' ? window.location.hostname : 'suno.com';
      setUpdateResult({
        success: true,
        message:
          selectedStatus === 'clear'
            ? 'Banner cleared successfully!'
            : `Banner updated successfully! -- check https://${currentHost}`,
      });
    } catch (err) {
      setUpdateResult({
        success: false,
        message: err instanceof Error ? err.message : 'Something went wrong',
      });
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    <div className='flex h-screen flex-col p-6'>
      <div className='mb-6'>
        <h1 className='text-2xl font-bold text-foreground-primary'>
          Maintenance Banner Management
        </h1>
        <p className='mt-2 text-sm text-foreground-secondary'>
          Control the maintenance banner displayed on suno.com
        </p>
      </div>

      <div className='max-w-4xl'>
        <div className='rounded-lg border border-border-primary bg-background-primary p-6'>
          <div className='mb-6'>
            <label
              htmlFor='bannerStatus'
              className='mb-3 block text-sm font-medium text-foreground-primary'
            >
              Select Banner Status
            </label>
            <select
              id='bannerStatus'
              value={selectedStatus}
              onChange={(e) =>
                setSelectedStatus(e.target.value as BannerStatus)
              }
              className='w-full rounded-lg border border-border-secondary bg-background-secondary px-4 py-3 text-foreground-primary focus:border-border-primary focus:outline-none'
              disabled={isUpdating}
            >
              {BANNER_OPTIONS.map((option) => (
                <option key={option.status} value={option.status}>
                  {option.displayName}{' '}
                  {option.message && `- "${option.message}"`}
                </option>
              ))}
            </select>
          </div>

          {selectedOption && selectedOption.message && (
            <div className='mb-6'>
              <div className='mb-2 block text-sm font-medium text-foreground-primary'>
                Message Preview
              </div>
              <div className='rounded-lg border border-border-secondary bg-background-secondary p-4'>
                <div className='flex items-start gap-3'>
                  <p className='text-foreground-primary'>
                    {selectedOption.message}
                  </p>
                </div>
              </div>
            </div>
          )}

          {selectedStatus === 'clear' && (
            <div className='mb-6 rounded-lg border border-green-200 bg-green-50 p-4'>
              <p className='text-sm text-green-800'>
                ✅ Selecting &quot;Clear Banner&quot; will remove any active
                maintenance message from the site.
              </p>
            </div>
          )}

          <button
            type='button'
            onClick={handleUpdateBanner}
            disabled={isUpdating}
            className='rounded-lg bg-blue-600 px-6 py-3 font-medium text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md active:scale-[0.98] disabled:cursor-not-allowed disabled:bg-gray-400 disabled:opacity-50 disabled:shadow-none'
          >
            {isUpdating ? 'Updating...' : 'Update Banner'}
          </button>

          {updateResult && (
            <div
              className={`mt-4 rounded-lg p-4 ${
                updateResult.success
                  ? 'border border-green-200 bg-green-50'
                  : 'border border-red-200 bg-red-50'
              }`}
            >
              <p
                className={`text-sm ${
                  updateResult.success ? 'text-green-800' : 'text-red-800'
                }`}
              >
                {updateResult.success ? '✅' : '❌'}{' '}
                {updateResult.success && selectedStatus !== 'clear' ? (
                  <>
                    Banner updated successfully! -- check{' '}
                    <a
                      href={`https://${typeof window !== 'undefined' ? window.location.hostname : 'suno.com'}`}
                      target='_blank'
                      rel='noopener noreferrer'
                      className='text-blue-600 underline hover:text-blue-800'
                    >
                      https://
                      {typeof window !== 'undefined'
                        ? window.location.hostname
                        : 'suno.com'}
                    </a>
                  </>
                ) : (
                  updateResult.message
                )}
              </p>
            </div>
          )}
        </div>

        <div className='mt-6 rounded-lg border border-border-secondary bg-background-secondary p-4'>
          <h2 className='mb-2 text-sm font-medium text-foreground-primary'>
            Banner Status Guide
          </h2>
          <ul className='space-y-2 text-sm text-foreground-secondary'>
            <li>
              <strong className='text-foreground-primary'>
                Temporarily Down:
              </strong>{' '}
              Use when an outage is affecting everyone's ability to create songs
            </li>
            <li>
              <strong className='text-foreground-primary'>
                Scheduled Maintenance:
              </strong>{' '}
              Use for planned maintenance windows
            </li>
            <li>
              <strong className='text-foreground-primary'>
                Pro/Premier Only:
              </strong>{' '}
              Use when limiting generations to paid subscribers only
            </li>
            {/* <li>
              <strong className='text-foreground-primary'>
                All Generations Disabled:
              </strong>{' '}
              Use when completely disabling song generation for all users
            </li> */}
            <li>
              <strong className='text-foreground-primary'>
                System Upgrade:
              </strong>{' '}
              Use when performing system upgrades that may affect service
              availability
            </li>
            <li>
              <strong className='text-foreground-primary'>Clear Banner:</strong>{' '}
              Use to remove any active maintenance message
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}