<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
