import { defineAsyncComponent, h } from 'vue';
import LucideGlobe from '~icons/lucide/globe';
import { getTeam } from '../data/team';
import router from '../router';
import { icon } from '../utils/components';
import { duration, planTitle, userCurrency } from '../utils/format';
import { trialDays } from '../utils/site';
import { getJobsTab } from './common/jobs';
import { tagTab } from './common/tags';
import { t } from '../utils/i18n';

export default {
	pagetype: 'Jsite Domain',
	whitelistedMethods: {
		renew: 'renew',
		rename: 'rename',
		dropDomain: 'drop_domain',
		addTag: 'add_resource_tag',
		removeTag: 'remove_resource_tag'
	},
	list: {
		route: '/domains',
		title: t('Domains'),
		fields: [
			'name',
			'domain',
			'status',
			'domain_owner',
			'domain_registrar',
			'registration_date',
			'end_date',
			'price',
			'period',
			'auto_renew',
			'team',
			'order_id',
			'description'
		],
		filterControls() {
			return [
				{
					type: 'select',
					label: t('Status'),
					fieldname: 'status',
					options: [
						{ label: '', value: '' },
						{ label: t('Normal'), value: 'ok' },
						{ label: t('Locked'), value: 'clienthold' }
					]
				}
			];
		},
		orderBy: 'creation desc',
		searchField: 'domain',
		columns: [
			{
				label: t('Domain'),
				fieldname: 'domain',
				width: 2,
				class: 'font-medium',
				format(value) {
					return value;
				}
			},
			{ 
				label: t('Status'), 
				fieldname: 'status', 
				type: 'Badge', 
				width: 0.8,
				format(value) {
					const statusMap = {
						'ok': t('Normal'),
						'clienthold': t('Locked')
					};
					return statusMap[value] || value;
				}
			},
			{
				label: t('Registration Date'),
				fieldname: 'registration_date',
				format(value) {
					if (!value) return '-';
					return value;
				}
			},
			{
				label: t('Expiry Date'),
				fieldname: 'end_date',
				format(value) {
					if (!value) return '-';
					return value;
				}
			}
		],
		primaryAction({ listResource: domains }) {
			return {
				label: t('New Domain'),
				variant: 'outline',
				slots: {
					prefix: icon('plus')
				},
				onClick() {
					router.push('/domains/new');
				}
			};
		},
		statusBadge({ documentResource: domain }) {
			const status = domain.pg?.status;
			const statusMap = {
				'Pending': t('Pending'),
				'Active': t('Normal'),
				'Expired': t('Expired'),
				'Suspended': t('Suspended'),
				'Cancelled': t('Cancelled')
			};
			return {
				label: statusMap[status] || status
			};
		},
		breadcrumbs({ documentResource: domain }) {
			return [
				{
					label: t('Domains'),
					route: '/domains'
				},
				{
					label: domain.pg?.domain || domain.pg?.name,
					route: `/domains/${domain.pg?.name}`
				}
			];
		},
		actions({ documentResource: domain }) {
			if (!domain) return [];
			
			const actions = [
				{
					label: t('Renew'),
					icon: 'refresh-cw',
					onClick() {
						domain.renew.submit();
					},
					condition: () => domain.pg?.status === 'Active'
				},
				{
					label: t('Rename'),
					icon: 'edit-3',
					onClick() {
						domain.rename.submit();
					}
				},
				{
					label: t('Delete'),
					icon: 'trash-2',
					onClick() {
						domain.dropDomain.submit();
					},
					condition: () => domain.pg?.status !== 'Active'
				}
			];
			return actions.filter(action => !action.condition || action.condition());
		}
	},
	detail: {
		route: '/domains/:name',
		title: t('Domain Details'),
		tabs: [
			{
				label: t('Overview'),
				route: '',
				type: 'Component',
				component: defineAsyncComponent(() => import('../components/JsiteDomainOverview.vue')),
				props: domain => {
					return { domain: domain.pg?.name };
				}
			},
			{
				label: t('DNS Records'),
				route: 'dns',
				type: 'Component',
				component: defineAsyncComponent(() => import('../components/JsiteDomainDNSRecords.vue')),
				props: domain => {
					return { domain: domain.pg?.name };
				}
			},
			{
				label: t('Owner Template'),
				route: 'owners',
				type: 'Component',
				component: defineAsyncComponent(() => import('../components/DomainOwner.vue')),
				props: domain => {
					return { domain: domain.pg?.name };
				}
			}
		],
		fields: [
			{
				label: t('Basic Information'),
				fields: [
					'domain',
					'status',
					'domain_owner',
					'domain_registrar',
					'registration_date',
					'end_date'
				]
			},
			{
				label: t('Pricing Information'),
				fields: [
					'price',
					'period',
					'auto_renew',
					'order_id'
				]
			},
			{
				label: t('DNS Settings'),
				fields: [
					'dns_host1',
					'dns_host2',
					'dns_host3',
					'dns_host4',
					'dns_host5',
					'dns_host6'
				]
			},
			{
				label: t('Other Information'),
				fields: [
					'description',
					'whois_protection'
				]
			}
		],
		actions({ documentResource: domain }) {
			return [];
		}
	}
}; 