import CrudPanel from '../components/CrudPanel';
import { useState } from 'react';
import { useApp } from '../context/AppContext';
import { useRights } from './spec/ui';
import CustomersView from './CustomersView';
import { Workspace, Field, Select, DraftForm, RecordTable, Metric, recordId, useRoleLocalState } from './DomainWorkspace';

const INITIAL_FEEDBACK = [
  { id:'FB-101', customer:'Customer C-1042', service:'S-401', rating:5, note:'Clear explanation of the device diagnosis.', status:'New', branch:'KK' },
  { id:'FB-102', customer:'Customer C-1121', service:'S-402', rating:3, note:'Would appreciate an earlier collection update.', status:'In review', branch:'KK' },
];
const emptyFeedback = { customer:'', service:'', rating:'5', note:'', branch:'KK' };

function CustomerFeedbackView() {
  const { state } = useApp();
  const [feedback, setFeedback, saveError] = useRoleLocalState('device-feedback', INITIAL_FEEDBACK);
  const [draft, setDraft] = useState(emptyFeedback);
  const [showForm, setShowForm] = useState(false);
  const [status, setStatus] = useState('All');
  const [search, setSearch] = useState('');
  const rights = useRights('device-services', 'feedback'); // shared page x role list
  const visible = feedback.filter(item => (status === 'All' || item.status === status) && `${item.customer} ${item.service} ${item.note}`.toLowerCase().includes(search.toLowerCase()));
  function save(event) {
    event.preventDefault();
    if (!draft.customer.trim() || !draft.note.trim()) return;
    setFeedback(items => [{ ...draft, customer:draft.customer.trim(), note:draft.note.trim(), rating:Number(draft.rating), id:recordId('FB'), status:'New', recordedBy:state.currentUser?.displayName }, ...items]);
    setDraft(emptyFeedback);
    setShowForm(false);
  }
  return <Workspace view="device-feedback" title="Customer Feedbacks" subtitle="Review service experiences and record the next internal follow-up." saveError={saveError} toolbar={rights.add ? <button className="sb-primary" onClick={() => setShowForm(true)}>+ Record feedback</button> : null}>
    <div className="sb-metrics"><Metric label="Feedback received" value={feedback.length} detail="sample service experiences"/><Metric label="Average rating" value={feedback.length ? `${(feedback.reduce((sum,item) => sum + item.rating, 0)/feedback.length).toFixed(1)} / 5` : '—'} detail="customer satisfaction"/><Metric label="Needs review" value={feedback.filter(item => item.status !== 'Resolved').length} detail="open follow-ups"/></div>
    {showForm && <DraftForm title="Record customer feedback" onSubmit={save} onCancel={() => setShowForm(false)} submitLabel="Save feedback">
      <Field label="Customer alias" required maxLength={80} value={draft.customer} onChange={event => setDraft({...draft, customer:event.target.value})}/>
      <Field label="Service reference" maxLength={60} value={draft.service} onChange={event => setDraft({...draft, service:event.target.value})}/>
      <Field label="Rating"><Select value={draft.rating} onChange={event => setDraft({...draft, rating:event.target.value})}>{[5,4,3,2,1].map(value => <option key={value} value={value}>{value} / 5</option>)}</Select></Field>
      <Field label="Feedback" required maxLength={500} value={draft.note} onChange={event => setDraft({...draft, note:event.target.value})}/>
    </DraftForm>}
    <div className="sb-work-toolbar" style={{marginBottom:14}}><Field label="Search feedback" value={search} onChange={event => setSearch(event.target.value)} placeholder="Customer, service or feedback"/><Field label="Status"><Select value={status} onChange={event => setStatus(event.target.value)}>{['All','New','In review','Resolved'].map(value => <option key={value}>{value}</option>)}</Select></Field></div>
    <RecordTable title="Service feedback register" rows={visible} columns={[
      {key:'customer', label:'Customer'}, {key:'service', label:'Service'}, {key:'rating', label:'Rating', render:item => `${item.rating} / 5`}, {key:'note', label:'Feedback'}, {key:'branch', label:'Branch'},
      {key:'status', label:'Follow-up status', render:item => !rights.edit ? <span className="sp-chip">{item.status}</span> : <Select aria-label={`Status for ${item.id}`} value={item.status} onChange={event => setFeedback(items => items.map(current => current.id === item.id ? {...current, status:event.target.value} : current))}>{['New','In review','Resolved'].map(value => <option key={value}>{value}</option>)}</Select>},
    ]}/>
    <div className="sb-safety-note">Sample feedback and internal notes are saved in this browser for the selected role. No customer message is sent.</div>
  </Workspace>;
}

export default function DeviceServicesView({ section='crm' }) {
  if (section === 'listing') return <><section className="sb-view sb-crud-wrap" data-view="service-jobs"><div className="sb-page-head"><div><div className="sb-eyebrow">Device Services</div><h1>Service list</h1><div className="sb-subtitle">Repair and service jobs, who has them and where they are.</div></div></div><CrudPanel entity="jobs" /></section></>;
  if (section === 'feedback') return <CustomerFeedbackView/>;
  return <CustomersView section="crm" />;
}