import React, { useEffect, useMemo, useState } from 'react';
import { PageToolbar, SearchInput } from './shared/ui';
import axios from 'axios';
import { Button } from 'primereact/button';
import { Column } from 'primereact/column';
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
import { DataTable } from 'primereact/datatable';
import { ProgressSpinner } from 'primereact/progressspinner';
import { Tag } from 'primereact/tag';

const STATUS_SEVERITY: Record<string, 'success' | 'warning' | 'secondary'> = {
    active: 'success',
    pending: 'warning',
    unsubscribed: 'secondary',
};

const STATUS_LABEL: Record<string, string> = {
    active: 'Subscribed',
    pending: 'Awaiting confirmation',
    unsubscribed: 'Unsubscribed',
};

const Subscriber = () => {
    const [items, setItems] = useState<any[]>([]);
    const [search, setSearch] = useState('');
    const [is_loading, setIsLoading] = useState(true);

    const counts = useMemo(() => {
        const c: Record<string, number> = { active: 0, pending: 0, unsubscribed: 0 };
        for (const it of items) c[it.status] = (c[it.status] ?? 0) + 1;
        return c;
    }, [items]);

    const list = async () => {
        setIsLoading(true);
        try {
            const response = await axios.get('/subscriber/list');
            setItems(response.data);
        } catch (error) {
            console.error('Failed to fetch subscribers:', error);
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => { list(); }, []);

    const remove = (row: any) => {
        confirmDialog({
            header: 'Delete subscriber',
            message: `Remove ${row.name || row.email} from the list? Their record is deleted permanently.`,
            icon: 'pi pi-exclamation-triangle',
            acceptLabel: 'Delete',
            acceptClassName: 'p-button-danger',
            accept: async () => {
                try {
                    await axios.delete('/subscriber/delete', { data: { id: row.id } });
                    list();
                } catch (error: any) {
                    alert(error?.response?.data?.message || 'Something went wrong. Try again.');
                }
            },
        });
    };

    const statusBodyTemplate = (row: any) =>
        <Tag value={STATUS_LABEL[row.status] ?? row.status} severity={STATUS_SEVERITY[row.status]} />;

    const nameBodyTemplate = (row: any) => (
        <div>
            <div>{row.name || '—'}</div>
            {row.organization && <div style={{ opacity: 0.65, fontSize: '0.9em' }}>{row.organization}</div>}
        </div>
    );

    const topicsBodyTemplate = (row: any) => row.all_categories
        ? <Tag value="All news" severity="secondary" />
        : (
            <div className="flex gap-1 flex-wrap">
                {row.categories.map((c: string) => <Tag key={c} value={c} severity="info" />)}
            </div>
        );

    const dateBodyTemplate = (field: string) => (row: any) =>
        row[field] ? new Date(row[field]).toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'short' }) : '—';

    const resend = async (row: any) => {
        try {
            const response = await axios.post('/subscriber/resend_confirmation', { id: row.id });
            const mailer = response.data.mailer;
            // A non-SMTP mailer "succeeds" without delivering anything — call that out.
            alert(mailer === 'smtp'
                ? `Confirmation email sent to ${row.email}.`
                : `The app's mailer is "${mailer}", so nothing was actually delivered. Set MAIL_MAILER=smtp in .env (and re-run php artisan config:cache).`);
            list();
        } catch (error: any) {
            alert(error?.response?.data?.message || 'Something went wrong. Try again.');
        }
    };

    const manageBodyTemplate = (row: any) => (
        <div className="flex gap-2">
            {row.status === 'pending' && (
                <Button onClick={() => resend(row)} icon="pi pi-send" label="Resend confirmation" className="p-button-sm p-button-secondary" />
            )}
            <Button onClick={() => remove(row)} icon="pi pi-trash" label="Delete" className="p-button-sm p-button-danger" />
        </div>
    );

    return (
        <div>
            <ConfirmDialog />
            <PageToolbar
                title="Subscribers"
                subtitle={`${counts.active} subscribed · ${counts.pending} awaiting confirmation · ${counts.unsubscribed} unsubscribed`}
                filters={<SearchInput value={search} onChange={setSearch} placeholder="Search subscribers…" />}
                actions={<Button icon="pi pi-refresh" onClick={list} className="p-button-text p-button-sm" />}
            />
            <div className="my-3">
                {is_loading ? (<ProgressSpinner style={{ width: '2rem', height: '2rem' }} className="mr-3" />) : null}
                <DataTable value={items} tableStyle={{ minWidth: '50rem' }} paginator rows={20}
                    globalFilter={search} globalFilterFields={['name', 'organization', 'email']}
                    emptyMessage="No subscribers yet.">
                    <Column field="name" header="Name" body={nameBodyTemplate} sortable />
                    <Column field="email" header="Email" sortable />
                    <Column header="Topics" body={topicsBodyTemplate} />
                    <Column field="status" header="Status" body={statusBodyTemplate} sortable />
                    <Column field="lang" header="Language" body={(r: any) => (r.lang === 'zh' ? '中文' : 'English')} sortable />
                    <Column field="created_at" header="Signed up" body={dateBodyTemplate('created_at')} sortable />
                    <Column header="Manage" body={manageBodyTemplate} />
                </DataTable>
            </div>
        </div>
    );
};

export default Subscriber;