'use client';

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { unsubscribeTenantEmail } from '@/app/lib/actions/emailActions';
import { CheckCircleIcon } from '@heroicons/react/24/outline';

interface EmailUnsubscribePageProps {
    shareId: string;
}

export default function EmailUnsubscribePage({ shareId }: EmailUnsubscribePageProps) {
    const t = useTranslations('email-unsubscribe-page');
    const [isUnsubscribing, setIsUnsubscribing] = useState(false);
    const [isUnsubscribed, setIsUnsubscribed] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const handleUnsubscribe = async () => {
        setIsUnsubscribing(true);
        setError(null);

        try {
            const result = await unsubscribeTenantEmail(shareId);

            if (result.success) {
                setIsUnsubscribed(true);
            } else {
                setError(result.message || t('error.unknown'));
            }
        } catch (err) {
            setError(t('error.unknown'));
        } finally {
            setIsUnsubscribing(false);
        }
    };

    if (isUnsubscribed) {
        return (
            <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
                <div className="card-body">
                    <div className="flex justify-center mb-4">
                        <CheckCircleIcon className="h-16 w-16 text-success" />
                    </div>
                    <h2 className="card-title text-center justify-center text-success">
                        {t('success.title')}
                    </h2>
                    <p className="text-center">{t('success.message')}</p>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
                <div className="card-body">
                    <h2 className="card-title text-error">{t('error.title')}</h2>
                    <p>{error}</p>
                </div>
            </div>
        );
    }

    return (
        <div className="card bg-base-100 shadow-xl max-w-2xl mx-auto mt-8">
            <div className="card-body">
                <h2 className="card-title">{t('title')}</h2>

                <div className="space-y-4">
                    <div>
                        <h3 className="font-semibold">{t('about.title')}</h3>
                        <p>{t('about.description')}</p>
                    </div>

                    <div>
                        <h3 className="font-semibold">{t('why.title')}</h3>
                        <p>{t('why.description')}</p>
                    </div>

                    <div>
                        <h3 className="font-semibold">{t('what-happens.title')}</h3>
                        <p>{t('what-happens.description')}</p>
                    </div>
                </div>

                <div className="card-actions justify-center mt-6">
                    <button
                        className="btn btn-error"
                        onClick={handleUnsubscribe}
                        disabled={isUnsubscribing}
                    >
                        {isUnsubscribing ? (
                            <>
                                <span className="loading loading-spinner"></span>
                                {t('button.unsubscribing')}
                            </>
                        ) : (
                            t('button.unsubscribe')
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
}