import { styled } from 'styled-components';
import { BtnWrapper, InputLabel, SelectInput, Textarea, TextInput } from './Components';
import CloseIcon from '../assets/img/icon/icon-close.png';
import IconDelete from '../assets/img/icon/icon-delete.png';
import { Link } from 'react-router-dom';
import EditIcon from '../assets/img/icon/icon-edit.png';
import { STATUS_STYLES } from '../assets/data';
import SelectIcon from '../assets/img/icon/icon-select.png';

export const DetailInputItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	${TextInput},${SelectInput} {
		height: 35px;
		font-size: 14px;
	}
	${TextInput} {
		padding: 0 15px;
	}
	${SelectInput} {
		width: max-content;
	}
`;

export const DetailModalWrapper = styled.div`
	max-height: 70vh;
	padding-bottom: 5px;
	overflow: auto;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

export const DetailRegistInfo = styled.div`
	display: flex;
	justify-content: flex-end;
	gap: 50px;
	font-size: 14px;
	margin-bottom: 10px;
`;

export const AreaBtnClose = styled.button`
	width: 16px;
	height: 16px;
	background: url(${CloseIcon}) 50% 50% no-repeat;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 20px;
	opacity: ${props => props.opacity};
`;

export const LangArea = styled.div`
	background: #f9f9f9;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	position: relative;
`;

export const AppendRegistBox = styled.div`
	margin-bottom: 20px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
`;

export const AppendRegistTable = styled.table`
	th,
	td {
		padding: 15px 0;
	}
	td {
		${TextInput} {
			max-width: 600px;
		}
		${Textarea} {
			width: 100%;
			border: 1px solid #d9d9d9;
			border-radius: 5px;
			height: 150px;
			padding: 15px;
			&:focus {
				border: 1px solid #2c2c2c;
			}
		}
	}
`;

export const DetailGroup = styled.div`
	display: flex;
	width: 100%;
	flex-flow: column;
	gap: 20px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;
`;

export const DetailInputRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 50px;
	margin-bottom: 10px;
`;

export const RegistInputRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 10px 50px;
`;

export const InputGroup = styled.div`
	display: flex;
	gap: 5px;
	align-items: center;
`;

export const MailReceiver = styled.div`
	display: flex;
	align-items: flex-start;
	${DetailInputItem} {
		align-items: flex-start;
	}
	${InputLabel} {
		line-height: 35px;
	}
	${TextInput} {
		margin-left: 20px;
		width: 400px;
	}
	${InputGroup} {
		margin-bottom: 5px;
	}
`;

export const DetailState = styled.span`
	font-weight: 600;
	color: ${props => {
		const result = props.result ? props.result.toLowerCase() : '';
		return result === 'success' || result === 'finish' ? '#08994B' : result === 'fail' || result === 'delete' ? '#ff0000' : '#2c2c2c'}};
`;

export const ItemList = styled.ul`
	display: flex;
	gap: 20px;
	padding: 10px 20px;
	flex-wrap: wrap;
`;

export const Item = styled.li`
	display: flex;
	gap: 5px;
	align-items: center;
`;

export const BtnDelete = styled.button`
	width: 12px;
	height: 12px;
	background: url(${IconDelete}) 50% 50% no-repeat;
`;

// 등록
export const RegistInputItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
    ${InputLabel} {
        line-height: 35px;
    }
	${TextInput},${SelectInput} {
		height: 35px;
		font-size: 14px;
	}
	${TextInput} {
		padding: 0 20px;
	}
	${SelectInput} {
		width: max-content;
	}
`;

export const RegistNotice = styled.span`
	font-size: 12px;
	font-weight: 300;
	color: ${props => props.$color || '#999'};
	margin-top: 10px;
	display: block;
`;

export const RegistGroup = styled.div`
	display: flex;
	width: 100%;
	flex-flow: column;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;

	${RegistNotice} {
		margin-bottom: 20px;
	}
`;



export const RegistTable = styled.table`
	th {
		vertical-align: top;
		line-height: 35px;
	}
	th,
	td {
		padding: 15px 0;
		border-bottom: 1px solid #f6f6f6;
	}
	td {
		${RegistInputItem} {
			gap: 5px;
		}
		${TextInput} {
			max-width: 600px;
			padding: 0 15px;
		}
		${Textarea} {
			width: 100%;
			border: 1px solid #d9d9d9;
			border-radius: 5px;
			height: 255px;
			padding: 15px;
			&:focus {
				border: 1px solid #2c2c2c;
			}
		}
	}
`;

export const SubText = styled.div`
	width: 100%;
	color: #999;
	font-size: 12px;
`;

export const ModalSubText = styled.div`
	width: 100%;
    color: ${props => props.$color || '#999'};
	font-size: 11px;
    text-align: left;
`;

export const ModalInputItem = styled.div`
	display: flex;
	flex-flow: column;
	gap: 5px;
`;

export const ModalItem = styled.div`
	display: flex;
	flex-flow: column;
	gap: 5px;
    justify-content: center;
    align-items: center;
`;

export const ModalItemList = styled.ul`
	display: flex;
	padding: 10px 20px;
	flex-wrap: wrap;
    flex-direction: column;
`;

export const UserDefaultTable = styled.table`
    border: 1px solid #e8eaec;
	border-top: 1px solid #000;
	font-size: 14px;
	margin-bottom: 40px;
	th {
		background: #efefef;
		font-weight: 700;
	}
	th,
	td {
		padding: 12px;
		text-align: center;
		border-left: 1px solid #e8eaec;
		vertical-align: middle;
	}
	td {
		background: #fff;
		border-bottom: 1px solid #e8eaec;
		word-break: break-all;
	}
	button {
		height: 24px;
		font-size: 13px;
	}
`;

export const SelectWrapper = styled.div`
	select {
		height: 30px;
	}
	margin-bottom: 10px;
`;

export const RequestTab = styled(Link)`
	padding: 0 8px;
	font-size: 14px;
	position: relative;
	color: ${props => (props.$state === 'active' ? '#2c2c2c' : '#999')};
	&:hover {
		color: #2c2c2c;
	}
`;

export const RequestTabWrapper = styled.div`
	display: inline-flex;
	align-items: center;
	margin-left: 20px;
	${RequestTab} {
		&:first-child:after {
			content: '';
			display: block;
			width: 1px;
			height: 80%;
			position: absolute;
			background: #666;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
	}
`;

export const QuestTable = styled(UserDefaultTable)`
	tbody {
		td {
			padding: 9px 12px;
		}
	}
`;

export const UserTableWrapper = styled.div`
	width: 100%;
	overflow: auto;
	margin-bottom: 40px;
	${UserDefaultTable}, ${QuestTable} {
		margin-bottom: 0;
	}
	&::-webkit-scrollbar {
		height: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

export const UserDefault = styled.div`
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 30px;
`;
export const ProfileWrapper = styled.div`
	width: 150px;
	height: 150px;
	border-radius: 75px;
	overflow: hidden;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	background: #fff;
	img {
		max-width: 100%;
		max-height: 100%;
	}
`;

export const EditButton = styled.button`
	width: 20px;
	height: 22px;
	background: url(${EditIcon}) 50% 50% no-repeat;
	margin-left: 5px;
`;

export const UserInfoTable = styled.table`
	width: 100%;
	max-width: ${props => props.$maxwidth || 'auto'};
	font-size: 13px;
	border-radius: 15px;
	overflow: hidden;
	tr:first-child {
		th,
		td {
			border-top: 0;
		}
	}
	th,
	td {
		height: 36px;
		vertical-align: middle;
		border-top: 1px solid #d9d9d9;
	}
	th {
		width: 120px;
		background: #888;
		color: #fff;
		font-weight: 700;
	}
	td {
		background: #fff;
		padding: 0 20px;
	}
`;
export const UserTabInfo = styled.div`
	padding: 50px;

	overflow: auto;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

export const InfoSubTitle = styled.div`
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: ${({ top }) => (top ? top : '0px')};
`;

export const NoticeInputItem = styled.div`
	display: flex;
    flex-direction: column;
	align-items: center;
    justify-content: center;  /* 수평 중앙 정렬 */
	gap: 10px;
	${TextInput},${SelectInput} {
		height: 35px;
		font-size: 14px;
		width: 100px;
	}
	${TextInput} {
		padding: 10px 20px;
	}
	${SelectInput} {
		width: max-content;
	}
`;

export const MessageWrapper = styled.div`
	max-height: 70vh;
	overflow: auto;
	padding-bottom: 10px;
	&::-webkit-scrollbar {
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		background: #666666;
	}
	&::-webkit-scrollbar-track {
		background: #d9d9d9;
	}
`;

export const NoticeRegistGroup = styled.div`
	display: flex;
	width: 100%;
	flex-flow: column;
	gap: 20px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size: 14px;
	margin-bottom: 20px;
`;

export const NoticeInputRow = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
`;

export const NoticeInputRow2 = styled.div`
	display: flex;
  justify-content: space-between;
  align-items: center;
`;

export const NoticeInputGroup = styled.div`
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
`;

export const RepeatTime = styled(NoticeInputGroup)`
	width: 320px;
`;
export const InputGroup2 = styled.div`
	display: flex;
	flex-flow: column;
	gap: 5px;
`;

export const NoticeInputItem2 = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
`;

export const SubTextRow = styled.div`
    margin-top: 5px;
	color: red;
	font-size: 12px;
`;

export const BoxWrapper = styled.div`
	margin-top: 5px;
	margin-bottom: 20px;
`;

export const TitleLang = styled.div`
	font-size: 14px;
	line-height: 17px;
	padding-left: 5px;
	font-weight: 600;
`;

export const MessageBox = styled.div`
	background: #f9f9f9;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;

	${Textarea} {
		border-radius: 3px;
		border: 1px solid #d9d9d9;
		background: #fff;
		width: 100%;
		height: 160px;
		margin-top: 10px;
	}
	${BtnWrapper} {
		position: absolute;
		width: 16px;
		height: 16px;
		top: 20px;
		right: 20px;
	}
`;

// FORM

export const FormItemGroup = styled.div`
    margin-bottom: 15px;
    display: flex; 
    align-items: center;
    justify-content: flex-start;
`;

export const FormGroup = styled.div`
  margin-bottom: 24px;
`;

export const FormRowGroup = styled.div`
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    margin-bottom: 24px;
`;

export const FormLabel = styled.label`
	//display: block;
	font-size: 16px;
	margin-bottom: 8px;
	min-width: fit-content;
	font-weight: 700;
    line-height: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`;

export const FormInput = styled.input`
  width: ${props => props.width || '100%'};
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  
  &:focus {
    outline: none;
    border-color: #ef4444;
  }
	&:disabled {
		color: ${props => props.color || '#cccccc'};
		background: ${props => props.background_color || '#f6f6f6'};
	}
	
    ${props => props.suffix && `
		padding-right: 60px; // 라벨 영역을 위한 여백 확보
	`}
`;

export const FormRowInput = styled.input`
    padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	font-size: 14px;
	
	&:focus {
	outline: none;
	border-color: #ef4444;
	}
`;

export const FormTextArea = styled.textarea`
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	min-height: 120px;
	font-size: 14px;
	
	&:focus {
	outline: none;
	border-color: #ef4444;
	}
    &:disabled {
        color: ${props => props.color || '#cccccc'};
        background: ${props => props.background_color || '#f6f6f6'};
    }
`;

export const FormHelperText = styled.div`
	color: red;
	position: relative;
	margin-top: 8px;
	text-align: right;
	font-size: 14px;
`;

export const FormButtonContainer = styled.div`
    display: flex;
    gap: ${props => props.$gap};
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
`

export const FormStatusBar = styled.div`
    display: flex;
    flex-direction: column;
    gap: 4px;
`

export const FormStatusLabel = styled.div`
    color: #374151;
    font-weight: 500;
    font-size: 1.15rem;
`;

export const FormStatusWarning = styled.div`
    font-size: 0.695rem;
    color: #dc2626;
`

export const FormCharacterLimit = styled.div`
  margin-top: 32px;
  font-size: 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
`;

export const FormTextAreaWrapper = styled.div`
  position: relative;
`;

export const FormInputSuffixWrapper = styled.div`
  position: relative;
  width: ${props => props.width || '100%'};
  display: inline-block;
`;

export const FormInputSuffix = styled.div`
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
    width: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f1f5f9;
	color: #475569;
	font-size: 14px;
	font-weight: 500;
	padding: 0 12px;
	border-radius: 0 8px 8px 0;
	border-left: 1px solid #e2e8f0;
`;

export const TitleItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: 10px;
`;

export const TitleItemLabel = styled.div`
    color: ${props => props.color || 'black'};
`;

export const TitleItemValue = styled.div`
	font-weight: ${props => props.fontWeight || 500};
	color: ${props => props.color || 'black'};
`;

export const ChargeBtn = styled.button`
	&&{
		width: 60px;
		height: 32px;
		padding: 0.375rem;
		border-radius: 4px;
		font-size: 0.895rem;
		background-color: #D9D9D9;
		color: #495057;
		border: 1px solid #dee2e6;
		align-items: center;
		cursor: pointer;
		
		&:hover {
		background-color: #f8f9fa;
		}
    }
`;

export const StatusLabel = styled.div`
	width: 70px;
    height: 32px;
	padding: 0.375rem;
	border-radius: 4px;
	font-size: 0.895rem;
	background-color: ${props => STATUS_STYLES[props.$status]?.background || 'white'};
	color: ${props => STATUS_STYLES[props.$status]?.color || 'black'};;
`;

export const StatusWapper = styled.td`
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: center;
`;

export const ExcelDownButton = styled.button`
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: #e9ecef;
  }
`;

//datepicker
export const DateTimeGroup = styled.div`
    display: flex;
    align-items: center;
    gap: 12px;
`;

export const TimeGroup = styled.div`
    display: flex;
    gap: 8px;
`;

export const DateTimeWrapper = styled.div`
    display: flex;
    flex-direction: column;
    gap: 16px;
	margin: 0 10px;
    flex-wrap: wrap;
`;

export const DateContainer = styled.div`
  min-width: 100px;
`;

export const TimeContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 4px;
`;

export const StyledSelectInput = styled(SelectInput)`
  width: 65px;
  padding: 5px 25px 5px 8px;
`;

export const TimeSeparator = styled.span`
  color: #94a3b8;
  margin: 0 2px;
`;