'use client';

import React, { useState, useCallback, useMemo } from 'react';
import { Modal, ModalBody } from '@/components/ui/Modal';
import {
  getAvailableStatuses,
  getTransitionWarning,
  STATUS_CHANGE_REASONS,
  STATUS_LABELS,
} from '@/lib/status-transitions';
import styles from './StatusChangeModal.module.css';

type CancellationMode = 'immediate' | 'end_of_period' | 'immediate_refund';

const CANCELLATION_OPTIONS: { value: CancellationMode; label: string; description: string }[] = [
  {
    value: 'end_of_period',
    label: 'End of billing period',
    description: 'Let them use the rest of their paid period, then cancel',
  },
  {
    value: 'immediate_refund',
    label: 'Immediate with refund',
    description: 'Cancel now and refund unused time (prorated)',
  },
  {
    value: 'immediate',
    label: 'Immediate, no refund',
    description: 'Cancel now with no refund (policy violations)',
  },
];

interface Dealer {
  id: string;
  status: string;
  subdomain: string | null;
  businessName: string | null;
}

interface StatusChangeModalProps {
  isOpen: boolean;
  onClose: () => void;
  dealer: Dealer | null;
  onSave: (
    dealerId: string,
    status: string,
    reason: string,
    notes?: string,
    cancellationMode?: CancellationMode
  ) => Promise<void>;
}

export function StatusChangeModal({ isOpen, onClose, dealer, onSave }: StatusChangeModalProps) {
  const [selectedStatus, setSelectedStatus] = useState<string | null>(null);
  const [reason, setReason] = useState<string>('');
  const [notes, setNotes] = useState<string>('');
  const [cancellationMode, setCancellationMode] = useState<CancellationMode>('end_of_period');
  const [error, setError] = useState<string | null>(null);
  const [isSaving, setIsSaving] = useState(false);

  // Derive available statuses from dealer status (memoized to prevent re-renders)
  const availableStatuses = useMemo(
    () => (dealer ? getAvailableStatuses(dealer.status) : []),
    [dealer]
  );

  // Reset form state
  const resetForm = useCallback(() => {
    setSelectedStatus(null);
    setReason('');
    setNotes('');
    setCancellationMode('end_of_period');
    setError(null);
    setIsSaving(false);
  }, []);

  // Handle close with form reset
  const handleClose = useCallback(() => {
    resetForm();
    onClose();
  }, [resetForm, onClose]);

  const selectedOption = selectedStatus
    ? availableStatuses.find((s) => s.value === selectedStatus)
    : null;
  const warning =
    selectedStatus && dealer ? getTransitionWarning(dealer.status, selectedStatus) : null;
  const isDangerous = selectedOption?.dangerous ?? false;
  const isCancellation = selectedStatus === 'cancelled';

  // Handle quick status change (non-dangerous transitions)
  const handleQuickStatusChange = useCallback(
    async (status: string) => {
      if (!dealer) return;

      const option = availableStatuses.find((s) => s.value === status);
      if (option?.dangerous) {
        // Show confirmation for dangerous transitions
        setSelectedStatus(status);
        return;
      }

      // Non-dangerous: save immediately
      setIsSaving(true);
      setError(null);
      try {
        await onSave(dealer.id, status, '', undefined, undefined);
        handleClose();
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to update status');
        setIsSaving(false);
      }
    },
    [dealer, availableStatuses, onSave, handleClose]
  );

  // Handle dangerous status confirmation
  const handleConfirmDangerous = useCallback(async () => {
    if (!dealer || !selectedStatus) return;

    setIsSaving(true);
    setError(null);
    try {
      await onSave(
        dealer.id,
        selectedStatus,
        reason,
        notes || undefined,
        isCancellation ? cancellationMode : undefined
      );
      handleClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update status');
      setIsSaving(false);
    }
  }, [
    dealer,
    selectedStatus,
    reason,
    notes,
    isCancellation,
    cancellationMode,
    onSave,
    handleClose,
  ]);

  if (!dealer) return null;

  const getStatusBadgeClass = (status: string) => {
    const classes: Record<string, string> = {
      active: styles.statusActive,
      suspended: styles.statusSuspended,
      cancelled: styles.statusCancelled,
      cancelled_pending: styles.statusPending,
      pending: styles.statusPending,
      registration_pending: styles.statusPending,
      payment_failed: styles.statusPaymentFailed,
    };
    return classes[status] || styles.statusDefault;
  };

  // If a dangerous status is selected, show confirmation view
  if (selectedStatus && isDangerous) {
    return (
      <Modal
        isOpen={isOpen}
        onClose={handleClose}
        title={`Confirm ${selectedOption?.label}`}
        size="default"
      >
        <ModalBody>
          <div className={styles.confirmView}>
            {/* Warning */}
            {warning && !isCancellation && (
              <div className={styles.warningBanner}>
                <svg
                  className={styles.warningIcon}
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                  <line x1="12" y1="9" x2="12" y2="13" />
                  <line x1="12" y1="17" x2="12.01" y2="17" />
                </svg>
                <span>{warning}</span>
              </div>
            )}

            {/* Cancellation options */}
            {isCancellation && (
              <div className={styles.cancellationOptions}>
                <label className={styles.label}>How should we handle this cancellation?</label>
                <div className={styles.radioGroup}>
                  {CANCELLATION_OPTIONS.map((option) => (
                    <label
                      key={option.value}
                      className={`${styles.radioOption} ${cancellationMode === option.value ? styles.radioSelected : ''}`}
                    >
                      <input
                        type="radio"
                        name="cancellationMode"
                        value={option.value}
                        checked={cancellationMode === option.value}
                        onChange={(e) => setCancellationMode(e.target.value as CancellationMode)}
                        disabled={isSaving}
                        className={styles.radioInput}
                      />
                      <div className={styles.radioContent}>
                        <span className={styles.radioLabel}>{option.label}</span>
                        <span className={styles.radioDescription}>{option.description}</span>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            )}

            {/* Optional reason */}
            <div className={styles.optionalFields}>
              <div className={styles.inputGroup}>
                <label htmlFor="reason" className={styles.label}>
                  Reason (optional):
                </label>
                <select
                  id="reason"
                  value={reason}
                  onChange={(e) => setReason(e.target.value)}
                  className={styles.select}
                  disabled={isSaving}
                >
                  <option value="">Select reason...</option>
                  {STATUS_CHANGE_REASONS.map((r) => (
                    <option key={r.value} value={r.value}>
                      {r.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Optional notes */}
              <div className={styles.inputGroup}>
                <label htmlFor="notes" className={styles.label}>
                  Notes (optional):
                </label>
                <textarea
                  id="notes"
                  value={notes}
                  onChange={(e) => setNotes(e.target.value)}
                  className={styles.textarea}
                  placeholder="Add any additional context..."
                  rows={2}
                  disabled={isSaving}
                />
              </div>
            </div>

            {error && <p className={styles.error}>{error}</p>}

            {/* Action buttons */}
            <div className={styles.confirmButtons}>
              <button
                type="button"
                className={styles.backButton}
                onClick={() => setSelectedStatus(null)}
                disabled={isSaving}
              >
                Back
              </button>
              <button
                type="button"
                className={styles.dangerButton}
                onClick={handleConfirmDangerous}
                disabled={isSaving}
              >
                {isSaving ? 'Saving...' : `Confirm ${selectedOption?.label}`}
              </button>
            </div>
          </div>
        </ModalBody>
      </Modal>
    );
  }

  // Main view: Quick status selection
  return (
    <Modal isOpen={isOpen} onClose={handleClose} title="Change Status" size="default">
      <ModalBody>
        <div className={styles.quickSelect}>
          {/* Dealer info */}
          <div className={styles.dealerInfo}>
            <span className={styles.dealerName}>
              {dealer.businessName || dealer.subdomain || 'Unnamed Dealer'}
            </span>
          </div>

          {/* Current status indicator */}
          <div className={styles.currentStatus}>
            <span className={styles.currentLabel}>Current:</span>
            <span className={`${styles.statusBadge} ${getStatusBadgeClass(dealer.status)}`}>
              {STATUS_LABELS[dealer.status as keyof typeof STATUS_LABELS] || dealer.status}
            </span>
          </div>

          {/* Status options as buttons */}
          <div className={styles.statusOptions}>
            {availableStatuses.map((option) => (
              <button
                key={option.value}
                type="button"
                className={`${styles.statusOption} ${getStatusBadgeClass(option.value)} ${option.dangerous ? styles.dangerousOption : ''}`}
                onClick={() => handleQuickStatusChange(option.value)}
                disabled={isSaving}
              >
                {option.label}
                {option.dangerous && (
                  <svg
                    className={styles.dangerIcon}
                    width="12"
                    height="12"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                    <line x1="12" y1="9" x2="12" y2="13" />
                    <line x1="12" y1="17" x2="12.01" y2="17" />
                  </svg>
                )}
              </button>
            ))}
          </div>

          {error && <p className={styles.error}>{error}</p>}

          {isSaving && (
            <div className={styles.savingIndicator}>
              <div className={styles.spinner}></div>
              <span>Updating status...</span>
            </div>
          )}
        </div>
      </ModalBody>
    </Modal>
  );
}