import React, { useState } from 'react';

import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

import { Input } from '@/components/ui/input';

import { Button } from '@/components/ui/button';

import { ThumbsUp, ThumbsDown, HelpCircle } from 'lucide-react';

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';

const TelcoCustomerService = () => {

const [searchTerm, setSearchTerm] = useState('');

const [npsScores, setNpsScores] = useState({});

const [selectedProvider, setSelectedProvider] = useState(null);

const [dialogOpen, setDialogOpen] = useState(false);

const telcoData = [

{

provider: 'BT',

consumerNumber: '0800 800 150',

businessNumber: '0800 800 290',

businessHours: 'Mon-Fri: 8am-6pm, Sat: 8am-2pm',

supportType: 'Landline & Broadband',

businessSupportType: 'Business Broadband & Communications'

},

{

provider: 'EE',

consumerNumber: '0800 956 6000',

businessNumber: '0800 079 5735',

businessHours: 'Mon-Fri: 8am-9pm, Sat-Sun: 8am-6pm',

supportType: 'Mobile & Broadband',

businessSupportType: 'Business Mobile & IoT Solutions'

},

{

provider: 'Vodafone',

consumerNumber: '191',

businessNumber: '0800 028 0202',

businessHours: 'Mon-Fri: 8am-8pm, Sat-Sun: 9am-6pm',

supportType: 'Mobile',

businessSupportType: 'Business Mobile & Connectivity'

},

{

provider: 'O2',

consumerNumber: '202',

businessNumber: '0800 028 8001',

businessHours: 'Mon-Fri: 8am-9pm, Sat-Sun: 9am-6pm',

supportType: 'Mobile',

businessSupportType: 'Business Mobile & Digital Solutions'

},

{

provider: 'Three',

consumerNumber: '0333 338 1001',

businessNumber: '0333 338 3399',

businessHours: 'Mon-Fri: 8am-9pm, Sat-Sun: 9am-6pm',

supportType: 'Mobile',

businessSupportType: 'Business Mobile & Enterprise Services'

},

{

provider: 'Sky Mobile',

consumerNumber: '0333 788 3260',

businessNumber: '0330 094 8000',

businessHours: 'Mon-Fri: 8am-6pm, Sat: 9am-5pm',

supportType: 'Mobile & Broadband',

businessSupportType: 'Business Mobile & Connectivity'

},

{

provider: 'TalkTalk',

consumerNumber: '0333 202 0000',

businessNumber: '0800 954 0105',

businessHours: 'Mon-Fri: 8am-8pm, Sat-Sun: 9am-5pm',

supportType: 'Broadband & Home Phone',

businessSupportType: 'Business Broadband & Communications'

},

{

provider: 'Virgin Media',

consumerNumber: '0345 454 1111',

businessNumber: '0800 952 2737',

businessHours: 'Mon-Fri: 8am-7pm, Sat: 9am-5pm',

supportType: 'Broadband, TV & Mobile',

businessSupportType: 'Business Broadband, Connectivity & Solutions'

}

];

const handleNpsVote = (provider, sentiment) => {

setNpsScores(prev => ({

...prev,

[provider]: {

positive: (prev[provider]?.positive || 0) + (sentiment === 'positive' ? 1 : 0),

negative: (prev[provider]?.negative || 0) + (sentiment === 'negative' ? 1 : 0)

}

}));

};

const calculateNpsPercentage = (provider) => {

const scores = npsScores[provider] || { positive: 0, negative: 0 };

const total = scores.positive + scores.negative;

return total > 0

? Math.round((scores.positive / total) * 100)

: null;

};

const filteredTelcos = telcoData.filter(telco =>

telco.provider.toLowerCase().includes(searchTerm.toLowerCase()) ||

telco.supportType.toLowerCase().includes(searchTerm.toLowerCase()) ||

telco.businessSupportType.toLowerCase().includes(searchTerm.toLowerCase())

);

return (

<Card className="w-full max-w-5xl">

<CardHeader>

<CardTitle>UK Telecommunications Customer Service</CardTitle>

</CardHeader>

<CardContent>

<div className="mb-4">

<Input

type="text"

placeholder="Search by provider, support type, or business service"

value={searchTerm}

onChange={(e) => setSearchTerm(e.target.value)}

className="w-full"

/>

</div>

<div className="overflow-x-auto">

<table className="w-full border-collapse">

<thead>

<tr className="bg-gray-100">

<th className="p-2 border">Provider</th>

<th className="p-2 border">Consumer Service Number</th>

<th className="p-2 border">Consumer Support Type</th>

<th className="p-2 border">Business Service Number</th>

<th className="p-2 border">Business Support Type</th>

<th className="p-2 border">Business Hours</th>

<th className="p-2 border">NPS Feedback</th>

</tr>

</thead>

<tbody>

{filteredTelcos.map((telco, index) => {

const npsPercentage = calculateNpsPercentage(telco.provider);

return (

<tr key={index} className="hover:bg-gray-50">

<td className="p-2 border font-semibold">{telco.provider}</td>

<td className="p-2 border">{telco.consumerNumber}</td>

<td className="p-2 border">{telco.supportType}</td>

<td className="p-2 border">{telco.businessNumber}</td>

<td className="p-2 border">{telco.businessSupportType}</td>

<td className="p-2 border">{telco.businessHours}</td>

<td className="p-2 border">

<div className="flex items-center justify-center space-x-2">

<Button

variant="ghost"

size="sm"

onClick={() => handleNpsVote(telco.provider, 'positive')}

className="hover:bg-green-100"

>

<ThumbsUp className="h-4 w-4 text-green-500" />

</Button>

<Button

variant="ghost"

size="sm"

onClick={() => handleNpsVote(telco.provider, 'negative')}

className="hover:bg-red-100"

>

<ThumbsDown className="h-4 w-4 text-red-500" />

</Button>

<Button

variant="ghost"

size="sm"

onClick={() => {

setSelectedProvider(telco.provider);

setDialogOpen(true);

}}

>

<HelpCircle className="h-4 w-4 text-blue-500" />

</Button>

{npsPercentage !== null && (

<span className={`ml-2 font-semibold ${

npsPercentage > 50 ? 'text-green-600' : 'text-red-600'

}`}>

{npsPercentage}%

</span>

)}

</div>

</td>

</tr>

);

})}

</tbody>

</table>

</div>

<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>

<DialogContent>

<DialogHeader>

<DialogTitle>NPS (Net Promoter Score) Explained</DialogTitle>

<DialogDescription>

<p>The Net Promoter Score is a measure of customer satisfaction:</p>

<ul className="list-disc pl-5 mt-2">

<li>Give a thumbs up if you had a positive experience</li>

<li>Give a thumbs down if you had a negative experience</li>

<li>The percentage shows the proportion of positive responses</li>

<li>This is based on real-time user feedback</li>

</ul>

<p className="mt-2 italic">Current provider being rated: {selectedProvider}</p>

</DialogDescription>

</DialogContent>

</Dialog>

</Card>

</CardContent>

</Card>

);

};

export default TelcoCustomerService;+447418939164